개발자 꿈나무의 블로그

* 기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드 - 인수가 1개인 경우 var colors = ["red", "green", "blue", "white", "black"]; var colors2 = colors.slice(2); // 인덱스 값이 2인 요소부터 마지막 요소까지 꺼내기 document.write(colors2); // slice()는 splice와는 달리 배열을 바꾸지 않기 때문에 기존 배열은 유지된다. 결과값은 다음과 같다. blue, white, black - 인수가 2개인 경우 var colors = ["red", "green", "blue", "white", "black"]; var colors3 = colors.slice(2, 4); // 인덱스 값이 2부터 3..

* 원하는 위치에 요소를 추가 or 삭제하는 splice() 메서드 - 인수가 1개인 경우 // 인수가 1개인 경우 var numbers = [1, 2, 3, 4, 5]; var newNumbers = numbers.splice(2); // 3번째 요소인 3부터 마지막 요소인 5까지 삭제를 하겠다 ! document.write("반환된 배열 : " + newNumbers + " "); document.write("변경된 배열 : " + numbers); 결과값은 다음과 같다. 반환된 배열 : 3, 4, 5 변경된 배열 : 1, 2 - 인수가 2개인 경우 //인수가 2개인 경우 var study = ["html", "css", "web", "jqeury"]; var newStudy = study.splic..

* 함수 선언하고 호출하기 function 함수명() { //함수 선언하기 명령 } 함수명() 또는 함수명(변수) // 함수 호출하기 * var, let, const로 선언한 변수 비교 구분 var let const 스코프 함수 레벨 블록 레벨 블록 레벨 재할당 가능 가능 불가능 재선언 가능 불가능 불가능 * 함수 표현식 - 익명 함수 : 이름 없이 선언한 함수 function(매개변수) { 명령 } - 즉시 실행 함수 : 함수를 정의하는 것과 동시에 실행 (function() { 명령 }()); (function(매개변수) { 명령 }(인수)); - 화살표 함수 : ES6부터 지원하는 방법으로 화살표 기호(=>) 왼쪽에는 매개변수를, 오른쪽에는 함수를 작성함. 익명 함수일 때만 사용할 수 있음. (매개..

* 미디어 쿼리의 속성 종류 속성값 width, height 웹페이지의 가로 너비, 세로 높이 min-width, min-height 웹페이지의 최소 너비, 최소 높이 max-width, max-height 웹페이지의 최대 너비, 최대 높이 device-width, device-height 단말기의 가로 너비, 세로 높이 min-device-width, min-device-height 단말기의 최소 너비, 최소 높이 max-device-width, max-device-height 단말기의 최대 너비, 최대 높이 orientation : portrait 단말기의 세로 모드 orientation : landscape 단말기의 가로 모드 * 플렉스 박스 레이아웃의 속성 종류 설명 속성값 display 플렉스 ..

*변형 함수 translate() 함수 : 요소 이동하기 translate: translate(tx, ty) 지정한 크기만큼 x축과 y축으로 이동합니다. translate: translate(tx, ty, tz) 지정한 크기만큼 x축과 y축과 z축으로 이동합니다. translate: translateX(tx) 지정한 크기만큼 x축으로 이동합니다. translate: translateY(ty) 지정한 크기만큼 y축으로 이동합니다. translate: translateZ(tz) 지정한 크기만큼 z축으로 이동합니다. scale() 함수 : 요소 확대, 축소하기 transform: scale(sx, sy) 지정한 크기만큼 x축, y축으로 확대, 축소합니다. transform: scale(sx, sy, sz) 지..

종류 설명 :only-child 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다. A:only-type-of 부모 안에 A 요소가 하나뿐일 때 선택한다. :first-child 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다. :last-child 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다. A:first-of-type 부모 안에 있는 A 요소 중에서 첫 번째 자식 요소를 선택한다. A:last-of-type 부모 안에 있는 A 요소 중에서 마지막 자식 요소를 선택한다. :nth-child(n) 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다. :nth-last-child(n) 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다..

종류 선택 요소 예시 [속성] 해당 속성이 있는 요소 [required] [속성 = 값] 지정한 속성값이 있는 요소 [target = _blank] [속성 ~= 값] 지정한 속성값이 포함된 요소(단어별) [class ~= button] [속성 |= 값] 지정한 속성값이 포함된 요소 (하이픈 포함, 단어별) [title |= us] [속성 ^= 값] 지정한 속성값으로 시작하는 요소 [title ^= eng] [속성 $= 값] 지정한 속성값으로 끝나는 요소 [href $= xls] [속성 *= 값] 지정한 속성값의 일부가 일치하는 요소 [href *= w3]