CSS 복수이미지사용 라운드 박스
css3에서는 하나의 엘리먼트에 복수이미지가 사용가능하다.
월드와이드맵 참조 링크http://www.w3.org/TR/css3-background/
간단한 예로 div엘리먼트의 양쪽에 두이미지를 쓴다고 하면
div{
background-image :
url("left.png"),
url("right.png");
/*콤마로 여러개를 지정한다*/
background-repeat :
no-repeat,
no-repeat;
background-position:
0 left,
0 right,
위와 같이 ","로 여러개를 지정할수 있다.라운드박스에 적용해보자
유동 라운드박스 :: dom
유동 라운드 박스를 반드는 방법은 여러가지가 있다. 먼저 여러 코딩으로 감싸고 각각 배경그림을 지정하는경우이다.예제를 보자
/*클래스 bt는 박스 탑부분이다 *//*왼쪽 보더*//*오른쪽 보더*//*내용*/유동 라운드박스 :: 코딩감싸기
/*클래스 bb는 박스 아래부분이다 */
위와같은 경우는 단지꾸며주기위해 코딩이 너무많아서 혼란스럽다. 이를 스크립트로 해결하는 방법이다음과 같다.
/*
먼저 다중함수실행 함수가필요하다.길어서생략하고 출처는
http://www.scottandrew.com/weblog/articles/cbs-events
*/
/*
또역시필요한 엘리먼트생성함수
http://simon.incutio.com/archive/2003/06/15/javascriptWithXML
*/
function insertTop(obj) {
// 상단에 필요한 bt란클래스의 div와 그안에 div를 만든다.
d=createElement("div"); d.className="bt"; //클래스이름이 bt
d2=createElement("div"); d.appendChild(d2); //bt의 자식 div
obj.insertBefore(d,obj.firstChild);
}
function insertBottom(obj) {
// 하단에 필요한 bb란클래스의 div와 그안에 div를 만든다.
d=createElement("div"); d.className="bb"; //클래스이름이 bb
d2=createElement("div"); d.appendChild(d2);//bb의 자식 div
obj.appendChild(d);
}
function initCB()
{
var divs = document.getElementsByTagName('div');
var cbDivs = [];
for (var i = 0; i < divs.length; i++) {
if (/\bcbb\b/.test(divs[i].className))
cbDivs[cbDivs.length] = divs[i];
}
var thediv, outer, i1, i2;
for (var i = 0; i < cbDivs.length; i++) {
thediv = cbDivs[i];
//클래스명이 cbb인 div를 찾고 cb로바꾼다
outer = createElement('div');
outer.className = thediv.className.replace('cbb', 'cb');
//클래스 i3생성
thediv.className = 'i3';
thediv.parentNode.replaceChild(outer, thediv);
//나머지 i2,i1을 생성
i1 = createElement('div');i1.className = 'i1';
outer.appendChild(i1);i2 = createElement('div');
i2.className = 'i2';i1.appendChild(i2);
i2.appendChild(thediv);
insertTop(outer); insertBottom(outer);
}
}
if(document.getElementById && document.createTextNode)
{
addEvent(window, 'load', initCB);
}
위와 같이 해주어 의미없는 엘리먼트를 DOM으로 만들어준다.
그리고 적용할 css
.box {/*기본적인 box와 그배경*/
margin: 15px 0 0 0;
padding: 5px 0 5px 0;
background:url(images/diags.gif);
}
.cbb {
margin: 0 10px 0 10px;
background: #FFF;
padding: 5px 0 5px 0;
line-height: 170%;
}
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 5px;
color: #333;
}
.cb {
margin: 0.5em 0;
line-height: 170%;
}
/* 위쪽의 그림*/
.bt {
background:url(images/box.png) no-repeat 100% 0;
margin:0 0 0 18px; height:27px;
}
.bt div {
height:27px;width:18px;
position:relative;left:-18px;
background:url(images/box.png) no-repeat 0 0 ;
}
/* 아래쪽의 그림 */
.bb {
background:url(images/box.png) no-repeat 100% 100%;
margin:0 0 0 12px; height:14px;
}
.bb div {
height:14px;width:12px;
position:relative;left:-12px;
background:url(images/box.png) no-repeat 0 100% ;
}
/* 왼쪽 보더*/
.i1 {
padding: 0 0 0 12px;
background:url(images/borders.png) repeat-y 0 0;
}
/* 오른쪽보더 */
.i2 {
padding: 0 12px 0 0;
background:url(images/borders.png) repeat-y 100% 0 ;
}
/* 콘텐츠 */
.i3 {
background:#FFF; border: 1px solid #FFF;
border-width:1px 0; padding:0 5px;
}
유동 라운드박스 :: CSS3
앞에 보여준 것은 DOM으로 해결했지만 어느정도 알아야 하고 귀찮다. 더쉽게하는방법이 css3 복수 이미지사용하는것이다.위와같은 그림이 필요하고 소스는 아래와같다.
유동 라운드박스 :: css3로 해결
div#csspec {
padding : 0 1em;
background-color : #f9e6f6; }
div#csspec { background-image :
url("./images/top_left.png"),url("./images/top_right.png"),url("./images/bottom_right.png"),
url("./images/bottom_left.png"),url("./images/top_center.png"), url("./images/middle_right.png"),url("./images/bottom_center.png"),url("./images/middle_left.png");
background-repeat :
no-repeat,no-repeat, no-repeat, no-repeat,repeat-x, repeat-y,repeat-x, repeat-y;
background-position:
top left,top right,bottom right,bottom left,top left,top right,bottom right,bottom left;
}
div#csspec p{padding:20px;}
이로서 복수이미지를 이용한 라운드 박스사용을 소개했다. 이예제를 보려면 여기로 클릭
그리고 아직까지 복수이미지는 브라우저 구글크롬 사파리에만 적용된다
댓글