Layout(레이아웃) 구성
- header : 머리말 (페이지 제목, 페이지 소개)
- nav : 탐색 링크 정의
- section : 문서의 장이나 절에 해당
- article : 본문과 독립적인 콘텐츠 영역
- aside : 본문 이외의 content를 정의
- footer : 꼬리말 (저자, 저작권 정보)
실제 레이아웃 구성 화면
더보기
<!DOCTYPE html>
<html lang="ko">
<header>
<meta charset="uft-8">
<title>Layout(레이아웃) 기본구성</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; } <!-- 공백 제거 -->
#frame{
background-color: white;
width: 1000px;
height: 900px;
margin: 0 auto;
font-size: 20px;
text-align: center;
}
#header_style{
background-color: skyblue;
width: 1000px;
height: 100px;
}
#nave_style{
background-color: silver;
width: 1000px;
height: 100px;
}
#side_left{
background-color: yellowgreen;
width: 300px;
height: 600px;
float: left;
}
#section_style{
background-color: white;
width: 400px;
height: 600px;
float: left;
}
#side_right{
background-color: yellowgreen;
width: 300px;
height: 600px;
float: left;
}
#footer_style{
background-color: yellow;
width: 1000px;
height: 100px;
clear: both;
}
</style>
</header>
<body>
<div id="frame">
<div id ="header_style">
<h2>header</h2>
</div>
<div id ="nave_style">
<h2>NAV</h2>
</div>
<div id="side_left">
<h2>left side</h2>
</div>
<div id ="section_style">
<h2>section</h2>
</div>
<div id="side_right">
<h2>right side</h2>
</div>
<div id ="footer_style">
<h2>footer</h2>
</div>
</div>
</body>
</html>
'Coding > HTML & CSS' 카테고리의 다른 글
| [CSS] selector (0) | 2022.05.02 |
|---|---|
| [CSS] CSS란? (0) | 2022.02.08 |
| [HTML] TAG(태그) (0) | 2021.05.28 |
| [HTML] HTML 이란? (0) | 2021.05.27 |