CSS 둥근 모서리 박스
다음과 같은 박스를 구현해보자. 폭은 고정되어 있고, 높이는 내용물에 따라 가변적인 경우이다.
이미지 없이 CSS만으로 구현된 소스가 출처도 밝히지 않으채 굴러다니고 있으나, 이미지를 사용하지 않은 점은 높이 평가를 받을 수 있을지 모르나 의미론적으로 불필요한 태그가 너무 많이 사용되었다. 의미없는 태그를 그렇게 남발할 것같으면, 애초에 CSS를 이용한 디자인을 하는 이유가 무엇이란 말인가? 미학적인 요소를 가미하려고 하는 이상 이미지를 사용하는 것이 합당하다. 다음과 같이 이미지를 3개 잘라낸다.
 |
box_top_180.gif |
 |
box_side_180.gif |
 |
box_bottom_180.gif |
마크업 구조는,
-
<dl id="postStatus"><dt>Post Status</dt>
-
<dd>
-
<label><input name="post_status" type="radio" value="published" checked="checked" />Published</label>
-
<label><input name="post_status" type="radio" value="draft" />Draft</label>
-
<label><input name="post_status" type="radio" value="private" />Private</label>
-
</dd>
-
</dl>
스타일은,
-
* {margin:0;padding:0;}
-
#postStatus {padding:0 5px 8px 3px;width:180px;background:url(box_bottom_180.gif) no-repeat bottom;}
-
#postStatus dt {padding:5px 5px 0 3px;height:20px;color:#fff;background:url(box_top_180.gif) no-repeat top;}
-
#postStatus dd {padding:0 5px 0 3px;background:url(box_side_180.gif) repeat-y;}
또는,
-
<div id="postStatus"><h2>Post Status</h2>
-
<div>
-
…
-
</div>
-
</div>
스타일은,
-
* {margin:0;padding:0;}
-
#postStatus {padding:0 5px 8px 3px;width:180px;background:url(box_bottom_180.gif) no-repeat bottom;}
-
#postStatus h2 {padding:5px 5px 0 3px;height:20px;color:#fff;background:url(box_top_180.gif) no-repeat top;}
-
#postStatus div {padding:0 5px 0 3px;background:url(box_side_180.gif) repeat-y;}
개인적으로 박스를 만들 때는 전자를 선호한다. 구조적으로 좀더 단단해 보이기 때문이다.
너비와 높이가 모두가 가변 박스를 만들고 싶다면 조금 복잡하기는 하지만 다음을 참조하자.
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/
http://www.vertexwerks.com/tests/sidebox/