JavaScript 를 불러오기 위해 <script> 요소를 <body>요소가 끝나기 직전에 배치하는 이유?
HTML이 먼저 파싱 되고나서 JavaScript를 적용해주기 위해서입니다.
HTML 요소가 먼저 불러와져 있어야 JavaScript에서 의도한 대로 DOM에서 요청한 HTML요소를 불러올 수 있기 때문입니다.
또한, 사용자에게 보이는 화면이 갱신되는 속도를 위함입니다.
<li> 요소는 왜 <ul> 요소의 자식 요소여야만 하는가?
<ul>은 목록을 담는 요소이며,<li>는 목록 아이템을 보여주기 위한 요소이기 때문입니다.
화면상으로는 문제가 없더라도, 각각 의미에 맞게 시멘틱하게 HTML을 작성해야 누구나 이해하기 쉽기 때문입니다.
id 속성과 class 속성의 차이
고유성에서 차이가 있습니다. id는 고유한 하나의 HTML 요소에만, class는 여러 HTML 요소들에 사용할 수 있습니다.
getElementById 🙆♀️ 는 있어도
getElementsById ❌ 는 없는 것도 같은 맥락입니다.
Semantic HTML의 필요성을 예시를 들어 설명
Semantic HTML은 의미를 갖게 만들어 줍니다.
시맨틱 요소의 예시로는 header, main, nav, footer 등이 있습니다.
보통 div와 span tag 를 자주 사용하지만, 요소의 이름으로는 각 요소가 어떤 역할을 하는지 알 수 없습니다. 하지만 시맨틱 요소를 사용하면 요소의 이름만 보고도 해당 요소가 어떤 역할을 하는지 파악할 수 있게 됩니다.
이를 통해 개발자간 소통, 검색 효율성, 웹 접근성에 도움이 됩니다.
의미가 있는 태그는 다른 개발자에게 명확한 의미를 전달해 줍니다. 요소의 이름만 봐도 의미를 파악할 수 있기 때문에 그만큼 의미를 전달하기 위한 시간과 id, class 작성에 필요한 시간 소모도 줄어들고 개발자간 소통이 원활해집니다.
또한 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 시맨틱 요소를 사용함으로써 HTML에 의미를 부여하는 것만으로도 검색 효율성을 높일 수 있습니다.(제목은 h1, 강조할 단어는 string, em 등 의미에 맞는 태그를 사용하는 것이 중요)
마지막으로 시맨틱 요소를 사용하면 화면의 구조를 짜는 것을 넘어 구조에 대한 정보를 전달할 수 있어 요소에 담긴 콘텐츠도 더 명확하게 전달할 수 있으므로 웹 접근성을 향상시킬 수 있습니다. (장애가 있는 사용자가 스크린 리더를 이용해 페이지를 탐색할 때 시맨틱 태그로 웹 접근성에 도움)
attribute와 property의 차이
둘다 속성의 개념이지만 차이가 있습니다. attribute 는 HTML 마크업에 정의되어있는 것이고, property 는 HTML DOM tree 에 있는 것입니다. 즉 attribute는 default 값이 변하지 않고, property는 변할 수 있는 것입니다.
이벤트 전파와 이벤트 위임
이벤트 전파
DOM 트리 상에 존재하는 DOM 요소 노드에서 이벤트가 발생하면, 이벤트 객체는 DOM 트리를 통해 다른 DOM 요소 노드로 전파되는 것입니다.
대표적인 예시로는<ul>의 자식노드인<li>요소를 클릭하여 이벤트가 발생할 경우 부모인<ul>에게 전파됩니다. 부모노드가 자식노드에서 발생한 이벤트를 감지할 수 있다는 것입니다. 반대의 경우에도 감지가 가능합니다.
3단계로 구분
- 캡쳐링 단계: 이벤트가 상위요소 ➡️ 하위요소 방향으로 전파
- 타깃 단계: 이벤트가 이벤트 타깃에 도달
- 버블링 단계: 이벤트가 하위요소 ➡️ 상위요소 방향으로 전파
이벤트 위임
여러개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신, 상위 요소에 이벤트를 위임하는것을 말합니다. 이벤트를 위임할 경우, 동적으로 하위 DOM 요소를 추가하더라도 일일이 추가된 DOM 요소에 이벤트 핸들러를 등록할 필요가 없습니다.
