www.youtube.com/watch?v=52TT7SLexxE&list=PL4UVBBIc6giL7ygRa-P7UExEKqZgx4t9K&ab_channel=Webstoryboy
기본구조
<!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>
#wrap {width:1000px;}
.header {width:1000px; height:100px; background: #111;}
.nav {width:1000px; height:100px; background: #222;}
.side {float:left; width:300px; height:600px; background: #333;}
.contents {float:left; width:700px; height:600px; background: #444;}
.footer {clear:both; width:1000px; height:100px; background: #555;}
//float:left로 인해 height값이 0이되는 것을 방지하고자 clear:both를 해준다.
</style>
</head>
<body>
<div id="wrap">
<div class="header"></div>
<div class="nav"></div>
<div class="side"></div>
<div class="contents"></div>
<div class="footer"></div>
</div>
</body>
</html>
html5로 넘어오면서 시맨틱 태그를 사용하면 된다. 단, 익스8 이하는 지원하지 않는다.
<!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>
#wrap {margin:0 auto; width:1000px;}
header {width:1000px; height:100px; background: #111;}
nav {width:1000px; height:100px; background: #222;}
aside {float:left; width:300px; height:600px; background: #333;}
section {float:left; width:700px; height:600px; background: #444;}
footer {clear:both; width:1000px; height:100px; background: #555;}
</style>
</head>
<body>
<div id="wrap">
<header></header>
<nav></nav>
<aside></aside>
<section></section>
<footer></footer>
</div>
</body>
</html>
댓글