깨지지 않는 라운드 박스 만들기...

아래 이미지 두개를 이용해서 깨지지 않는 라운드형 박스를 만들어 보겠습니다.

일단 원리는 이렇습니다.

라운드되어 있는 네 귀퉁이를 표현하기 위해서는 위 그림과 같이 네개의 엘리먼트가 필요합니다. 설명을 쉽게 하게 위해 일일이 네번의 마크업을 추가했습니다. 쓸데 없는 레이어를 줄이기 위해 상자안의 내용에 들어가는 엘리먼트를 응용해도 되겠지요.. 예를 들면 <a>태그나 <ul>태그 같은...

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>

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_lb, .box_rb를 클래스명으로 사용하고 있는 레이어를, h3이나 ul로 대체 한다면쓸데 없는 레이어의 사용을 자제할 수 있습니다. (위의 마크업은 어디까지나 설명을 쉽게하기 위함이고 어떠한 상황에서도 응용이 가능하도록 하기 위함입니다.)

주의! 박스가 무한대로 커져도 깨지지 않는 것이 아니라 배경이미지 사이즈에 따라 달라 집니다. 여기서 사용한 이미지는 가로 세로 400px 의 이미지를 사용했기 때문에 그 이상 넘어가면 박스가 깨지겠지요.. 배경이미지가 쓸데없이 커지면 이또한 효율적이지 못하므로 디자인 하면서 적절한 사이즈를 예상해서 제작하면 됩니다.

invalid-file