이런말을 해도 될런지 모르겠지만 웹1.0 아니 웹디자인 1.0에 있어서 라운드박스의 공헌을 이루어 말할수 없을 정도다. 대한민국 포털 치고 라운드박스 없는 디자인 없다. 일종의 유행이자 커다란 패러다임과 같은 존재가 바로 라운드박스 디자인이다. 웹2.0의 시대가 도래했고, 스타일을 적극 도입하고자 하니 과거의 찬란했던 라운드박스가 애물단지가 되고 있다. 하지만 인간은 자고로 막힌곳은 뚫고, 가로막은 돌은 치우며 간다고, 온갖 비법과 술수를 동원하여 이 난관을 해결해냈다. 바야흐로 무림의 절대지존 라운드박스를 거스를수 없는 지경인 것이다!
잡설이 길었는데, 아래는 라운드박스를 만들수 있는 여러가지 방법중 하나가 될 것 같다. 스타일시트, 자바스크립트, DOM에 대한 짧은지식으로 과연 쓸만한가?하는 판단은 차후로 미루고 똥배짝두 먼저 내민놈이 커보인다고 무식하게 공개해 본다.
<!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>
<title>라운드박스</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Editplus" />
<style type="text/css">
body, * { margin: 0px; padding: 0px; }
.box { }
.rndBox { position: relative; }
.box01 { width: 196px; height: 100%; min-height: 196px; border: 2px solid #b0db4a; }
.box02 { width: 96px; height: 100%; min-height: 96px; border: 2px solid #b0db4a; }
.rounding { position: absolute; width: 10px; height: 10px; }
.rndLeftTop { top: -2px; left: -2px; background: url('bg_lt.gif') no-repeat 0 0; }
.rndLeftBot { bottom: -2px; left: -2px; background: url('bg_lb.gif') no-repeat 0 0; }
.rndRightTop { top: -2px; right: -2px; background: url('bg_rt.gif') no-repeat 0 0; }
.rndRightBot { bottom: -2px; right: -2px; background: url('bg_rb.gif') no-repeat 0 0; }
* html .rndLeftBot, * html .rndRightBot { bottom: -11px; }
</style>
<script type="text/javascript">
<!--
window.onload = function() {
var tmp = document.getElementsByTagName("DIV");
for(var i=0; i<tmp.length; i++)
{
divClassName = tmp[i].className;
if(divClassName)
{
divClassName2 = divClassName.split(" ");
for(var j=0; j<divClassName2.length; j++){
if(divClassName2[j] == "rndBox")
{
var lt = createRnd("rndLeftTop"); tmp[i].appendChild(lt);
var lb = createRnd("rndLeftBot"); tmp[i].appendChild(lb);
var rt = createRnd("rndRightTop"); tmp[i].appendChild(rt);
var rb = createRnd("rndRightBot"); tmp[i].appendChild(rb);
}
}
}
}
}
function createRnd(classname){
classname = "rounding " + classname;
var rnd = document.createElement("DIV");
rnd.setAttribute("class",classname);
rnd.className = classname;
return rnd;
}
//-->
</script>
</head>
<body>
<div class="rndBox box01">
<p>하코사 만세</p>
</div>
<br />
<div class="box box01">
Not Round Box 01
</div>
<br />
<div class="rndBox box02">
<p>하코사 만세</p>
</div>
<br />
<div class="box box02">
Not Round Box 02
</div>
</body>
</html>
길지 않은 소스이니 보면 이해가 번특! 일겠지만 간략 설명하면,
HTML문서에서는 박스를 만들고자 하는 DIV 앨리먼트의 외로운 독고다이만이 느껴질 뿐, 사방의 수호신 청룡, 백호, 주작, 현무의 보이지 않는다! 나는 HTML 문서를 작성할때 가급적 의미를 가지지 않는 코드를 없애야 좋은 코드가 된다! 라고 생각한다. 그래서 위처럼 의미적으로 박스임을 나타낼수 있는 최소한의 DIV 앨리먼트만을 잡아두었다.
그럼 어떻게 사방의 수호신을 모시고, 라운드를 처리하리까?
DOM이란걸 생각했다. 일단 브라우져가 HTML문서를 읽어온 뒤에 DOM을 이용해서 박스라고 정의된(box classname) DIV 앨리먼트를 찾아내서 DIV 앨리먼트 안에 앨리먼트 자체가 의미는 가지지 않지만 표현을 위해 사용될 라운드용 DIV 앨리먼트를 생성해서 집어 넣는 것이다. 위 Javascript가 그 일을 맡는다.
이렇게 하면 미리 정의된 스타일시트의 문서를 통해 사방의 라운드가 둘러지게 된다. 짜잔~~! 하고 말이다.
이 방법의 단점으로는 DOM이나 Javascript를 제대로 지원하지 않는 브라우져에서는 사용할 수 없다는 것이다. 또한, 위 소스에서는 DOM이나 Javascript 브라우져의 사용여부를 미리 체크하고 있지 않아서 바로 사용하기에는 무리가 있음을 알린다. (약간의 내공증진이 필요한 소스다) 그렇긴 하지만 이 방법은 HTML 문서 자체에 라운드 처리를 위한 불필요한 앨리먼트를 삽입하지 않는 점과 둘 이상의 라운드박스를 쉽게 처리할 수 있다는 점에 있어서 쓸만한 방법이라는 생각이 든다.
아무리 봐도 봄눈은 천재인것 같앵...ㅋ
답글삭제@hobread - 2008/01/21 15:48
답글삭제워워~ 진정해요 누나~
누가 들으면 진짠줄 알아요~
누나가 더 천재~!