연습장
10. 웹 페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그 본문
https://poiemaweb.com/html5-tag-structure
HTML5 Tag - Structure | PoiemaWeb
웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그
poiemaweb.com
공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다.
그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE 8버전 이하에서는 작동하지 않기 때문에 주의가 필요하다.
header : 헤더를 의미한다
nav : 내비게이션을 의미한다
aside : 사이드에 위치하는 공간을 의미한다
section : 본문의 여러 내용을 포함하는 공간을 의미한다.
footer : 푸터를 의미한다.
위의 이미지? 처럼 만드려면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {padding: 0; margin: 10px; text-align: center; color : white; }
header {background-color: skyblue; height: 100px; line-height: 100px}
section {background-color: lightcoral; width: 60%; line-height: 100px;}
article {background-color: red; height: 250px; line-height: 250px; }
aside {background-color: pink; width: 40%; line-height: 400px;}
footer {background-color: gray; height: 100px; line-height: 100px}
main {display: flex; height: 400px; margin: 0px}
</style>
</head>
<body>
<header><h1>header</h1></header>
<main>
<section>
<h3>section</h3>
<article><p>article</p></article>
</section>
<aside><h3>aside</h3></aside>
</main>
<footer><h3>footer</h3></footer>
</body>
</html>
IE 8버전 이하에서는 작동하지 않기 때문에 주의가 필요하다.
3가지 해결 방법
1. CSS 로 시맨틱 태그를 block 속성으로 정의
인라인 요소로 인식하기 때문에 다음과 같이 block 요소로 설정
<style>
header, section, nav, article, aside, footer {
display: block;
}
</style>
2. JavaScript로 가상 태그 선언
3. html5shiv.js 라이브러리 사용
'HTML5' 카테고리의 다른 글
| 11. 브라우저 , 렌더링 , DOM (0) | 2024.06.25 |
|---|---|
| 9. 사용자와의 커뮤니케이션을 위한 폼 태그 (0) | 2024.06.24 |
| 8. 이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그 (0) | 2024.06.24 |
| 7. 목록(List)와 표(table) 형식 표현을 위한 태그 (1) | 2024.06.24 |
| 6. HTML의 핵심 개념인 Hyperlink (0) | 2024.06.24 |
'HTML5' Related Articles
more
