FrontEnd/HTML
레이아웃(layout) 연습
H_Develop
2022. 6. 24. 08:26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin : 0; padding : 0; box-sizing : border-box; text-align : center; }
.box { width : 1130px; margin : 0 auto; border : solid 3px blue; }
header { height : 150px; border : solid 3px red; }
#main { width : 745px; height : 400px; float : left; border : solid 3px red; }
aside { width : 340px; height : 400px; float : right; border : solid 3px red; }
footer { clear : both; height : 150px; border : solid 3px red; }
</style>
</head>
<body>
<header>
<div class="box">
<div id="logo">
로고 & 검색
</div>
</div>
<div class="box">
<nav id="main_menu">
메인 메뉴
</nav>
</div>
</header>
<section>
<div class="box">
<div id="main">
메인
</div>
<aside>
사이드바
</aside>
</div>
</section>
<footer>
<div class="box">
푸터
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin : 0; padding : 0; box-sizing : border-box; text-align : center; }
.box { width : 980px; margin : 0 auto; border : solid 3px blue; }
header { height : 40px; border : solid 3px red; }
header #left_menu { float : left; border : solid 3px red; }
header #right_menu { float : right; border : solid 3px red; }
section #main_image { height : 150px; border : solid 3px red; }
section #product_list { height : 250px; border : solid 3px red; }
footer #footer1 { clear : both; height : 80px; border : solid 3px red; }
footer #footer2 { height : 80px; border : solid 3px red; }
footer #footer3 { height : 80px; border : solid 3px red; }
</style>
</head>
<body>
<header>
<div class="box">
<nav id="left_menu">
좌측 메뉴
</nav>
<nav id="right_menu">
우측 메뉴
</nav>
</div>
</header>
<section>
<div class="box">
<div id="main_image">
메인 이미지
</div>
<div id="product_list">
상품 리스트
</div>
</div>
</section>
<footer>
<div id="footer1">
<div class="box">
푸터1
</div>
</div>
<div id="footer2">
<div class="box">
푸터2
</div>
</div>
<div id="footer3">
<div class="box">
푸터3
</div>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin : 0; padding : 0; box-sizing : border-box; text-align : center; }
li { list-style-type : none; }
.box { width : 1000px; margin : 0 auto; border : solid 3px blue; }
header { height : 100px; border : solid 3px red; }
header #top { height : 30px; border : solid 3px red; }
header #top_menu { float : right; border : solid 3px red; }
section #main_image { width : 750px; height : 200px; float : left;
margin-top : 50px; border : solid 3px red; }
section aside { width : 230px; height : 200px; float : right; margin-top : 50px
border : solid 3px red; }
#main { clear : both; }
#main li { margin-top : 20px; display : inline-block; }
#main .item1 { width : 206px; height : 250px; border : solid 3px red; }
#main .item2 { width : 250px; height : 250px; margin-left : 8px;
border : solid 3px red; }
footer { height : 100px; margin-top : 50px; border : solid 3px red; }
footer #footer2 { float : right; border : solid 3px red; }
</style>
</head>
<body>
<header>
<nav id="top">
<div class="box">
<nav id="top_menu" >
상단 메뉴
</nav>
</div>
</nav>
<div class="box">
<nav id="main_menu" >
로고 & 메인 메뉴 & 검색
</nav>
</div>
</nav>
</header>
<section>
<div class="box">
<div id="main_image">
메인 이미지
</div>
<aside>
사이드바
</aside>
<div id="main">
<ul>
<li class="item1">항목1</li>
<li class="item2">항목2</li>
<li class="item2">항목3</li>
<li class="item2">항목4</li>
</ul>
</div>
</div>
</section>
<footer>
<div class="box">
<div id="footer1">
푸터1
</div>
<div id="footer2">
푸터2
</div>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* { margin : 0; padding : 0; box-sizing : border-box; }
li { list-style-type : none; }
section { height : 180px; background-color : #eeeeee; }
.box { width : 1000px; margin : 0 auto; /* border : solid 3px red; */ }
#news { width : 475px; float : left; padding-top : 30px; }
#event { width : 475px; float : right; padding-top : 30px; }
section .title { float : left; }
section .list { float : left; margin-left : 10px; }
section .item li { display : inline-block; margin-left : 40px;
margin-bottom : 10px; }
</style>
</head>
<body>
<section>
<div class="box">
<div id="news">
<div class="title">
<h3>새소식</h3>
<span>더보기 ></span>
</div>
<ul class="list">
<li>
<ul class="item">
<li>[공지] 인터넷 뱅킹 점검 안내</li>
<li>2022.09.03</li>
</ul>
</li>
<li>
<ul class="item">
<li>[공지] 인터넷 뱅킹 점검 안내</li>
<li>2022.09.03</li>
</ul>
</li>
<li>
<ul class="item">
<li>[공지] 인터넷 뱅킹 점검 안내</li>
<li>2022.09.03</li>
</ul>
</li>
</ul>
</div>
<div id="event">
<div class="title">
<h3>이벤트</h3>
<span>더보기 ></span>
</div>
<ul class="list">
<li>
<ul class="item">
<li>오픈 뱅킹 신청하고 시원한 혜택 받으세요!</li>
</ul>
</li>
<li>
<ul class="item">
<li>오픈 뱅킹 신청하고 시원한 혜택 받으세요!</li>
</ul>
</li>
<li>
<ul class="item">
<li>오픈 뱅킹 신청하고 시원한 혜택 받으세요!</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>