아래 이미지 두개를 이용해서 깨지지 않는 라운드형 박스를 만들어 보겠습니다.
step01.
네 귀퉁이의 라운드를 표현하기 위한 마크업을 하겠습니다.
<div class="box_rt">
<div class="box_lt">
<div class="box_lb">
<div class="box_rb">
<h3>최근글 리스트</h3>
<ul>
<li>뜬금없는 광고 - 빨간중독...</li>
<li>이미지 메뉴탭 만들어 보기.</li>
<li>살아 돌아왔습니다..</li>
<li>burning eolin!.</li>
<li>골라먹는 떡볶이 소스 받아...</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box_lt">
<div class="box_lb">
<div class="box_rb">
<h3>최근글 리스트</h3>
<ul>
<li>뜬금없는 광고 - 빨간중독...</li>
<li>이미지 메뉴탭 만들어 보기.</li>
<li>살아 돌아왔습니다..</li>
<li>burning eolin!.</li>
<li>골라먹는 떡볶이 소스 받아...</li>
</ul>
</div>
</div>
</div>
</div>
step02.
라운드형 박스를 디자인해 보겠습니다.
.box_rt { background:url(round_right.gif) right top no-repeat; float:left;}
.box_lt { background:url(round_left.gif) left top no-repeat; padding:9px 0 0 0;}
.box_lb { background:url(round_left.gif) left bottom no-repeat; padding:0 0 0 9px;}
.box_rb { background:url(round_right.gif) right bottom no-repeat; padding:0 9px 9px 0;}
.box_lt { background:url(round_left.gif) left top no-repeat; padding:9px 0 0 0;}
.box_lb { background:url(round_left.gif) left bottom no-repeat; padding:0 0 0 9px;}
.box_rb { background:url(round_right.gif) right bottom no-repeat; padding:0 9px 9px 0;}
아래와같이 박스안의 내용이 늘어나거나 폰트사이즈가 커진다고 하더라도 박스가 깨지지 않습니다. .box_lb, .box_rb를 클래스명으로 사용하고 있는 레이어를, h3이나 ul로 대체 한다면쓸데 없는 레이어의 사용을 자제할 수 있습니다. (위의 마크업은 어디까지나 설명을 쉽게하기 위함이고 어떠한 상황에서도 응용이 가능하도록 하기 위함입니다.)
주의! 박스가 무한대로 커져도 깨지지 않는 것이 아니라 배경이미지 사이즈에 따라 달라 집니다. 여기서 사용한 이미지는 가로 세로 400px 의 이미지를 사용했기 때문에 그 이상 넘어가면 박스가 깨지겠지요.. 배경이미지가 쓸데없이 커지면 이또한 효율적이지 못하므로 디자인 하면서 적절한 사이즈를 예상해서 제작하면 됩니다.
'Web(웹) Study > HTML & CSS' 카테고리의 다른 글
IE 계열의 CSS 다중선택자 버그에 대해 (0) | 2008.06.27 |
---|---|
Print Different (0) | 2008.06.27 |
클릭을 좀더 편하게 - label (0) | 2008.06.13 |
CSS우선순위 (0) | 2008.03.29 |
css style 지정 순서 (0) | 2008.03.26 |