[HTML] semantic 시멘틱 태그 (main, article, section, nav 등)
by mini_min[HTML]
semantic 시멘틱 태그 (main, article, section, nav 등)
✔️ semantic 시멘틱 태그
: 문서의 구조와 데이터의 의미를 보다 명확히 하기 위한 태그이다.
: 검색 엔진 및 문서 해석기 등에서 웹 문서 판별이 정확하고 용이해지며, HTML 5 부터 추가되었다고 한다.
: 그동안 태그들은 해당 태그를 배우지 않으면 의미를 알지 못했는데, 태그를 보고도 한 눈에 무엇을 하는 태그인지 알아볼 수 있게 만든 태그가 시멘틱 태그다.
📓 시멘틱 관련 태그
<main> , <section>, <article>, <aside>, <header> , <footer> , <address> 등
- 위와 같이 HTML 5 에서는 사용자에게 명확한 문서 윤곽을 정해준다!
✔️ semantic 시멘틱 태그 요소
<header>
: 머릿말 태그, 소개, 또는 문서에 대한 탐색 요소의 그룹을 지정한다.
<nav>
: 네비게이션. 외부 페이지로 연결되는 링크 모음이다.
<menu>
: 페이지 내 기능을 하는 버튼/링크의 모음을 나타낸다.
: 기본 값은 list 이다. context , toolbar 도 있음
<aside>
: 섹션의 내용과 관련 없지는 않지만 분리되어도 문제없는 섹션이다. 주로 사이드바 형태로 표현된다.
: 본문과 별도로 추가 언급을 할 때 사용한다.
<main>
: 해당 문서의 <body> 요소의 주 콘텐츠를 정의할 때 사용한다.
❌ 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안된다.
: 하나의 문서에는 단 하나의 <main>만이 존재한다.
❌ 다른 요소들의 자손 요소가 되어서는 안된다.
<section>
: 문서 내에서 같은 의미의 구역을 나눌 때 사용한다.
: 신문 기사와 같은 배포형은 <article>을 사용한다.
<article>
: 문서 내의 독립적인 글, 블로그 글이나 뉴스 본문 등을 구성하는 섹션이다.
: <header> 와 <footer> 가 안에서 구성될 수 있으며, 여러번 <article>이 반복되어도 상관없다.
<footer>
: 페이지 하단부의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분이다.
header, main, footer {
width: 1100px; margin: 0 auto;
}
header {
background: #d4f4fa; margin-top: 30px; padding: 20px; text-align: center; font-weight: 600;
}
nav {
text-align: center; font-weight: 600;
border: 1px solid #777;
padding: 30px;
}
💡 블록 태그는 width 를 지정하지 않으면 부모 width 적용됨
main {
background: #eaeaea;
min-height: 500px;
padding: 20px;
}
/* main > article : main 자식 태그(1세대. 1단계)인 article */
/* main article : main 자손 태그인 article */
main article {
background: #fff;
margin-top: 10px;
padding: 20px;
}
main aside {
border: 1px solid #333;
padding: 20px;
margin-top: 10px;
height: 140px;
}
💡 main > article : main 자식 태그(1세대. 1단계)인 article
main article : main 자손 태그인 article
💡 > <- 이거 하나로 의미가 달라질 수 있다.
footer {
background: #ffebff;
padding: 20px;
margin-bottom: 10px;
}
footer > p {
padding: 30px;
text-align: center;
}
'HTML' 카테고리의 다른 글
| [HTML] table 태그로 성적표 만들기 (0) | 2022.09.08 |
|---|---|
| [HTML] table 태그 (colspan / rowspan / border-collapse) (0) | 2022.09.08 |
| [HTML] vertical-align 태그 (0) | 2022.09.08 |
| [HTML] inline 인라인 태그 <span> / display 속성 (0) | 2022.09.08 |
| [HTML] <div> - float 속성 / clear 속성 / div 폭 계산 / box-sizing (0) | 2022.09.08 |
블로그의 정보
개발자 미니민의 개발로그
mini_min