[HTML] HTML 기본구조와 구조화

TOC

• HTML
  • Open Graph Protocol
  • DOM 트리
  • 요소(Element)
  • 속성(Attribute)
  • 시맨틱 태그(Sementic Tag)
• HTML 문서 구조화
  • 그룹 컨텐츠
  • 같은 의미 다른 기능?

HTML

Open Graph Protocol

• 메타 데이터를 표현하는 새로운 규약
• HTML 문서의 head 태그 내의 meta 태그의 메타 데이터를 통해 문서의 정보 전달
• 메타 정보에 해당하는 제목, 설명 등을 쓸 수 있도록 정의

DOM 트리

• Document Object Model
• HTML 문서에 대한 모델을 구성
• HTML 문서 내의 각 요소에 접근 / 수정에 필요한 프로퍼티와 메서드 제공

요소(Element)

• HTML 요소는 시작태그/내용(content)/종료태그 로 구성
• 내용이 없는 태그들 : br, hr, img, input, link, meta
• 여는 태그와 닫는 태그 쌍이 불완전하면 오류를 반환하는 것이 아니라, 레이아웃이 깨진 상태로 출력
• 디버깅이 힘들어지기 때문에 잘 확인하자.

속성(Attribute)

• 태그에 부가적인 정보 설정
• 속성명과 속성값으로 이루어져 있다
• 요소는 속성을 가질 때, 경로나 크기와 같은 추가적인 정보 제공
• 요소의 시작 태그에 작성
• 태그와 상관 없이 사용 가능한 속성(HTML Global Attribute)이 있다

<!-- 모든 HTML 요소가 공통으로 사용할 수 있는 대표적인 속성
     몇몇 요소에는 아무 효과가 없을 수도 있다                 -->


<< 흔한 애들 >>
id, class, style


<< 생소한 애들 >>
data-* : 페이지에 개인 사용자 정의 데이터를 저장하기 위해 사용
title : 요소에 대한 추가 정보 지정
tabindex : 요소의 탭 순서

시맨틱 태그(Sementic Tag)

• HTML5에서 의미론적 요소를 담은 태그 등장
• 기존 영역을 의미하는 div 태그를 대체하여 사용
• div 태그의 남용을 방지해 가독성에 도움을 준다.

- header : 문서 전체나 섹션의 헤더(머릿말 부분)
- nav : 내비게이션
- aside : 사이드에 위치한 공간, 메인 컨텐츠와 관련성이 적은 콘텐츠
- section : 문서의 일반적인 구분, 컨텐츠의 그룹을 표현
- article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역
- footer : 문서 전체나 섹션의 마지막 부분

- h1, table 태그들도 시맨틱 태그로 볼 수 있다.
- 구역을 나누는 것 뿐만 아니라 '의미'를 가지는 태그들을 활용하기 위함
- 요소의 의미가 명확해지기 때문에 가독성을 높이고 유지보수 용이
- 검색엔진 등에 의미 있는 정보의 그룹을 태그로 표현
- SEO(검색엔진 최적화)를 위해서 meta, sementic tag 마크업을 효과적으로 활용하기

HTML 문서 구조화

그룹 컨텐츠

<p></p>
: 문단(paragraph)
<hr />
: 수평선(horizontal rule)
<pre></pre>
: HTML에 작성한 내용 그대로 표현, 고정폭 글꼴 사용, 공백 문자 유지
<blockquote>: 텍스트가 긴 인용문, 주로 들여쓰기를 한 것으로 표현</blockquote>

같은 의미 다른 기능?

b : 굵은 글씨 요소 strong : 굵은 글씨 표현, 특별히 강조하고자 하는 요소 i :
기울임 글씨 요소 em : 기울임 글씨 표현, 특별히 강조하고자 하는 요소