개발 학습 기록

parentNode는 부모 "노드"를 반환하고 부모 노드가 없으면 Document node를 반환한다. parentElement는 부모 "요소"를 반환하고 부모 요소가 없으면 null을 반환한다. document.documentElement는 에 해당하며 의 부모는 document인데, document는 요소가 아니다. 그래서 parentNode는 document 노드를 반환하지만, parentElement는 null을 반환한다.

HTML 2021. 6. 27. 02:04

https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io Level 1 & 2. Type Selector level 1 답: plate 모든 태그 선택 level 2 답: bento 모든 태그 선택 Level 3. ID Selector 답: #fancy id="fancy"인 요소 선택 특정한 id를 가진 요소를 선택하며 id는 중복될 수 없다 Level 4. Descendant Selector 답: plate apple 의 내부에 있는 모든 을 선택 은 다른 요소의 내부에 있기 때문에 자손이라 불린다 Level 5. Combine the Descendant &..

CSS 2021. 6. 4. 02:57

브라우저는 html 파일을 위에서부터 차례로 읽어 내려가며 parsing(분석)한다. parsing 도중에 script 태그를 만나면 해당 script를 다운로드 받기 시작하는데, 만나게 되는 script 태그의 위치에 따른 장단점을 살펴보겠다. 1. ... 브라우저가 html 파일을 위에서부터 차례로 읽어내려가다가 이 위치에 작성하면 HTML parsing이 완료된 다음 js 파일 다운로드를 시작하므로 사용자가 HTML 콘텐츠를 빨리 볼 수 있다는 장점이 있지만, 콘텐츠가 js에 의존하고 있다면 의미 있는 콘텐츠를 보기까지 js의 다운로드와 실행을 기다려야 한다는 단점이 있다. 3. async ... script 태그에 aync를 작성하고 head 태그에 넣는 방법도 있다. async는 boolean ..

JavaScript 2021. 5. 27. 22:15

index.js const inputBox = document.getElementById("inputBox"); inputBox.addEventListener("keypress", (e) => { console.log(e); } }); 위와 같은 코드를 작성하자 "Uncaught TypeError: Cannot read property 'addEventListener' of null" 에러가 발생했다. 직역하자면, null의 프로퍼티인 'addEventListner'를 읽을 수 없음?이 될 거 같다. 나는 변수 inputBox의 프로퍼티인 'addEventListener'를 사용하도록 코드를 작성했는데 왜 null의 프로퍼티라고 할까? 왜냐하면 변수 inputBox에 null이 담겼고, null에게는 '..

JavaScript 2021. 5. 24. 00:01

input 태그에 입력을 한 뒤에 따로 submit 버튼을 클릭하는 게 아니라 enter키로 이벤트를 실행하기 위해 아래와 같은 코드를 사용했었다. const inputBox = document.getElementById("inputBox"); inputBox.addEventListener("keydown", (e) => { if (e.keyCode == 13) { console.log("엔터 눌렀을 때만 실행"); } }); 키보드의 각 key마다 숫자로 된 keyCode가 있는데 엔터키의 경우 그게 13이라서 누른 키의 keyCode가 13이면 실행하도록 하는 코드이다. 키보드 이벤트의 종류에는 keypress, keydown, keyup이 있는데 차이점은 아래와 같다. keypress: charat..

JavaScript 2021. 5. 20. 00:17

CSS를 작성하다보면 특정 속성값을 여기저기서 반복해서 쓰는 경우가 있는데, 후에 이 속성값을 바꾸려면 이곳 저곳을 찾으면서 수정해야 하는 번거로운 과정을 거쳐야한다. 사용자 지정 속성을 사용하면 특정 속성값을 지정해놓고 필요한 영역에서 재사용할 수 있고, 수정 또한 속성값을 정해놓은 영역에서 한 번만 하면 되므로 간편하다. box라는 클래스를 가진 div를 하나 생성하고 :root라는 의사 클래스(pseudo-class)에 사용자 지정 속성의 이름과 그 값을 원하는대로 정해서 작성한 뒤 사용자 지정 속성을 사용할 곳에 var( )를 이용해서 작성하면 :root { --size-width: 50px; --size-height: 50px; --color-pink: #fd7f84; } .box { width..

CSS 2021. 5. 9. 22:29

펼침연산자는 ...로 표기하며 말 그대로 객체나 배열 내부의 값을 펼쳐주는 연산자이다. 1. 배열에서의 펼침연산자 const weekday = ["Mon", "Tue", "Wed", "Thu", "Fri"]; const weekday2 = [...weekday]; console.log(weekday); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ] console.log(weekday2); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ] console.log(weekday === weekdays); // false weekday와 weekday2를 콘솔에 출력하면 출력값이 같지만, weekday2는 weekday를 똑같이 복사했을뿐 다른 메모리 공간에 만..

JavaScript 2021. 5. 1. 02:53

favicon은 favourite + icon의 합성어로 브라우저의 탭에서 볼 수 있는 자그마한 사이즈의 아이콘이다. 이미지를 원하는 크기(16x16, 32x32, 48x48, 64x64)와 원하는 확장자(ico, png, gif)로 만든 뒤에 HTML의 head태그 안에 작성해서 만들 수 있다.

HTML 2021. 4. 30. 16:46