Rev. 2.73

Nicolas Gallagher씨는 CSS 2.1을 지원하는 브라우저인 Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+에서는 CSS 3을 사용하지 않고도 하나의 요소에 여러개의 배경 이미지와 보더를 적용하는 방법에 대하여 소개했습니다.

css2-multiple-background-border-model.png

이것은 :before:after 그리고 content:를 이용하여 여러개의 가짜요소에 스타일을 지정하는 기법입니다. 별도의 추가 마크업 없이 여러개의 CSS 효과를 적용하는 장점이 있습니다. 이를 응용한 여러가지 예제들을 살펴 봅시다.

다중 배경 이미지

css-multiple-backgrounds-silverback.jpg
이 예제는 하나의 요소에 3개의 배경 이미지를 적용한 결과입니다.

#silverback {
   position:relative;
   z-index:1;
   min-width:200px;
   min-height:200px;
   padding:120px 200px 50px;
   background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}
#silverback:before,
#silverback:after {
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   padding-top:100px;
}
#silverback:before {
   content:url(gorilla-1.png);
   padding-left:3%;
   text-align:left;
   background:transparent url(vines-mid.png) 300% 0 repeat-x;
}
#silverback:after {
   content:url(gorilla-2.png);
   padding-right:3%;
   text-align:right;
   background:transparent url(vines-front.png) 70% 0 repeat-x;
}

가짜 컬럼

css-multiple-backgrounds-columns.png
높이가 서로 다른 다른 3 컬럼의 최대 높이를 유지하면서 배경 색상을 서로 다르게 지정했습니다.

<div id="faux">
   <div class="main">[content]</div>
   <div class="supp1">[content]</div>
   <div class="supp2">[content]</div>
</div>
#faux {
   position:relative;
   z-index:1;
   width:80%;
   margin:0 auto;
   overflow:hidden;
   background:#ffaf00;
}
#faux div {
   position:relative;
   float:left;
   width:30%;
}
#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}
#faux:before,
#faux:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   left:33.333%;
   width:100%;
   height:100%;
   background:#f9b6ff;
}
#faux:after {
   left:66.667%;
   background:#79daff;
}

여러개의 가짜 보더

css-multiple-borders.png
가상 요소에 paddingborder를 이용하여 여러개의 보더가 중첩된 듯한 효과를 부여할 수 있습니다.

#borders {
   position:relative;
   z-index:1;
   padding:30px;
   border:5px solid #f00;
   background:#ff9600;
}
#borders:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:5px;
   left:5px;
   right:5px;
   bottom:5px;
   border:5px solid #ffea00;
   background:#4aa929;
}
#borders:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:15px;
   left:15px;
   right:15px;
   bottom:15px;
   border:5px solid #00b4ff;
   background:#fff;
}

이밖에도 둥근 모서리를 가진 버튼을 만들거나 시작과 끝의 배경 이미지가 서로 다른 높이가 유동적인 컨텐츠 요소를 생성할 때에도 매우 유용합니다. 그러나 IE 6, 7에서는 지원되지 않는다는 점을 고려해야 합니다. CSS3로 만든 다양한 말풍선역시 이 방법을 이용한 것이였군요.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar