체크포인트

• 시맨틱 마크업이란 무엇이며, 왜 중요한지 잘 알고 있다
• DOM0과 DOM2의 이벤트 처리 방식의 차이와 장단점을 알고 있다.
• ShadowDOM은 무엇이며 왜 쓰이는지 알고 있다.
• data 속성을 왜, 어떻게 활용하는지 알고 있다.
• 마크업으로 레이아웃을 구성할 수 있다.

시맨틱 마크업

• Semantic : 의미의 의미론적인
• 특징
  • 유지 보수가 편리하다
  • 검색 엔진 최적화에 유리하다 ⇒ 컴퓨터가 이해할 수 있게 만든다
  • 웹 접근성 측면에서도 이점이 있다
    • 웹을 이용하는 데 어려움이 있는 사람들의 접근성을 높여 준다

DOM0와 DOM2

• DOM Level 0
  • 초기 DOM 표준이 아니라 웹 브라우저의 초기 버전에 구현된 기능들을 가리키는 용어
  • DOM Level 0는 표준화 되지 않은 형태, 브라우저마다 조금씩 다른 방식으로 DOM 기능을 제공
  • document 객체를 사용해서 DOM 요소에 접근하는 것은 DOM Level 0의 일부이다
    • 하지만 공식적인 표준이 아니기 때문에 통일성이 없었다
  • 인라인 이벤트 모델
  • 하나의 이벤트에 하나의 이벤트 리스너만 연결
• DOM Level 2
  • W3C에서 2000년대에 공식적으로 표준화한 DOM 버전
  • DOM Level 1을 보완하고, 새로운 기능과 API를 도입
  • DOM Level 2는 XML 문서 처리에 대한 기능을 개선, CSS 스타일 접근, 이벤트 처리, Range(범위) 및 Traversal(탐색) 등의 기능을 추가
  • DOM Level 2는 총 3개의 모듈로 구성되어 있다
    • Core : 기본적인 DOM 기능 제공
    • Events : 이벤트 처리에 대한 기능 제공
    • HTML : HTML 문서를 다루는 기능을 제공
  • 하나의 이벤트에 여러 개의 리스너 연결

Shadow DOM

• 숨겨진 DOM 트리가 통상적인 DOM 트리에 속한 요소에 부착될 수 있게 한다.

  

  [출처 : https://developer.mozilla.org]

• <video> 태그가 대표 적인 Shadow DOM

  • DOM에서 보이는 모든 것은 <video> 요소지만 버튼들과 다른 컨트롤 요소들은 shadow DOM 내부에 캡슐화 되어 있다

HTML Data 속성 사용하기

• data-* 속성은 표준이 아닌 속성이나 추가적인DOM 속성 등 추가 정보를 저장할 수 있도록 해준다
• data-로 시작하는 무엇이든 사용할 수 있다