사이트를 만들기 전에 레이아웃을 익히는 것은 가장 기본입니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
앞으로 나오는 레이아웃 예제를 하나하나씩 따라하시면 결과물이 완성되는 것을 확인할 수 있고, 사이트를 어떻게 만드는지 감을 잡을 수 있는 첫 단계입니다.
기초부터 튼튼히!! 여러분의 열공을 응원합니다!!!
Code Youtube
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout06</title>
<style>
* {margin: 0; padding: 0;}
#wrap {text-align: center; font-size: 30px; color: #fff;}
#header {height: 140px; line-height: 140px; background: #ffe1e4;}
#banner {height: 450px; line-height: 450px; background: #fbd6e3;}
#content {height: 950px; line-height: 950px; background: #ead5ee;}
#footer {height: 220px; line-height: 220px; background: #d6ebfd;}
.contaniner {width: 1100px; margin: 0 auto; height: inherit; background: rgba(0,0,0,0.3);}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="contaniner">header</div>
</div>
<div id="banner">
<div class="contaniner">banner</div>
</div>
<div id="content">
<div class="contaniner">content</div>
</div>
<div id="footer">
<div class="contaniner">footer</div>
</div>
</div>
</body>
</html>
728x90
