ikspres.com 으로 블로그를 이전하였습니다. : 간결한 HTML을 유지하면서 둥근 모서리 박스 만들기

ikspres.egloos.com

WEB 2.0 디자인에서 자주 사용되는 rounded box 를 제대로 구현하는 것은 그 심플한 모양과는 달리 꽤나 복잡합니다.
여기서 '제대로'라 함은 박스의 크기가 그 내용에 따라 자유자재로 늘어나거나 줄어들 수 있음을 의미합니다.(왜 늘어나는 박스를 사용해야 하는 지와 어떻게 구현 하는 지에 대해서는 친절한 방탄웹에 잘 나와 있습니다.)

보통 많이 사용되는 박스는 다음과 같은 모양입니다.

구현은 여러가지로 가능하겠지만, 방탄웹등 여기 저기의 내용을 참조하여 처음으로 만들어 본 HTML코드는 다음과 같았습니다.

/* HTML */
<div class='filled_rounded_box'>
            <div class='rbox_top'><div></div></div>
            <div class='rbox_content'>
                <p> item 1</p>
                <p> item 2 </p>
                <p> item 3 </p>
            </div>
            <div class='rbox_bottom'><div></div></div>
</div>
/* CSS */
/* four rounded corner images */
.rbox_top {
    height: 5px;
    background: #B5EDBC url(images/corner_tl.gif) no-repeat top left;
}
.rbox_top div{
    font-size: 1px;
    line-height:0;
    height: 5px;
    background: url(images/corner_tr.gif) no-repeat top right;
}
.rbox_bottom {
    height: 5px;
    background: #B5EDBC url(images/corner_bl.gif) no-repeat bottom left;
}
.rbox_bottom div{
    font-size: 1px;
    line-height:0;
    height: 5px;
    background: url(images/corner_br.gif) no-repeat bottom right;
}

.filled_rounded_box {
    background: #B5EDBC;
}
/* rbox_content for border in for b_rbox and t_rbox */
.rbox_content {
    border-left: #b5EDBC 4px solid;
    border-right: #b5EDBC 4px solid;
}
.rbox_content p {
        margin: 0;
        margin-left: 5px;
}

먼저 위의 CSS에 대해서는 생각하지 말고 HTML에 대해서만 생각해봅시다.

/* HTML */
<div class='filled_rounded_box'>
            <div class='rbox_top'><div></div></div>
            <div class='rbox_content'>
                <p> item 1</p>
                <p> item 2 </p>
                <p> item 3 </p>
            </div>
            <div class='rbox_bottom'><div></div></div>
</div>

실제 박스에 나오는 내용은 item1, item2, item3 와 같이 간단한 내용인데 HTML의 내용은 꽤나 복잡합니다. 그 이유는 바로 네 귀퉁이의 둥근 모서리 이미지를 표현하기 위해서입니다.

각 모서리를 하나의 background-image로 표현했고, 이 4개의 모서리 이미지를 배경이미지로 달기 위해서는 실제 내용과는 상관없는 여러개의 div 들이 추가로 필요하게 된 것입니다.(위에서 빨갛게 표시한 부분)

이런 식으로 구현하다보니 HTML 속에 data가 아닌 design 요소들이 들어가게 되어버렸습니다. CSS는 제껴두고서라도 아래의 복잡한 HTML의 내용을 보고 화면에 표시될 내용이 뭔지 파악하는 것이 쉽지 않습니다.

그런데 똑같은 박스의 표현이 가능하도록 하면서 HTML의 내용을 간결하게 할 수는 없을까요?

<div class='fIlled_rounded_box'>
     <p> item 1 </p>
     <p> item 2 </p>
     <p> item 3 </p>
</div>

이렇게만 된다면 멋지겠군요. 화면에 표시될 내용의 묶음인 div의 class에 표시할 박스의 모양을 적어주는 것으로 끝입니다.

이것을 가능하게 하려면 javascript의 도움이 필요합니다.

var init = function {
  var prefix = "<div class='rbox_top'><div></div></div>" + "<div class='rbox_content'>";
var postfix =    "</div>" + "<div class='rbox_bottom'><div></div></div>";

var list = document.getElementsByClassName('filled_rounded_box');
     listt.each( function(b) { b.innerHTML = prefix + b.innerHTML + postfix; });
}

코드가 짧지만 좀 복잡합니다. 간단히 설명하면 클래스가 'filled_rounded_box'인 놈들을 모두 뽑아서 list에 집어 넣습니다.

list에 있는 각각에 대해서 그 innerHTML의 앞 뒤로 필요한 div들을(앞에서 빨갛게 표시했던 부분) 붙여주는 겁니다. (아참! 이 코드는 prootype.js 를 사용했기 때문에 getElementByClassName이나 each 같은 멋진 함수들을 사용할 수 있었습니다.)

위의 자바스크립트를 cssbox.js 에 담아두고 html의 body tag를 <body onload="init()"> 처럼 해주면 페이지가 로딩되자마자 위의 코드가 살행되면서 그 페이지내에 있는 모든 박스들의 모양을 만들어줍니다.

멋지지 않나요? 같은 테크닉으로 다른 모양의 박스도 만들어 봤습니다.

이런 박스들을 포함하는 페이지의 HTML 소스 아래와 같이 간결합니다.

<h2> Filled Box </h2>

        <div class='filled_rounded_box'>
            <p> item 1 </p>
            <p> item 2 </p>
            <p> item 3 </p>
        </div>

        <br />

        <h2> Bordered Box </h2>
        <div class='bordered_rounded_box'>
            <p> item 1 </p>
            <p> item 2 </p>
            <p> item 3 </p>
        </div>

        <br />

        <h2> Titled Box </h2>
        <div class='titled_rounded_box'>
            <h3> Long and Very Loooong title </h3>
            <p> titled box </p>
            <p> titled box </p>
            <p> titled box </p>
        </div>

솔직히 고백하자면 디자인이 그렇게 마음에 들지는 않고 기능적으로도 아직 몇 군데 손볼 데가 있지만 그런대로 쓸만한 박스가 된 것 같습니다. (조금만 더 손보면 Titled Box에 조그만 삼각형을 클릭해서 제목 아래의 내용을 닫았다 열었다 하도록 할 수 있을 겁니다.)

실제 동작하는 페이지와 HTML, CSS, Javascript 코드들은 여기에서 보실 수 있습니다.

끝으로 위의 설명에서는 생략했지만, IE에서는 높이가 20px미만인 div를 그냥 만들어지지 않기 때문에 실제 코드에서는 div 본문에  를 넣고 font-size 와 line-height를 지정하는 hack을 사용했습니다.

업데이트: codian님이 소개하신 이미지를 사용하지 않는 둥근 모서리 박스는 기발한 아이디어로군요.