티스토리 뷰
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layou07</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-color: #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; /*height: 100%;*/ background-color: 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>
'CSS > 사이트를 만들자' 카테고리의 다른 글
사이트를 만들자 - 레이아웃 6 (0) | 2022.02.03 |
---|---|
사이트를 만들자 - 레이아웃 5 (0) | 2022.02.03 |
사이트를 만들자 - 레이아웃4 (0) | 2022.02.03 |
사이트를 만들자 - 레이아웃3 (0) | 2022.02.03 |
사이트를 만들자 - 레이아웃2 (0) | 2022.02.03 |
댓글
© 2018 webstoryboy