레이아웃을 이렇게 짜려면?
본문
레이아웃을 이렇게 짜려면 CSS를 어떻게 하는것이 좋을까요?
답변 3
<style>
div#wrapper {
width:600px;
margin:auto;
}
div#div1 {
float:left;
width:200px;
height:400px;
background:#F00;
}
div#div2 {
float:left;
width:200px;
height:400px;
}
div#div2_1 {
float:left;
width:200px;
height:200px;
background:#FF0;
}
div#div2_2 {
float:left;
width:200px;
height:200px;
background:#0F0;
}
div#div4 {
float:left;
width:200px;
height:400px;
background:#00F;
}
</style>
<div id="wrapper">
<div id="div1"></div>
<div id="div2">
<div id="div2_1"></div>
<div id="div2_2"></div>
</div>
<div id="div4"></div>
</div>
이렇게 구성하면 될 듯 합니다.
일반적인 방법 2가지...
입코딩이라 오류가 있을 수도...;;
공통스타일
<style>
.box {width:150px;height:300px}
.box-box {width:150px;height:150px}
#box1 {background:#8EC641}
#box2-1 {background:#f8931f}
#box2-2 {background:#ef3236}
#box3 {background:#55a8de}
</style>
공통마크업
<div id="wrap">
<div id="box1" class="box">1</div>
<div id="box2" class="box">
<div id="box2-1" class="box-box">2</div>
<div id="box2-2" class="box-box">3</div>
</div>
<div id="box3" class="box">4</div>
</div>
1. float 을 이용하는 방법
<style>
#wrap:after {display:block;visibility:hidden;clear:both;content:""}
.box {float:left}
</style>
2. position:absolute 를 이용하는 방법
<style>
#wrap {height:300px}
.box {position:absolute;top:0}
#box1 {left:0}
#box2 {left:150px}
#box3 {left:300px}
</style>
<style type="text/css">
#wrap{width:100%;height:auto;}
#wrap .section01{width:33%;height:500px;float:left;background-color:green;}
#wrap .middelSectionWrap{width:33%;height:500px;float:left;}
#wrap .middelSectionWrap .section02{width:33%;height:250px;background-color:orange;}
#wrap .middelSectionWrap .section03{width:33%;height:250px;background-color:red;}
#wrap .section04{width:33%;height:500px;float:left;background-color:blue;}
</style>
<div id="wrap">
<div class="section01">1</div>
<div class="middelSectionWrap">
<div class="section02">2</div>
<div class="section03">3</div>
</div>
<div class="section04">4</div>
</div>
