아래 이미지 두개를 이용해서 깨지지 않는 라운드형 박스를 만들어 보겠습니다.
 |  |
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 의 이미지를 사용했기 때문에 그 이상 넘어가면 박스가 깨지겠지요.. 배경이미지가 쓸데없이 커지면 이또한 효율적이지 못하므로 디자인 하면서 적절한 사이즈를 예상해서 제작하면 됩니다.
no_break_box.zip소스파일 다운로드 받기
Comments
이런 건 td tr로밖에 안될 거라고 생각하고 있었는데...; div로도 되는군요;
div로 되는군요.(사실 잘 몰라요``^^) 샘플로 만들어 놓으신게 꼭 구글애드센스 같아요. 기획하고 있는 게 구글 애드센스하고도 관련이 있어서 눈에 확 띄네요..멋지당~~~
leezche 님이 만들어주신 스킨을 수정하여 잘 쓰고 있습니다. 일단 감사부터 드리고 싶고... ^^;
태그로도 이 정도 구현이 가능하군요. css쪽에 주목은 하고 있었지만
사실 이정도일 줄은 몰랐습니다. 스킨 수정을 위해 구조화된 스크립트를 보면서 혀를 내둘렀다죠. 저처럼 막적어 막눌러形과는 차원이 다르네요. 감탄했습니다.
와... 너무 멋진 팁이예요. 이런 방법도 있었군요^^
이렇게도 할수 있군요.
한 수 배워 갑니다 ^-^!
좋은 팁 감사합니다. 담아갈께요 ^^
담아 가겠습니다 ^^