728x90
html은 웹페이지를 만드는데 사용되는 표준언어로 태그와 속성을 사용하여 웹 페이지 구조와 내용을 나타낸다.
가장 기본적인 큰 틀은 <html> <head> <body>
△ 아래 표는 각 구조에관한 세부내용이다.
<header>, <section>, <footer>, <nav>, <article>, <aside>
| 요소 유형 | 태그명 | 태그의 의미 및 특징 |
| 블록 레벨 요소 |
<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. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있다. |
△보충설명
▶ <section>요소를 일반 컨테이너로 사용하지 않는다. 특히 단순한 스타일링이 목적이라면 <div>요소를 사용해야 한다. 보통 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <section>을 선택한다
▶HTML <main> 요소는 문서 <body>의 주요 콘텐츠를 나타낸다.
주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다. body영역에서 하나만 사용이 가능하며<main>요소는 인터넷익스플로어에는 지원하지 않는다.
▶ <nav>요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다