반응형 웹 실전 프로젝트 #10 (구조 관련 요소)
HTML, CSS 2020. 7. 17. 14:46반응형
<header>, <section>, <footer>, <nav>, <article>, <aside>
| 요소유형 | 태그명 | 의미 및 특징 |
| 블록레벨요소 | <header></header> | HTML문서의 헤더영역을 의미 |
| 제목이나 내비게이션, 검색등의 내용을 포함 | ||
| 텍스트, 인라인 요소, 블록요소를 포함할수 있지만 <header>, <footer>태그는 포함할수 없음 | ||
| <section></section> | HTML문서에서 맥락이 같은 요소들을 주제별로 그룹화 해주는 태그 | |
| 섹션 주제에 대한 제목 요소 <h2> ~ <h6>를 포함 하는것이 좋음 | ||
| <footer></footer> | HTML문서의 푸터영역을 의미 | |
| 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할수 있음 | ||
| <nav></nav> | HTML문서의 메인 메뉴나 목차등을 정의 해주는 태그 | |
| 텍스트, 인라인, 블록레벨 요소를 포함 할수 있음 | ||
| <article></article> | HTML문서내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스기사, 블로그 포스팅등을 의미하는 태그이며 제목요소 <h2> ~ <h6>를 포함하는것이 좋음 | |
| 텍스트, 인라인요소, 블록레벨요소를 포함 할수 있음 | ||
| <aside></aside> | 메인 컨텐츠와 직접적으로 관련이 없는 영역의 의미 | |
| HTML문서의 오른쪽이나 왼쪽 사이드 메뉴나 광고등의 영역으로 사용됨 | ||
| 텍스트, 인라인, 블록레벨 요소를 포함 할수 있음 |
구조 태그들을 이용해서 마크업 해보자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구조요소</title>
</head>
<body>
<header>
<h1><a href="#">반응형웹</a></h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
</ul>
</nav>
</header>
<div id="container">
<section>
<h2>컨텐츠 그룹 1</h2>
</section>
<section>
<h2>컨텐츠 그룹 2</h2>
</section>
<section>
<h2>주요기사</h2>
</section>
<aside>광고</aside>
</div>
<footer>
<address>경기도 부천시 오정구 삼정도 032)678-5606 hong@naver.com</address>
<p>COPYRIGHT © All rights reserved.</p>
</footer>
</body>
</html>
|
cs |
반응형
'HTML, CSS' 카테고리의 다른 글
| 반응형 웹 실전 프로젝트 #12 ~ #13 (CSS 기본문법 + 선택자) (0) | 2020.07.23 |
|---|---|
| 반응형 웹 실전 프로젝트 #11 (미디어 요소) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #9 (그룹요소) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #8 (폼 관련요소 및 속성) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #7 (표관련요소 및 속성) (0) | 2020.07.17 |