피리부는 사나이 (pied piper)

[HTML] DOM과 HTML 시멘틱 마크업 본문

HTML

[HTML] DOM과 HTML 시멘틱 마크업

코더 451 2022. 4. 18. 20:18

 

1. DOCTYPE 정의 및 선언 : 우리말로 문서 타입 정의라고 한다. HTML에서 독타입은 문서의 최상단에서 찾을 수 있는 필수 서문이다. 문서가 렌더링할 때 "quirk mode"로 바뀌지 않도록 하는 것이 유일한 목적"<!DOCTYPE html>" doctype은 브라우저가 일부 스펙과 맞지 않는 다른 렌더링 모드를 사용하기 보다는 적절한 스펙을 따르는 최선의 시도를 하도록 한다.

 

 

2. DOM 조작 

 

DOM이란 무엇인가? 

: 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. 

DOM  (Document Object Model)은 HTML의 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 

즉 프로퍼티와 메서드를 제공하는 트리 자료구조

 

 

트리 자료구조

 

트리 자료구조 (tree data structre)  :

노드들의 계층 구조로 이루어짐 즉, 트리 자료구조는  부모 노드와 자식 노드로 구성되는 비선형 자료구조이다. 트리 자료구조는 하나의 최상위 노드에서 시작, 최상위 노드는 부모 노트 없음. 그것을 루트 노드라고 함.

 

 

다시 정리해보자,
노드 객체들로 구성된 트리 자료구조를 DOM이라고 한다. 
노드 객체의 트리로 구조화되어 있기 때문에 DOM을 DOM 트리라고 부르기도 하는 것 

 

 

 

 

 

 

 

DOM 조작 

: DOM 조작은 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말함.

    

  * 대표적인 DOM 조작 프로퍼티 

 

  • innerHTML : setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 HTML 마크업을 취득하거나 변경
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="foo">Hello<span>world!</span></div>
</body>
 <script>
   document.getElementById('foo').innerHTML = 'Hi <span>there!</span>';
 </script>
</html>

 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM이 반영 됨 

이처럼 innerHTML 프로퍼티를 사용하면 HTML 마크업 문자열로 간단히 DOM 조작 가능 

 

  • 복수의 노드 생성과 추가, 이동 프로퍼티 등

       -createTextNode : 텍스트 노드 생성

       -appendChild : 요소 노드의 자식 노드로 추가

       -createElement : 요소 추가 

       -removeChild : 매개변수에 인수로 전달한 노드를 DOM에서 삭제 

 

    

 

 

 

 

시멘틱한 마크업 

 



h1을 쓰는 이유는 검색 엔진 봇들이 글을 수집해서 사람들이 검색할 때 더 쉽게 노출시켜 주기 때문이다.
그러므로 h1을 적절하게 잘 쓰는 것이 마크업의 핵심이다.

 

       

 

 

그리고 중요한 순서대로 h2 -> h3 -> h3 태그를 이용해서 마크업 한다.

 

 

제목 태그는 의미의 구조를 나타낸다. 그러므로 제목 태그는 상당히 중요하다.


 

시멘틱은 말 그대로 의미에 맞게 마크업을 하는 것이다.

 

**진정한 웹표준, 시멘틱을 준수하면서 효과적인 웹사이트의 기반을 만드는 '마크업'은 이제는 단순히 PSD를 HTML로만 옮겨주는 행위에만 그쳐서는 안된다. **

 

 

 

시멘틱한 마크업의 대표 개요

왜 중요한가?

 

  1. 검색 엔진 최적화
  2. 웹 접근성
  3. 가독성 

 

아웃라인 

아웃라이너 예시

 

  • 웹 페이지의 구조를 판별할 수 있는 개념으로 책의 목차와 비슷한 기능을 한다.
  • HTML5에서 추가된 요소들 대부분이 아웃라인 개념과 관련이 있다.
  • 아웃라인을 구성하는 요소에는 Heading, Sectioning 콘텐츠, Sectioning의 루트요소, Header, Footer등 다양한 요소가 있다.
  • 루트요소로는 h1~h6, p등이 될 수 있고 색션을 나눈 형태에 따라 자동으로 형성된다.

 

아웃라인까지 지키기엔 프론트 엔드 개발자에게는 매우 까다롭고 번거로운 일이 될 수 있다.
현실적으로 메인이나 상세 페이지 정도만 신경 써주는 것만으로도 괜찮을 것으로 보인다...
중요한 것을 남발하고 막 쓰면은 안되기 때문에 ...

 

 

'HTML' 카테고리의 다른 글

Sectioning elements (HTML 올바른 사용법)  (0) 2021.12.10
'HTML' Related Articles more
Comments