HTML5 - 구조적 마크업 이해! HTML5의 섹션 요소
| 공부 환경 | |
| -혼자 간단하게 웹 페이지를 만들어 보고 싶어서 시작 -퇴근 후 짬짬히 -느리지만 꾸준하게 할 예정 |
HTML 은 마크업 언어
- 구조적 마크업
문서 구조 정의
컨텐츠의 의미, 역할 정의
컨텐츠 종속 관계 생성 - 표현적 마크업
문서 레이아웃, 외형 정의
컨텐츠 디자인
웹 초창기
하나의 HTML 파일에 웹 페이지의 모든 것이 정의됨. 😓..
웹 접근성 저해와 높은 유지보수 비용을 발생시킴.
-> 컨텐츠의 구조와 표현 정의를 구분하여 용도에 맞게 사용해야 함!
HTML : 문서 구조만 정의
CSS : 문서 레이아웃과 디자인 정의
HTML5 요소
- 블록 레벨 요소 : 줄 바꿈 일어나는 단락
ex) 제목, 문단, 인용문
블록 레벨 요소는 요소 내 블록 레벨 요소 또는 인라인 레벨 요소 포함 가능 - 인라인 레벨 요소 : 줄 바꿈의 일어나지 않는 행의 일부 요소
강조, 링크, 이미지
요소 내 인라인 레벨 요소 포함 가능. 블록 레벨 요소 포함 X
HTML5의 섹션 요소
-독립적 컨텐츠 단위, 구역
-의미가 연결되는 컨텐츠 집합
HTML5 이전에는~
-> div 요소에 id, class 속성 적용하여 섹션 분리하여 사용하였으나
HTML5 에서는!
-> 자주 사용하는 섹션을 추려 새로운 요소로 등장시킴
요소가 section 요소인지 여부에 따라 문서 구조가 달라짐.
<section>
문서 영역 지정하는 레이아웃 생성. 보통 제목으로 시작하는 컨텐츠의 의미적 그룹.
단순 프로그래밍을 위한 분리에는 사용하지 않음
<nav>
내비게이션 링크로 구성되는 섹션
<article>
독립적인 내용으로 배포 혹은 재사용 가능한 섹션
제목, header, footer, section 요소를 포함함
<aside>
일반적으로 사이드 바 형태로 표현하여 문서의 주요 컨텐츠와 별개의 영역으로 정의
<header>
페이지의 제목, 소개, 내비게이션 등이 포함
섹션 요소가 아니므로 새로운 섹션을 의미하지 않음.
<footer>
가장 가까운 조상 요소의 footer. 일반적으로 연관 문서에 대한 정보를 담음(작성자, 저작권 정보 등)
header와 같이 섹션 요소가 아니므로 새로운 섹션을 의미하지 않음.
<hgroup>
섹션의 제목 그룹
h1~h6 까지 존재. h1(가장 높음) -> h6(가장 낮음)
포함하는 헤딩 요소의 가장 높은 등급이 hgroup의 등급이 됨
ex)
<hgroup>
<h1> h1이 가장 높은 등급이므로 hgroup 등급 = h1 </h1>
<h2> h2는 서브 타이틀 생성 역할만! 섹션 생성X</h2>
</hgroup>
<address>
가장 가까운 조상 요소인 article 또는 body 요소의 연락처 정보 의미
-가장 가까운 조상 요소에 한정!
내용은 모두 개인 공부 기록 용이기에 부족한 부분이나 내용상 오류가 있을 수도 있습니다.
참고용으로 보시기 바랍니다.
혹 잘못된 내용이 있을 시 댓글 남겨주시면 수정하도록 하겠습니다.