2008년 11월 19일 수요일

[CSS]png 이미지로 상하좌우 유동적인 둥근박스 만들기

png 이미지로 유동적인 둥근박스 만들기 입니다.

유동적인 박스를 만드는 방법은 다양합니다. 하지만, 박스의 쓰임새에 따라서 조금씩 다를수 있습니다.
저는 상하좌우 모두 유동적인 박스를 만들어보려고 합니다.
매번 말씀드리지만 표현하는 방법은 여러가지이며 아래 예제는 그중에 하나라고 보시면 됩니다.

총두가지 table 방식과 div 방식으로 예제를 통해 알아보도록 하겠습니다.

첫번째 table로 둥근박스 만드는 방법입니다.


위와 같은 박스를 만들고자 할때 이미지는 다음과 같이 잘라줍니다. (이부분은 div도 동일합니다.)


투명 png로 저장을 하시고, 나머지 회색 부분은 배경컬러로 적용하시면 됩니다. 곡선이미지(png)는 총4개입니다.

밑에서 설명을 하겠지만, png으로 저장시 css에서만 조금 달라질뿐이며, png같은 경우 gif보다 투명곡선을 표현할때 좀더 깔끔하기에 png를 선택했을뿐입니다. 배경이 투명이 아닐경우는 구지 png로 하시지 않아도 됩니다.

아래는 테이블로 감싸고 있을때의 모습입니다.
table 소스는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>유동적인 둥근박스 만들기(테이블)</title>
<style type="text/css">
body table tr td {font-size:12px;}
.bg_gray {background:#e2e2e2;}
.top_left {width:20px; height:20px; background:url(bg_top_left.png) no-repeat;}
.top_right {width:20px; height:20px; background:url(bg_top_right.png) no-repeat;}
.bottom_left {width:20px; height:20px; background:url(bg_bottom_left.png) no-repeat;}
.bottom_right {width:20px; height:20px; background:url(bg_bottom_right.png) no-repeat;}
 /* IE6용 png 적용 */
*html .top_left {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_top_left.png',sizingMethod='crop') }
*html .top_right {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_top_right.png',sizingMethod='crop') }
*html .bottom_left {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_bottom_left.png',sizingMethod='crop') }
*html .bottom_right {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_bottom_right.png',sizingMethod='crop') }
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="top_left"></td>
    <td class="bg_gray"></td>
    <td class="top_right"></td>
  </tr>
  <tr>
    <td class="bg_gray"></td>
    <td class="bg_gray">이곳에 내용을 채우시면 됩니다.</td>
    <td class="bg_gray"></td>
  </tr>
  <tr>
    <td class="bottom_left"></td>
    <td class="bg_gray"></td>
    <td class="bottom_right"></td>
  </tr>
</table>
</body>
</html>

IE6에서는 png 투명이미지가 지원되지 않습니다. 그러므로 IE6용으로 스타핵을 사용했습니다.
이부분은 [이글]을 참고하세요.

간단하게 설명을 드리자면 100% 테이블에 가로 세로 3개의 셀을 만드시고 4개의 곡선이미지를 style로 만든후 class로 불러들인 방식입니다. 그외 회색배경은 컬러로 적용을 했습니다.

첨부파일을 확인해보세요.
table.zip
두번째로 div 방식입니다.


위와 같은 모양입니다.
이미지 자르는건 table과 동일하며 마크업 및 css만 다를뿐입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>유동적인 둥근박스 만들기(div)</title>
<style type="text/css">
#wrap {margin:0; padding:0; font-size:12px;}
#header, #contents, #bottom {clear:both;}
.top_left {float:left; width:20px; height:20px; background:url(bg_top_left.png) no-repeat;}
.top_right {float:right; width:20px; height:20px; background:url(bg_top_right.png) no-repeat;}
.top_center {position:relative; height:20px; background:#e2e2e2; overflow:hidden;}
.contents_center {position:relative; padding:0 20px; background:#e2e2e2; overflow:hidden;}
.bottom_left {float:left; width:20px; height:20px; background:url(bg_bottom_left.png) no-repeat;}
.bottom_right {float:right; width:20px; height:20px; background:url(bg_bottom_right.png) no-repeat;}
.bottom_center {position:relative; height:20px; background:#e2e2e2; overflow:hidden;}
 /* IE6용 png 적용 및 3px버그용 */
*html .top_left {margin-right:-3px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_top_left.png',sizingMethod='crop') }
*html .top_right {margin-left:-3px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_top_right.png',sizingMethod='crop') }
*html .bottom_left {margin-right:-3px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_bottom_left.png',sizingMethod='crop') }
*html .bottom_right {margin-left:-3px; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg_bottom_right.png',sizingMethod='crop') }
</style>
</head>

<body>
<div id="wrap">
    <!-- header -->
    <div id="header">
        <div class="top_left"></div>
        <div class="top_right"></div>
        <div class="top_center"></div>
    </div>
    <!--// header -->

    <!-- contents -->    
    <div id="contents">
        <div class="contents_center">내용이 들어가는곳입니다.</div>
    </div>
    <!--// contents -->
    
    <!-- bottom -->
    <div id="bottom">
        <div class="bottom_left"></div>
        <div class="bottom_right"></div>
        <div class="bottom_center"></div>
    </div>
    <!--// bottom -->
</div>
</body>
</html>

첨부파일 확인해 보세요.
div.zip

<div class="contents_center">내용이 들어가는곳입니다.</div>

위에 부분에는 ul 이 올수도 있고 p 가 올수도 있습니다. 각기 필요해 따라 마크업을 하시면 됩니다.

방법은 정말 다양합니다. 다만, 우리는 더욱더 편한걸 찾을뿐입니다. 위에 자료를 참고하셔서 더 좋은 방법을 찾길 바랍니다.^^

작성자: 시간:
라벨: , , , , , , ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)