개발자 미니민의 개발스터디

[HTML] semantic 시멘틱 태그 (main, article, section, nav 등)

by mini_min

HTML

[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;
	
}

 

 

 

 

 

블로그의 프로필 사진

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기

티스토리툴바