article
독립적인 컨텐츠
header는 문서 또는 섹션의 헤더를 지정.
CSS · HTML
HTML5
혜원21
2019. 10. 17. 20:51
*
html5... 2014년에 나왔다는데 이제야... 최근에 나온 것처럼 공부하는 내가 싫다.
- <section> : 주제별로 컨텐츠를 그룹화.
- <article> : 독립적 컨텐츠. 웹 사이트에서 나머지 부분과 무관하게 읽을 수 있는 컨텐츠. 블로그 포스트, 신문 기사.
- <header> : 문서나 섹션의 헤더 지정.
- <footer> : 문서의 바닥 글. footer에는 주소 작성자, 저작권, 이용 약관, 연락처등의 정보를 쓴다.
- <nav> : 탐색 링크 집합. 주로 카테고리를 정의.
- <aside> : 문서내 사이드 컨텐츠를 정의.
- <firure> + <figcaption> : 이미지의 설명 추가.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 타이틀</title>
</head>
<body>
<div style="border: 1px solid #000; padding: 15px;">
<section>
<h1>section</h1>
<p>섹션은 주제별로 컨텐츠를 그룹화합니다.</p>
</section>
<section>
<h1>section2</h1>
<p>섹션은 주제별로 컨텐츠를 그룹화합니다.</p>
</section>
<nav>
<p>nav 탐색 링크 집합. 주로 카테고리를 정의.</p>
<a href="#">com</a>
<a href="#">blog</a>
<a href="#">game</a>
<a href="#">web</a>
</nav>
<aside>
<h2>aside</h2>
<p>문서내 사이드 컨텐츠를 정의</p>
</aside>
<article>
<header>
<h1>article</h1>
<p>독립적인 컨텐츠</p>
</header>
<p>header는 문서 또는 섹션의 헤더를 지정.</p>
</article>
<figure>
<img src="https://k.kakaocdn.net/dn/bWxK0o/btqy6dzYlXw/8VrWlJh4zcZXVFC94kTkOK/img.png">
<fieldset>이미지의 설명을 추가합니다.</fieldset>
</figure>
<footer>
<p>닐기 티스토리</p>
<p>연락처 - 02. 2222. 3333[보이스 피싱]</p>
</footer>
</div>
</body>
</html>
section
섹션은 주제별로 컨텐츠를 그룹화합니다.
section2
섹션은 주제별로 컨텐츠를 그룹화합니다.
