[HTML] 구조 관련 요소 알아보기

HTML 구조 관련 요소

HTML 구조 관련 요소 중 블록 레벨 요소의 태그들에 대해 살펴보도록 하자.
이번 포스팅에서 살펴볼 태그명은 <header>, <section>, <footer>, <nav>, <article>, <aside> 총 6개이다.

요소 유형	태그명	태그의 의미 및 특징
블록 레벨 요소	<header> </header>	1. HTML 문서의 헤더 영역을 의하는 태그로 제목, 내비게이션, 검색 등의 내용 포함될 수 있음
		2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함 가능하지만 <header>, <footer> 태그는 포함 불가
	<section> </section>	1. HTML 문서에서 맥락이 동일한 요소들을 주제별로 그룹화하는 태그이며, 섹션 주제에 대한 제목 요소(<h2>~<h6>)를 포함할 것을 권장
		2. 텍스트, 인라인 요소, 블록 레벨 요소가 포함될 수 있음
	<footer> </footer>	1. HTML 문서의 푸터 영역을 의미하며 섹션 작성자나 저작권에 대한 정보, 관련 문서 링크 포함될 수 있음
		2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함 가능하지만 <header>, <footer> 태그는 포함 불가
	<nav> </nav>	1. HTML 문서의 메인 메뉴, 목차 등을 정의해주는 태그
		2. 텍스트, 인라인 요소, 블록 레벨 요소가 포함될 수 있음
	<article> </article>	1. HTML 문서 내에서 독립적으로 배포 또는 재사용 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하며 제목 요소(<h2>~<h6>)를 포함할 것을 권장
		2. 텍스트, 인라인 요소, 블록 레벨 요소가 포함될 수 있음
	<aside> </aside>	1. 메인 콘텐츠와 직접적으로 관련 없는 영역을 의미하는 태그, HTML 문서의 우측이나 좌측의 사이드 메뉴나 광고 영역 등으로 사용됨
		2. 텍스트, 인라인 요소, 블록 레벨 요소가 포함될 수 있음

예시 레이아웃

Figma에서 만든 예시 레이아웃을 구조 태그를 이용하여 코딩해보도록 하자.

HTML/CSS 코드

결과물