사이트를 만들기 전에 레이아웃을 익히는 것은 가장 기본입니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
앞으로 나오는 레이아웃 예제를 하나하나씩 따라하시면 결과물이 완성되는 것을 확인할 수 있고, 사이트를 어떻게 만드는지 감을 잡을 수 있는 첫 단계입니다.
기초부터 튼튼히!! 여러분의 열공을 응원합니다!!!
Code Youtube
사용 프로그램
∗ brackets - CLICK
∗ sublime - CLICK
∗ visualstudio - CLICK
- 에디터는 본인이 편한것으로 사용하시면 되고, 저는 이번 강의에서 브라켓을 사용하였습니다. -
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout05</title>
<style>
* {margin: 0; padding: 0;}
#wrap {width: 100%; color: #fff; font-size: 30px; text-align: center; text-transform: uppercase;}
#header-wrap {width: 100%; background-color: #8d6e63; }
#banner-wrap {width: 100%; background-color: #a1887f;}
#content-wrap {width: 100%; background-color: #bcaaa4;}
#footer-wrap {width: 100%; background-color: #d7ccc8;}
.header-container {width: 1000px; margin: 0 auto; height: 100px; line-height: 100px; background-color: #3e2723;}
.banner-container {width: 1000px; margin: 0 auto; height: 300px; line-height: 300px; background-color: #4e342e;}
.content-container {width: 1000px; margin: 0 auto; height: 500px; line-height: 500px; background-color: #5d4037;}
.footer-container {width: 1000px; margin: 0 auto; height: 100px; line-height: 100px; background-color: #6d4c41;}
</style>
</head>
<body>
<div id="wrap">
<div id="header-wrap">
<div class="header-container">header</div>
</div>
<div id="banner-wrap">
<div class="banner-container">banner</div>
</div>
<div id="content-wrap">
<div class="content-container">content</div>
</div>
<div id="footer-wrap">
<div class="footer-container">footer</div>
</div>
</div>
</body>
</html>
728x90
