CSS3 Background Image Layering
CSS3 에서 가장 환영할 만한 것이 하나의 element 에 여러개의 background 를 넣을 수 있다는 것이다. 이것이 가능하면 불필요한 markup 을 넣을 필요가 없어지기 때문에 보다 구조적인 문서를 만들기 쉽다. CSS3 의 기능을 완전히 구현한 것은 아니지만 테스트 결과 상당히 유용할 것으로 생각 된다. IE6, Firefox 1.0, Opera7.54 에서 테스트 했음
<!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>CSS3 Background Property</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/* css3 background property implement
* Author : http://hyeonseok.com
* Update : http://hyeonseok.com/home/archive_javascript.php#Css3BackgroundImageLayering
* version : alpha (20050227)
*/
function css3Background(targetElement, backgroundString) {
if (!targetElement) {
return false;
}
// getStyle script form http://www.quirksmode.org/dom/getstyles.html
if (window.getComputedStyle) {
padding = window.getComputedStyle(targetElement,null).getPropertyValue("padding-top");
padding += " " + window.getComputedStyle(targetElement,null).getPropertyValue("padding-right");
padding += " " + window.getComputedStyle(targetElement,null).getPropertyValue("padding-bottom");
padding += " " + window.getComputedStyle(targetElement,null).getPropertyValue("padding-left");
} else if (targetElement.currentStyle) {
padding = eval('targetElement.currentStyle.' + "paddingTop");
padding += " " + eval('targetElement.currentStyle.' + "paddingRight");
padding += " " + eval('targetElement.currentStyle.' + "paddingBottom");
padding += " " + eval('targetElement.currentStyle.' + "paddingLeft");
}
// save content
originalHTML = targetElement.innerHTML;
targetElement.innerHTML = "";
// create div element and layering
backgroundEach = backgroundString.split(",");
for (i=0; i<backgroundEach.length; i++) {
backgroundProperty = backgroundEach[i].replace("background:", "");
el = document.createElement("div");
if (i==0) {
targetElement.style.padding = "0";
}
el.style.background = backgroundProperty;
targetElement.appendChild(el);
targetElement = el;
}
targetElement.style.padding = padding;
targetElement.innerHTML = originalHTML;
return true;
}
</script>
<style type="text/css">
ul {
padding: 1em;
margin: 0.5em;
padding: 1em 1.5em;
list-style: none;
width: 50%;
}
ul li {
margin: 0.3em 0 0;
padding: 0.3em 0 0;
line-height: 1.2em;
border-top: 1px solid #ddd;
}
ul li:first-child {
border: none;
}
</style>
</head>
<body>
<h1>CSS3 Background Image Layering 구현</h1>
<h2>사용법</h2>
<ul id="usage">
<li>함수에 element 와 css3 module 의 background layering 문법을 넘겨주면 됨</li>
<li>background 속성은 다른 것은 안되고 background short hand 를 콤마로 나열한 방법만 지원됨 (다른 방법은 앞으로도 지원할 생각 없음)</li>
</ul>
<h2>Known defect</h2>
<ul id="defect">
<li>IE 에서는 p element 에 적용할 경우 "알 수 없는 런타임 에러" 발생. (p 안에 div 가 들어가는 것이 DTD 상에서 오류이기 때문 인 것 같음, 그럼 ul 은? -o-)</li>
<li>element 의 style 이 유지가 안되기 때문에 element 의 style 을 css 에서 하위 div 까지 중복 선언을 해 주어야 함</li>
<li>element 안에 div 를 중첩하는 방식이기 때문에 ul, table 등에 사용할 경우는 분명히 문법적으로 오류임. 하지만 markup 이 보존 될 수 있기 때문에 잘 보이기만 하면 별 문제 없을 듯. 이게 싫은 사람은 div, li, td 등과 같이 하위에 div element 를 가질 수 있는 경우에만 사용하면 됨</li>
<li>IE 에서는 Table element 에 적용했을 경우 정상적으로 나오지 않음 (table 에는 사용하지 마세요.) Firefox 에서는 bg 는 나오지만 어짜피 padding 을 control 할 수 없기 때문에 사용 할 수 없음</li>
<li>IE 에서는 필수적으로 block model hack 을 사용해야 함 (block 에 dimension 을 주는 방법: width 나 height 둘중의 하나는 block 에 부여를 해야하고 그럴 수 없을 경우 css hack 사용)</li>
<li>padding 이 이미지에 비해 충분하지 않을 경우 라인이 깨져서 나옴 (당연한 거잖아!)</li>
</ul>
<script type="text/javascript">
css3Background(document.getElementById("usage"), "background: url(bgV.gif) repeat-y top left, background: url(bgV.gif) repeat-y top right, background: url(bgH.gif) repeat-x top left, background: url(bgH.gif) repeat-x bottom left, background: url(bgTL.gif) no-repeat top left, background: url(bgTR.gif) no-repeat top right, background: url(bgBL.gif) no-repeat bottom left, background: url(bgBR.gif) no-repeat bottom right");
css3Background(document.getElementById("defect"), "background: url(bgV.gif) repeat-y top left, background: url(bgV.gif) repeat-y top right, background: url(bgH.gif) repeat-x top left, background: url(bgH.gif) repeat-x bottom left, background: url(bgTL.gif) no-repeat top left, background: url(bgTR.gif) no-repeat top right, background: url(bgBL.gif) no-repeat bottom left, background: url(bgBR.gif) no-repeat bottom right");
</script>
</body>
</html>