728x90
반응형
섹션과 관련된 태그(Section Related Tag)
| 태그 | 의미 |
| <main> | · 문서의 주요 콘텐츠 영역을 설정합니다. |
| <section> | · 주제별 그룹의 콘텐츠 섹션을 설정합니다. |
| <article> | · 문서의 독립적인 컨텐츠 섹션을 설정합니다. |
| <aside> | · 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. |
| <header> | · 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다. |
| <nav> | · 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다. |
| <footer> | · 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다 |
| <address> | · 문서 관련 연락처 콘텐츠 섹션을 설정합니다. |
| <h1> ~ <h6> | · 각 섹션의 제목을 설정합니다. |
<main> 태그
- 문서의 주요 콘텐츠 영역을 설정합니다.
- 웹 문서의 핵심이 될 수 있는 내용을 포함한다.
- 문서에서 한 번만 사용이 가능합니다.
- 개념적 요소의 섹션보다는 영역을 표현하기 위한 태그입니다.
- 반복되는 영역(사이드 메뉴, 네비게이션 링크, 로고 영역, 검색 영역 등)은 포함할 수 없습니다.
- <article>, <aside>, <footer>, <header>, <nav> 요소 등의 자식 요소로 올 수 없습니다.
<section> 태그
- 주제별 그룹의 콘텐츠 섹션을 설정합니다.
- 주제별 제목 요소를 사용하는 것이 좋습니다.
- 식별할 수단이 필요하기 때문에 <h1> ~ <h6> 태그로 설정하는 것을 추천합니다.
- 문서의 스타일링 요소나, 그룹화 요소가 아닙니다.
- 스타일 지정 목적이나 그룹화가 필요하다면 <div> 태그를 사용합니다.
- 일반적인 영역의 주제가 아니라, 구체적인 주제의 요소를 나타내고 싶다면 <article>, <aside>, <nav> 태그를 사용하는 것이 더 적절합니다.
- <section> 요소 안에 <article> 요소를 쓸 수 있습니다.
<article> 태그
- 문서의 독립적인 콘텐츠 섹션을 설정합니다.
- 포럼, 신문기사, 잡지, 블로그 항목, 게시판 글 등 콘텐츠의 독립적인 항목을 나타낼 때 사용합니다.
- 독립적인 콘텐츠의 내용이 명시적으로 나열되어야 하고, 각각의 콘텐츠에 제목 <h1> ~ <h6> 태그를 표시해야 합니다.
- <article> 요소 안에 <section> 요소를쓸 수 있습니다.
<asdie> 태그
- 주요 콘텐츠의 보조적 콘텐츠 섹션을 설정합니다.
- 웹 페이지의 메인 콘텐와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다.
<header> 태그
- 문서의 소개 및 메뉴 그룹 콘텐츠 영역을 설정합니다.
- 제목, 로고, 검색, 아이콘, 저자 정보 등이 포함됩니다.
- 섹션 요소가 아니기 때문에 섹션의 의미로 사용하지 않습니다.
<nav> 태그
- 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
- 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.
- 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.
<footer> 태그
- 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다.
- 사이트와 관련된 정보, 저작권, 연락처, 사이트 맵, 관련된 문서 링크를 제공합니다.
- 연락처 정보를 설정하는 <address> 요소가 포함 될 수 있습니다.
<address> 태그
- 문서 관련 연락처 콘텐츠 영역을 설정합니다.
- 사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등을 표시합니다.
- 회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를 표시합니다.
- <header>, <article>, <footer>, <aside>등 연락처 정보가 필요한 곳에 사용할 수 있습니다.
- 연락처 정보 보다 더 광범위한 정보를 포함 할 수 없습니다.(시간을 나타내는 <time> 태그 등)
- 일반적으로 <footer> 영역에서 많이 사용합니다.
<h1> ~ <h6> 태그
- 각 섹션의 제목을 설정합니다.
- <h1> 태그는 가장 높은 단계의 제목이며, <h6> 태그는 가장 낮은 단계의 제목입니다.
- <h1>부터 <h6>까지 태그의 단계를 순차적으로 사용합니다. 단계를 건너뛰지 않습니다.
- 한 페이지에 <h1> 태그는 보통 한 번만 사용합니다.
- <h1>~<h6> 제목 별로 기본 폰트 크기가 다르고 단계별로 폰트 사이트와 굵기가 설정되어 있습니다.\
섹션과 관련된 태그 사용 예시
728x90
반응형
