728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>대한은행</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap" class="clearfix">
<aside id="side">
<h1 class="logo">로고</h1>
<nav class="nav">메뉴</nav>
</aside>
<section id="content">
<section id="banner">
<h2>이미지슬라이드</h2>
</section>
<!-- //banner -->
<section id="contents" class="clearfix">
<div class="cont1"><h3>공지사항</h3></div>
<div class="cont2"><h3>갤러리</h3></div>
<div class="cont3"><h3>팝업</h3></div>
</section>
<!-- //contents -->
<footer id="footer" class="clearfix">
<div class="foot1"><h3>로고</h3></div>
<div class="foot2"><h3>하단메뉴</h3></div>
<div class="foot3"><h3>copyright</h3></div>
</footer>
<!-- //contents -->
</section>
</div>
</body>
</html>/* reset */
* {margin: 0; padding: 0;}
.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}
/* 레이아웃 */
#wrap {width: 1200px;margin: 0 auto;}
#side {float: left; width: 300px; height: 850px; background: #ddd;}
#content {float: left; width: 900px;height: 850px; background: #ccc;}
/* header */
#side .logo {width: 300px;height: 150px;background: #999;}
#side .nav {width: 300px; height: 700px;background: #888;}
/* banner */
#banner {widows: 900px; height: 450px; background: #777;}
/* contents */
#contents {}
#contents > div {float: left; width: 33.33333%; height: 300px; }
/*공통 적인 요소 */
#contents > div.cont1 {background: #666;}
#contents > div.cont2 {background: #555;}
#contents > div.cont3 {background: #444;}
/* 개별적인 요소 */
/* footer */
#footer {}
#footer .foot1 {float: left; width: 200px; height: 100px; background: #444;}
#footer .foot2 {float: left; width: 700px; height: 50px;background: #222;}
#footer .foot3 {float: left; width: 700px; height: 50px;background: #333;}'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| HTML 가로유형 예제2 (0) | 2022.02.23 |
|---|---|
| HTML 가로유형 예제 (0) | 2022.02.22 |
| HTML 기본 레이아웃 1 (0) | 2022.02.20 |
| [React] 메가박스 모바일 웹 화면 만들기 (0) | 2021.09.26 |
| 웹사이트 따라만들기 코딩일지#4 - 컨텐츠영역1 (0) | 2021.06.20 |
