사이트를 만들기 전에 레이아웃을 익히는 것은 가장 기본입니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
앞으로 나오는 레이아웃 예제를 하나하나씩 따라하시면 결과물이 완성되는 것을 확인할 수 있고, 사이트를 어떻게 만드는지 감을 잡을 수 있는 첫 단계입니다.
기초부터 튼튼히!! 여러분의 열공을 응원합니다!!!
Code Youtube
사용 프로그램
∗ brackets - CLICK
∗ sublime - CLICK
∗ visualstudio - CLICK
- 에디터는 본인이 편한것으로 사용하시면 되고, 저는 이번 강의에서 브라켓을 사용하였습니다. -
Code example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout07</title>
<style>
/* 리셋 */
* {margin: 0; padding: 0;}
/* 전체 레이아웃 */
#wrap {font-size: 20px; color: #fff; text-align: center;}
#header {height: 140px;}
#banner {height: 450px; line-height: 450px; background: #4dd0e1;}
#contents {height: 950px;}
#footer {height: 220px;}
/* 레이아웃 */
#header-top {height: 70px; line-height: 70px; background: #b2ebf2;}
#header-nav {height: 70px; line-height: 70px; background: #80deea;}
#content1 {height: 90px; line-height: 90px; background-color: #26c6da;}
#content2 {height: 480px; line-height: 480px; background-color: #00bcd4}
#content3 {height: 380px; line-height: 380px; background-color: #00acc1;}
#footer-nav {height: 60px; line-height: 60px; background-color: #0097a7;}
#footer-info {height: 160px; line-height: 160px; background-color: #00838f;}
/* 컨테이너 */
.container {width: 1100px; margin: 0 auto; height: inherit; background: rgba(0,0,0,0.3);}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header-top">
<div class="container">header-top</div>
</div>
<div id="header-nav">
<div class="container">header-nav</div>
</div>
</div>
<!-- //header -->
<div id="banner">
<div class="container">banner</div>
</div>
<!-- banner -->
<div id="contents">
<div id="content1">
<div class="container">content1</div>
</div>
<div id="content2">
<div class="container">content2</div>
</div>
<div id="content3">
<div class="container">content3</div>
</div>
</div>
<!-- //contents -->
<div id="footer">
<div id="footer-nav">
<div class="container">footer-nav</div>
</div>
<div id="footer-info">
<div class="container">footer-info</div>
</div>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>
728x90
