전체 글416 [자바스크립트] 키보드 이벤트 (keyboard event) 종류 키보드 이벤트 (Keyboard Event) 사용자가 키를 누르거나 키를 놓을 때 발생하는 이벤트입니다. 키보트 이벤트의 종류 keydown 사용자가 키보드의 키를 눌렀을 때 발생합니다. keyup 사용자가 키보드의 키를 눌렀다가 떼었을 때 발생합니다. keypress 사용자가 키보드의 키를 눌렀을 때 발생합니다. Alt, Ctrl, Shift, Esc 등 몇 가지 키에서는 이 이벤트를 발생시키지 않습니다. 현재는 deprecated 되어 사용을 권장하지 않습니다. keydown, keyup, keypress 사용 예제 input에 keydown, keyup, keypress 이벤트를 등록해줌으로써 키보드의 키가 눌려 이벤트가 발생하면 그에 맞게 이벤트 이름을 출력합니다. 입력창에 하나의 키를 오래 누르.. 2022. 4. 15. [자바스크립트] JavaScript 기초 다지기 - 1 sum sum function의 x+y값을 리턴합니다. function sum(x, y) { return x + y; } console.log(sum(1,3)); //4 multiply multiply function의 x*y값을 리턴합니다. function multiply(x,y) { return x*y; } console.log(multiply(2,3)); // 6 length getStringLength function은 length를 사용하여 총문자열의 길이를 리턴합니다. function getStringLength(str) { return str.length; } console.log("Hello, world"); //12 toLowerCase() 문자열에 toLowerCase()라는 메서드(함.. 2022. 4. 12. [네트워크] URI, URL, URN의 차이점 차이점 URL, URN 은 URI에 포함되는 개념이며 URL은 자원의 위치, URN은 자원의 이름을 의미합니다. URI는 식별하고, URL은 위치를 가리킨다. URI (Uniform resource Identifier) 인터넷에 있는 자원을 나타내는 유일한 주소입니다. URI는 인터넷에서 요구되는 기본 조건으로서 인터넷 프로토콜에 항상 붙어 다닙니다. URI안에 하위 개념으로 URN, URI가 존재합니다. 예제) http://, ftp://, mailto:// URN (Uniformed Resource Name) 프로토콜 포함하지 않습니다. 해당 자원의 이름을 의미합니다. 독립적인 자원 지시자입니다. Page 이후 부분까지 포함합니다. 예제) urn:isbn:0-395-36341-1 URL (Unifor.. 2022. 4. 8. [CSS] display display 속성 요소를 화면에 어떻게 드러나게 할지를 결정하는 속성이다. display 속성 display: none | block | inline | inline-block 알고 넘어가자! 요소 (즉 태그)는 inline 요소와 block 요소로 나뉜다. inline: 줄 속에 넣는 요소이며, , , 등 특정 문자열을 선택할 때 사용하는 태그가 그 예이다. 특징: 줄 바꿈이 되지 않는다. block: 좀 더 넓은 범위를 지정할 때 사용하는 같은 태그로 block 요소를 사용할 때는 가로 화면 100%를 차지하기 때문에 자동으로 앞뒤 줄 바꿈이 된다. 특징: 줄 바꿈이 있다. See the Pen Untitled by heerachoi (@heerachoi) on CodePen. display: no.. 2022. 3. 31. [CSS] background 와 background-color의 차이점 결론 적으로 background와 background-color 모두 배경 색상을 지정할 수 있다. 다만 background-color은 background 의 속성 중 하나이다. background-color 는 색깔만 지정할 수 있는 반면, background 는 color 이외의 다른 background 옵션들까지 지정해줄 수있다. color 글씨 색깔 background 다양한 백그라운드 속성을 부여할 수 있다. background 속성 background-color: color | transparent | initial | inherit; 요소의 배경색을 설정한다. TIP! 요소의 배경은 padding 과 border 을 포함한 요소의 전체 크기이다. ( margin 은 포함하지 않는다.) ba.. 2022. 3. 27. [자바스크립트] querySelector() 와 getElementById()의 차이점 getElementById() ID를 통해 element를 반환한다. 만약 document에 구체적인 ID의 element가 없다면 null을 반환한다. getElementById() 는 하나의 element만 반환할 때 사용하기 좋다. 이유는 HTML ID는 고유한 하나의 태그만 사용 가능하기 때문이다. ID를 두 개의 element에 사용이 불가능하다. querySelector() selector의 구체적인 그룹과 일치하는 document안 첫 번째 element를 반환한다. 일치하는 게 없다면 null을 반환한다. querySelector() 은 CSS를 있는 element를 반환할 수 있다. 그 뜻은 ID, class, 또는 모든 타입의 element를 반환해준다. querySelectorAll(.. 2022. 3. 22. [CSS] transform transform 속성 scale: 확대/축소 효과 rotate: 회전 효과 translate: 이동 효과 skew: 비틀기(기울임) 효과 transform:scale() - X 또는 Y 축으로 확대/ 축소 scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킨다. transform:scaleX(x축 비율); /* x축으로 확대, 축소 */ transform:scaleY(y축 비율); /* y축으로 확대, 축소 */ transform:scale(x축 비율,y축 비율) /* x축, y축으로 확대, 축소 */ transform:rotate() - 지정 요소 회전 rotate는 요소를 지정한 각도만큼 회전시킨다. 횐전 각도가 플러스 값일 경우 시계 방향으로 , 마이너스 값일 경우 반시계 방향으로 회전한.. 2022. 3. 20. [ 웹 기능 구현] Hover me 효과 넣기 목표 마우스를 text위로 올릴때 hover 효과 나타나게 하기 html 1 2 3 4 5 6 7 8 9 10 11 12 13 Hover Me Hover Me Colored by Color Scripter cs html 파일은 간단하게 태그로 Hover me를 만들어 주었습니다. css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 h1::before { transform: scaleX(0); /* resizes an element along the x-axis (horizontally) */ transform-ori.. 2022. 3. 19. [자료구조] LinkedList 사용법 & 예제 (Java) LinkedList ArrayList는 배열을 사용하여 List를 구현한 클래스입니다. ArrayList와 다르게 LinkedList(연결 리스트)는 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식의 자료구조입니다. 각각의 데이터가 노드(Node)로 구성되어 연결이 되어 있고, 노드의 포인터가 이전 노드와 다음 노드와의 연결을 담당합니다. LinkedList 장점 데이터를 추가하거나 삭제하는 것이 원활합니다. 노드(Node)는 LinkedList에 객체를 추가하거나 삭제하면 앞뒤 링크만 변경되고 나머지 링크는 변경되지 않습니다. 중간에 데이터를 추가나 삭제하더라도 전체의 인덱스가 한 칸씩 뒤로 밀리거나 당겨지는 일이 없기에 ArrayList에 비해서 데이터의 추가나 삭제가 용이합니다. L.. 2022. 3. 17. 이전 1 ··· 37 38 39 40 41 42 43 ··· 47 다음 728x90
