테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

레이아웃을 이렇게 짜려면? 채택완료

따라하기 10년 전 조회 4,043
답변 3
목록

레이아웃을 이렇게 짜려면 CSS를 어떻게 하는것이 좋을까요?

#css #그누보드5 #영카트5
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
p
port
10년 전

</p><p><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> </p><p>
<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>​</p><p>

이렇게 구성하면 될 듯 합니다.

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

드 

</p><p><style type="text/css"></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>#wrap{width:100%;height:auto;}</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>#wrap .section01{width:33%;height:500px;float:left;background-color:green;}</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>#wrap .middelSectionWrap{width:33%;height:500px;float:left;}</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>#wrap .middelSectionWrap .section02{width:33%;height:250px;<span style="font-size: 13.3333330154419px; line-height: 1.5;">background-color:</span><span style="font-size: 10pt; line-height: 1.5;">​orange;</span><span style="font-size: 10pt; line-height: 1.5;">}</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>#wrap .middelSectionWrap .section03{width:33%;height:250px;<span style="font-size: 13.3333330154419px; line-height: 1.5;">background-color:</span><span style="font-size: 10pt; line-height: 1.5;">​red;</span><span style="font-size: 10pt; line-height: 1.5;">}</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>#wrap .section04{width:33%;height:500px;float:left;<span style="font-size: 13.3333330154419px; line-height: 1.5;">background-color:</span><span style="font-size: 10pt; line-height: 1.5;">​blue;</span><span style="font-size: 10pt; line-height: 1.5;">}</span></p><p></style></p><p><div id="wrap"></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="section01">1</div></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="middelSectionWrap"></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><div class="section02">2</div></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><div class="section03">3</div></p><p><span class="Apple-tab-span" style="white-space:pre">	</span></div></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="section04">4</div></p><p></div> </p><p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

지운아빠
지운아빠
10년 전

​일반적인 방법 2가지... 

입코딩이라 오류가 있을 수도...;;

공통스타일

 

 

공통마크업

 

1

 class="box"​>

   

2

   

3

 class="box"​>4
 

1. float 을 이용하는 방법

 

 

2. position:absolute 를 이용하는 방법

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인