“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
✌ <section> 과 관련된 태그는
어떤 것이 있는 지 함께 알아볼까요 ?
<section> 이란 무엇인가
✨ HTML에서 <section> 태그는 웹 문서에서 특정 섹션을 정의하는 데 사용됩니다.
이 태그는 문서를 의미 단위로 분할하고, 각 섹션에 대한 제목과 내용을 구성할 때 유용합니다.
| <main> | · 문서의 주요 콘텐츠 영역을 설정합니다. |
| <section> | · 주제별 그룹의 콘텐츠 섹션을 설정합니다. |
| <article> | · 문서의 독립적인 컨텐츠 섹션을 설정합니다. |
| <aside> | · 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. |
| <header> | · 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다. |
| <nav> | · 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다. |
| <footer> | · 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다 |
| <address> | · 문서 관련 연락처 콘텐츠 섹션을 설정합니다. |
| <h1> ~ <h6> | · 각 섹션의 제목을 설정합니다. |
👇🏻 아래 이미지를 보시면 조금 더 이해하기 쉽습니다.
각 태그들의 정의와 특징
✍🏻 <body>✍🏻
<body> 태그는 사이트 본문에 해당하는 모든 콘텐츠를 포함하는 섹션을 설정합니다.
본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이뤄지고
브라우저가 렌더링해야 할 범위를 알려줍니다.
✍🏻 <nav>✍🏻
<nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
✍🏻 <section>✍🏻
<section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
section 태그는 일반적으로 article 태그 내에 사용됩니다.
✍🏻 <article>✍🏻
<article> 태그는 문서, 게시물, 뉴스 기사, 블로그 포스트 등과 같이 독립적인 내용을 가지고 있는
영역을 정의할 때 사용됩니다.
각각의 <article>은 여러 개의 <section>으로 구성될 수 있습니다.
✍🏻 <aside>✍🏻
<aside> 태그는 주요 콘텐츠의 보조적 콘텐츠 섹션을 설정합니다.
HTMl 문서의 오른쪽이나 왼쪽의 상시드 메뉴나 광고등의 영역으로 사용됩니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
✍🏻 <footer>✍🏻
<footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>, <footer> 태그는 포함할 수 없습니다.
여기서 알 수 있는
✔ <nav>, <article> ,<aside> ,<footer> 공통점 !
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있다 !
✨ 감사합니다.
'HTML' 카테고리의 다른 글
| 움직이는 귀여운 강아지를 넣어 만든 퀴즈 사이트 (16) | 2023.03.08 |
|---|---|
| 내 스타일대로 만드는 카드 유형 페이지 (16) | 2023.03.07 |
| 텍스트 관련 요소 (14) | 2023.02.17 |
| 시멘틱 마크업, 논리적인 순서 마크업 (16) | 2023.02.17 |
| 인라인 구조, 블록구조 ? (12) | 2023.02.17 |