본문 바로가기
CSS

CSS 복수이미지사용 라운드 박스(css3)

by 샷타이거 2009. 9. 23.

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;}

이로서 복수이미지를 이용한 라운드 박스사용을 소개했다. 이예제를 보려면 여기로 클릭

그리고 아직까지 복수이미지는 브라우저 구글크롬 사파리에만 적용된다

댓글