[시맨틱 태그]
<header>: 페이지나 색션의 머리말 표현
<nav>: 하이퍼링크들을 모아 놓은 특별한 섹션
<section>: 문서의 장 또는 절을 구성하는 역할
<article>: 본문과 연관 있지만 독립적 콘텐츠를 담는 영역
<aside>: 본문에서 약간 벗어난 노트나 팁
<footer>: 꼬리말 영역
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 문서 구조 시맨틱 태그 사용</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.header{
width: 100%;
height: 15% ;
background: yellow;
}
.nav{
width: 15%;
height: 70%;
float: left;
background: orange;
}
.section{
width: 70%;
height: 70%;
float: left;
background: olivedrab;
}
.aside{
width: 15%;
height: 70%;
float: left;
background: orange;
}
.footer{
width: 100%;
height: 15%;
clear: both;
background: plum;
}
</style>
</head>
<body>
<header class="header">header</header>
<nav class="nav" >nav</nav>
<section class="section">section</section>
<aside class="aside" >aside</aside>
<footer class="footer">footer</footer>
</body>
</html>
'GURU > PYTHON & HTML' 카테고리의 다른 글
| [HTML day 5: web form] 간단한 로그인 폼 만들기 (0) | 2022.01.19 |
|---|---|
| [HTML day 5: 시맨틱 태그] <details> 및 <summary> 태그 (0) | 2022.01.19 |
| [HTML day 4: 테이블 만들기] <table> (0) | 2022.01.18 |
| [HTML day 3:리스트 작성] <ol>,<ul>,<dl> (0) | 2022.01.14 |
| [HTML day 2] 특수문자, <pre>태그 연습 (0) | 2022.01.13 |