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

사용자 삽입 이미지
사용자 삽입 이미지
일단 원리는 이렇습니다.
사용자 삽입 이미지
라운드되어 있는 네 귀퉁이를 표현하기 위해서는 위 그림과 같이 네개의 엘리먼트가 필요합니다. 설명을 쉽게 하게 위해 일일이 네번의 마크업을 추가했습니다. 쓸데 없는 레이어를 줄이기 위해 상자안의 내용에 들어가는 엘리먼트를 응용해도 되겠지요.. 예를 들면 <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 의 이미지를 사용했기 때문에 그 이상 넘어가면 박스가 깨지겠지요.. 배경이미지가 쓸데없이 커지면 이또한 효율적이지 못하므로 디자인 하면서 적절한 사이즈를 예상해서 제작하면 됩니다.

'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

+ Recent posts