블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

'css3'에 해당되는 글 3건

  1. 2013.03.21 CSS3의 구조적인 가상선택자 (1)
  2. 2013.03.04 [HTML5] Progress Bar CSS입히기 (2)
  3. 2010.03.07 지금 바로 쓸수 있는 CSS3


요즘 front-end 개발자들은 CSS를 "어떻게" 쓰는지에 대해 이해할 필요가 없으나 얼마나 "효과적"으로 쓰는지에 대해서 알 필요가 있습니다. 여기서 "효과적"이라는 것은 프로젝트나 환경에 따라 의미하는것이 다릅니다. 만약 여러명의 웹퍼블리셔들과 함께 작업하고 있거나 id나 class없이 기존 시스템을 작업한다거나, 규모가 큰 웹사이트의 속도를 높이기 위한 최적화작업을 위한 협업을 위해 가장 효과적인 방법이 필요할것입니다. 

대부분의 개발자들이 id나 class 선택자에는 친숙하나 조금 더 편안한 작업을 위해 가상선택자(psuedo seletor)에 대해 알아보도록 합니다.


CSS3스펙에는 조금 더 다양한 가상선택자들을 제공하고 있으나 현재 이 글을 작성하고 있는 시점에는 아직 많은 브라우저들이 지원을 하고 있지는 않습니다. 그러나 다양한 자바스크립트 라이브러리나 프레임웍에서 지원하고 있으며 앞으로 브라우저 벤더들도 지원할 예정이니 미리 봐두는것도 좋을 듯 싶습니다. 


CSS2 스펙도 현재 진행중인 상태에서 여러분은 이미 CSS2의 선택자를 미리 사용하고 있는 것처럼 브라우저에서 지원하는 CSS3는 지금도 사용할 수 있겠죠..

만약 지원하지 않는 CSS3의 가상선택자를 굳이(?) 사용하고자 하신다면 다음 라이브러리 ( http://selectivizr.com/ )를 사용하시는것도 좋을듯 싶습니다.



CSS선택자가 뭔지 모르는 분들은 다음글 CSS 선택자 이해하기 글도 한번 참조해 보세요 ^^





가상선택자란

CSS의 가상클래스 혹은 가상선택자 (Pseudo-class)는 id 선택자나 class 선택자와 같이 간단하게 혹은 결합하여 쓸수 없는 요소들을 선택하는 선택자 입니다. 여러분은 마크업 요소의 속성값, 상태, 상대적위치등을 이용하여 각 요소들을 선택할 수 있습니다. 예를 들어 가장 익숙한 가상선택자에는 다음과 같은 것들이 있습니다.


:link

:visited

:hover

:active

:focus


CSS3 스펙에 새롭게 추가된 가상클래스는 DOM Tree상에서의 요소의 위치값, 다른 요소와의 상대적인 위치에 따라 설정되는 "구조적인 선택자"입니다


:root

: only-child

:empty

:nth-child(n)

:nth-last-child(n)

:first-of-type

:last-of-type

: only-of-type

:nth-of-type(n)

:nth-last-of-type(n)

:first-child

:last-child


<참조: CSS Selectors by clearboth>

PatternMeaningS5C8F3.6O11I9bI8I7I6
#idid로 지정된 요소 선택OOOOOOOO
.classclass로 지정된 요소 선택OOOOOOOO
EE 요소를 선택OOOOOOOO
E:link방문하지 않은 E를 선택OOOOOOOO
E:visited방문한 E를 선택OOOOOOOO
E:hover마우스가 올라가 있는 동안 E를 선택OOOOOOOO
E:active마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택OOOOOOOX
E:focusfocus가 머물러 있는 동안 E를 선택OOOOOOXX
E:first-lineE 요소의 첫 번째 라인 선택OOOOOOOX
E:first-letterE 요소의 첫 번째 문자 선택OOOOOOOX
*모든 요소 선택OOOOOOOO
E[foo]‘foo’ 속성이 포함된 E를 선택OOOOOOOX
E[foo="bar"]‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택OOOOOOOX
E[foo~="bar"]‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택OOOOOOOX
E[foo|="en"]‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택OOOOOOOX
E:first-child첫 번째 자식 요소가 E라면 선택OOOOOOOX
E:lang(fr)HTML lang 속성의 값이 ’fr’로 지정된 E를 선택OOOOOOXX
E::beforeE 요소 전에 생성된 요소 선택OOOOOOXX
E::afterE 요소 후에 생성된 요소 선택OOOOOOXX
E>FE 요소의 자식인 F 요소 선택OOOOOOOX
E+FE 요소를 뒤의 F 요소 선택OOOOOOOX
E[foo^="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택OOOOOOOX
E[foo$="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택OOOOOOOX
E[foo*="bar"]‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택OOOOOOOX
E:root문서의 최상위 루트 요소 선택OOOOOXXX
E:nth-child(n)그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택OOOOOXXX
E:nth-last-child(n)n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택OOOOOXXX
E:nth-of-type(n)E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:nth-last-of-type(n)E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:last-childE 요소 중 마지막 자식이라면 E 선택OOOOOXXX
E:first-of-typeE 요소 중 첫번째 E 선택OOOOOXXX
E:last-of-typeE 요소 중 마지막 E 선택OOOOOXXX
E:only-childE 요소가 유일한 자식이면 선택OOOOOXXX
E:only-of-typeE 요소가 같은 타입이면 선택OOOOOXXX
E:empty텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택OOOOOXXX
E:targetE의 URI의 대상이 되면 선택OOOOOXXX
E:enabled활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:disabled비활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:checked선택된 폼 컨트롤(라디오버튼,체크박스)을 선택OOOOOXXX
E:not(s)s가 아닌 E 요소 선택OOOOOXXX
E~FE 요소가 앞에 존재하면 F를 선택OOOOOOOX





가상선택자 문법

자세히 알아보기 전에 가상선택자를 사용하기 위한 문법들에 대해서 간단히 알아보도록 합시다


가상선택자는 가상클래스 이름앞에 콜론(:)을 사용합니다. 

:pseudo-class {}


만약 특정 요소(SPAN)에 붙이고 싶다면 그 앞에 요소 타입을 적어 주시면 됩니다.

span:pseudo-class {}


또한 id 선택자나 class 선택자에 쓰려면 다음과 같이 작성하면 됩니다.

#id:pseudo-class {}

.class:pseudo-class {}


참~ 쉽죠~잉~





수치값

몇몇 가상선택자는 DOM Tree에서의 특정 위치값을 가진 요소를 선택할 수 있으며, 여러분은 수치값을 해당 요소를 선택할 수 있습니다. 다음과 같이 표현합니다.


:pseudo-class(n) {}


(n)값은 정수형으로 표현되며 선택하고자 하는 요소의 순서입니다. 만약 3번째 값을 선택시에는 다음과 같이 합니다.


:pseudo-class(3) {}



또한 "5번째 요소들 마다" 처럼 공식을 사용할 수 있을때는 다음과 같이 사용합니다.


:pseudo-class(5n) {}


추가적으로 더하기(+), 빼기(-) 값을 이용하여 기준공식을 정할 수 있습니다. 예를 들어 아래와 같이 5n+1 이면 5번째 요소가 첫번째 요소가 된다는 뜻입니다.


:pseudo-class(5n+1) {}


또는 홀수(odd) 짝수(even)와 같이 지정할때는 다음과 같은 표현식이 가능합니다.

 :pseudo-class(odd) {}




가상선택자 사용하기

지금까지 가상선택자 사용하기를 간단하게 알아봤고 좀더 상세하게 css3에 추가된 가상클래스에 대해서 알아보도록 합시다.


:root 

html의 최상위 대상 요소를 지정하는 것으로 IE hack으로 많이 사용했던 부분이 css3 스펙 표준으로 지정되었습니다.

만약 html 요소와 body요소를 다르게 표현할때 최상위 요소인 html을 백그라운드를 틀리게 표현할때 표현합니다.

<!DOCTYPE html>

<head>

    <title>타이틀</title>

</head>

<body>

</body>

</html>


:root{ 

    background-color: rgb(56,41,48); 

body { 

    background-color: rgba(255, 255, 255, .9); 

    margin: 0 auto; 

    min-height: 350px; 

    width: 700px; 

}


body부분의 색깔을 달리 표현하고 width값을 700픽셀로 두었을때 최상위인 html 요소부분의 백그라운드 색깔을 바꾸는 소스입니다.

다음과 같이 표현되겠죠..




:only-child

부모객체 자식요소중에 유일한 요소에만 스타일을 지정할때 쓰는 요소입니다.

예를 들어 아래와 같이 표현할때


위의 붉은색을 처리할때 다음과 같이 마크업을 합니다.

 <h2>

<b>유일한 bold요소</b> 

헤딩요소에 들어가는 텍스트입니다.

</h2>


h2 { 

    background: rgb(255, 255, 255) url(zombies.png) no-repeat 97% 4%; 

    border: 1px solid rgba(125, 104, 99, .3); 

    border-radius: 10px; 

    color: rgb(125,104,99); 

    font: normal 20px Georgia, "Times New Roman", Times, serif; 

    padding: 20px 20px 20px 60px; position: relative; width: 450px; 

b:only-child { 

    background-color: rgb(156,41,48); 

    color: rgb(255,255,255); 

    display: block; 

    font: bold 12px Arial, Helvetica, sans-serif; 

    font-weight: bold; 

    letter-spacing: 1px; padding: 10px; 

    text-align: center; 

    text-transform: uppercase; 

    -moz-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    -moz-transform-origin: 50px 0; 

    -webkit-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    -webkit-transform-origin: 50px 0; 

    -o-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    -o-transform-origin: 50px 0; 

    -ms-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    -ms-transform-origin: 50px 0; 

    transform: translate(-30px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    transform-origin: 50px 0 0; width: 150px; 

}


:empty

해당 요소의 자식요소로 어떠한 요소나 텍스트요소가 없는 빈 요소를 지정할때 사용됩니다. td의 빈 테이블일때 사용해도 좋겠죠...  empty-cells 속성과 같은 용도로 사용할 수 있습니다.


<p></p>


:empty {

    background-color: red;

}


td:empty {

    background-color: red;

}


위의 td 내용은 아래와 같이 쓸수도 있습니다.

td {

    empty-cells: background-color:red;

}



:nth-child(n)

부모객체를 기준으로 상대적으로 자식요소가 n번째 오는 요소를 찾는 방식으로 아래와 같이 댓글을 달때 짝수부분만 처리할때 많이 사용합니다.


<ol>

    <li>

        <p>2013-01-01</p>

        <p><a href="#">T-Dog</a></p>

        <p>dog dog dog dog </p>

    </li>

    <li>

        <p>2013-01-01</p>

        <p><a href="#">R-Cat</a></p>

        <p>cat cat cat cat </p>

    </li>

    <li>

        <p>2013-01-01</p>

        <p><a href="#">S-Pig</a></p>

        <p>pig pig pig pig </p>

    </li>

</ol>


일반 적으로 위 마크업에서 li 부분만 CSS를 입힌다면 다음과 같이 CSS를 작성합니다.

li { 

    

    background-color: rgba(194, 181, 158, .5); 

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(194, 181, 158, .7))
                               , to(rgba(194, 181, 158, 0))); 

    background-image: -moz-linear-gradient(top, rgba(194, 181, 158, .7), rgba(194, 181, 158, 0)); 

    background-image: -o-linear-gradient( rgba(194, 181, 158, .7), rgba(194, 181, 158, 0)); 

    border: 1px solid rgb(194, 181, 158); 

    border-radius: 10px; 

    margin: 15px 0; 

    padding: 25px; 

}


그러면 동일하게 li 부분의 스타일이 적용되지만 li 중에 짝수(even)에 해당하는 줄을 넣고자 한다면 아래와 같이 CSS를 더 추가해 줍니다.

li:nth-child(even){ 

    background-color: rgba(242, 224, 131, .5); 

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(242, 224, 131, .7))
    , to(rgba(242, 224, 131, 0))); 

    background-image: -moz-linear-gradient(top, rgba(242, 224, 131, .7), rgba(242, 224, 131, 0)); 

    background-image: -o-linear-gradient( rgba(242, 224, 131, .7), rgba(242,224, 131, 0)); 

    border: 1px solid rgb(242, 224, 131); 

 }







:nth-last-child(n)

위의 :nth-child(n)과 마찬가지로 상대적인 순서가 뒤에서 부터 n 번째 인 요소를 찾을때 사용됩니다.

위의 마크업중 li 태그의 자식요소로 여러개의 p 요소가 들어가는데 뒤에서 2번째 p 요소에 스타일을 적용시킬때는 다음과 같이 스타일을 적용합니다.

p:nth-last-child(2) { 

    clear: left; 

    float: left; 

    font-size: 12px; 

    margin-top: 5px; 

    text-align: center; 

    width: 80px; 

}


그럼 아래와 같이 두번째 p 요소에 float:left 속성이 적용되어 다음 p 요소가 위로 와서 붙겠죠... 






:first-of-type

부모요소 안에서 특정한 타입요소(태그) 중 첫번째 요소를 선택하는 가상선택자로 사용됩니다. 위 샘플중 리스트 목록요소의 첫번째 p 태그(타입요소)에 대해서만 스타일을 적용한다면 다음과 같습니다.


p:first-of-type

    border-bottom: 1px solid rgba(56,41,48, .5); 

    float: right; 

    font-weight: bold; 

    padding-bottom: 3px; 

    text-align: right; 

    width: 560px; 

}








:last-of-type


:first-of-type과 마찬가지로 같은 부모요소안의 가장 마지막 타입요소를 선택하는 가상선택자 입니다.

p:last-of-type { 

    font-style: italic; 

    margin: 50px 10px 10px 100px; 

}




:only-of-type

하나의 같은 부모요소안에 단 하나의 타입요소를 선택하는 가상선택자로 반드시 부모객체에 해당 태그(타입요소)가 하나만 존재해야 합니다.


<li>

    <p>2013-01-01</p>

    <p><a href="#"><img src="pig.jpg" alt="pig" /></a></p>

    <p>pig pig pig pig </p>

</li>


img:only-of-type

    background-color: rgb(255, 255,255); 

    border: 1px solid rgba(56,41,48, .5); 

    float: left; 

    padding: 3px; 

}




:nth-of-type(n)


같은 부모 밑에 상대적인 순서로 n 번째 오는 타입요소를 선택합니다.






:nth-last-of-type(n)




:first-child




:last-child






Reference site














'Publisher > CSS' 카테고리의 다른 글

CSS3의 구조적인 가상선택자  (1) 2013.03.21
보석같은 CSS3 함수 calc()  (3) 2013.03.11
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2021.02.09 14:47 우연일까 필연일까  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다...





<progress> 요소는 HTML5 에 새로이 추가된 시맨틱 태그입니다.

각 브라우저별로 별도로 디스플레이되는 관계로 디자인 하기가 까다로운것이 사실입니다.

이번에는 이러한 Progress 요소에 CSS를 입히는 방법에 대해서 알아보도록 하겠습니다.


그전에 디자이너라면 알아두어야할 Progress Bar 디자인 35 를 먼저 읽어 보시길 권합니다.



간단한 방법

원본: http://www.hongkiat.com/blog/html5-progress-bar/



마크업

Progress 요소는 다음과 같이 마크업을 작성합니다.


<progress value="10" max="100">

     <strong>Progress : 10% </strong>

</progress>  


일반적으로 위와같이 작성하였을 경우 윈도우와 OS X에서 보이는 화면은 다음과 같이 브라우저 디폴트로 저장됩니다.

굵게 표현된 부분은 Progress Bar의 fall back (대체) 요소로 사용합니다. Progress bar를 지원하지 않는 브라우저를 위한 것인것은 대부분들 다 아시죠?





스타일시트 작성


progress {  

    background-color: #f3f3f3;  

    border: 0;  

    height: 18px;  

    border-radius: 9px;  

}  


그러나 위와 같이 작성하여도 아래와 같이 각 브라우저별로 다르게 화면에 출력됩니다.





파이어폭스에서는 Progress Bar에 스타일은 적용되나 애니메이션이나 Progress Bar의 Value에는 스타일이 적용되지 않으며, 크롬브라우저와 사파리 브라우저는 브라우저의 기본 스타일 및 OS플랫폼의 스타일이 제거되고 Webkit Style이 적용됩니다.


웹킷계열의 브라우저에서는 위의 마크업이 다음과 같이 본연의 요소와 값 요소로 해석됩니다.

<progress>  

    ┗ <div> ::-webkit-progress-bar  

         ┗ <div>::-webkit-progress-value  



따라서 스타일시트도 다음과 같이  Progress 본연의 스타일과 Value값을 별도로 작성해 주셔야 합니다.


progress::-webkit-progress-bar {  

    /* style rules */  

}  

progress::-webkit-progress-value {  

    /* style rules */  



파이어폭스의 경우에는 웹킷계열과 같게 Vendor-prefix 및 가상선택자를 사용하지만 아래와 같이 하나만 쓰는것이 다릅니다.


progress::-moz-progress-bar {  

    /* style rules */  

}   



결론적으로 Progress Bar의 스타일시트를 바꾸시려면 다음과 같이 작성합니다.


progress {  

    /* style rules */  

}  

progress::-webkit-progress-bar {  

    /* style rules */  

}  

progress::-webkit-progress-value {  

    /* style rules */  

}  

progress::-moz-progress-bar {  

    /* style rules */  

}  




애니메이션 처리


애니메이션 처리의 경우 Progress bar의 min 값과 max값을 계산하여 자바스립트로 구현합니다.

jQuery라이브러리를 이용하여 구현할 경우 다음과 같이 마크업을 작성합니다.

0에서 시작하여 max=100 까지 애니메이션을 구현합니다.


<progress id="progressbar" value="0" max="100"></progress>  


스크립트는 setInterval을 이용하여 부드러운 효과를 주기위해 (1000 / max) * 5 ms 마다 구현하도록 합니다.


$(document).ready(function() {  

    var progressbar = $('#progressbar'),  

        max = progressbar.attr('max'),  

        time = (1000/max)*5,      

        value = progressbar.val();  

  

    var loading = function() {  

        value += 1;  

        addValue = progressbar.val(value);  

          

        $('.progress-value').html(value + '%');  

  

        if (value == max) {  

            clearInterval(animate);                      

        }  

    };  

  

    var animate = setInterval(function() {  

        loading();  

    }, time);  

}; 



최종소스 다운로드

source.zip





Progress bar 지원브라우저 현황


 CanIUse.com, 에 따르면 HTML5 progress 요소는 아래 브라우저에서 지원합니다: Firefox 16+, Chrome 8+, Safari 6+ and Opera 11+.









고급 CSS 먹이기

출처: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/




소스다운로드:

progressbar.zip






Reference Site






HTML5의 FileAPI 과 Drag and Drop, XMLHttpRequest 2 를 이용한 파일업로드, 다운로드시 유용하게 사용하시길 바랍니다. ^^*





'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
SVG와 CANVAS사이의 선택  (16) 2010.03.09
HTML5 Gallery  (4) 2009.04.10
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2013.03.04 15:57 신고 아즈키  댓글주소  수정/삭제  댓글쓰기

    간만에 포스팅하셨네요.ㅎ
    그동안 잘 지내셨는지 모르겠네요. 좋은 하루되셔요 ㅎㅎ





CSS(Cascading Style Sheets)는 마크업(HTML)을 자유롭게 표현할 수 있는 웹디자인 언어이다. 현재 CSS Level3는 표준화 작업중이다. 사실 CSS를 공부하려할때 어디서 부터 시작해야 되는지, 혹은 어떻게 이용해야 하는지 궁금해 하는 분들이 많다. CSS3 는 아직 공식적으로 웹표준 권고안이 아니지만 몇몇 브라우저들은 벌써부터 몇가지 기능들을 미리부터 제공하고 있다.특히 jQuery의 DOM Selector를 보면 CSS3 Spec에 명시된 내용을 미리부터 관련 표현들을 사용하고 있다. 그래서 몇가지 CSS3 의 새로운 기능을 미리 살펴보고자 한다. ( 본 포스트는 디자인스팟에서 제공하는 팁을 참조하여 작성하였다. )
 Speaking In Styles : The Fundamentals of CSS for Web Designers에서 언급한 향상된 디자인이라  스타일이 렌더링이 되지 않았을때 대체할수 있도록 비주얼적으로 어필할수 있도록 사용성을 향상시킬수 있는것을 말한다.
각설하고, 몇가지 CSS3 속성으로 아래와 같은 효과들을 얻는 팁을 소개한다.
  • 디자인 향상 예제 : border-radius를 이용하여 박스의 테두리를 둥글게 표현할때 좀더 디자인적으로 어필할 수 있으나 이러한 코너링이 제대로 렌더링 되지 않아도 여전히 해당 웹사이트를 사용할 수 있게 처리한다.

  • 사용성 체감 디자인예제:  백그라운드나 엘리먼트들의 RGBA(Red, Green, Blue, Alpha) 색상값을 이용해 상위 레이어에 위치한 , 즉 z-index값이 높은 요소들을 불투명하게 표시함으로써 아래에 배치된 개체를 미리 볼수 있는 기능을 제공해 줌으로써 사용성을 배가 시킬수 있게 처리한다.

아래 6가지 CSS3 속성값들을 이용하여 지금 바로 여러분의 사이트를 좀더 다양하게 표현해 보자
아래 이미지는 스타일을 적용하기 전의 원본 디자인 표현이다.



최종소스 다운로드 : 지원브라우저 : 사파리4이상, 파이어폭스3.5 이상, 구글크롬1.0 이상




1 투명한 칼라효과
지원브라우저 : 사파리4, 파이어폭스3.0.5, 구글크롬1

RGBA는 텍스트, 백그라운드, 보더, 음영과 관련된 컨트롤들에  특정한 칼라값을 채워넣는 것이다. 보통 색깔값은 #FFFFFF와 같이 16진수형 표현으로 사용되거나 red, blue, navy,orange등과 같이웹에 암묵적으로 명시된 칼라값들을 사용하나 RGB는 0~255까지 범위값으로 표현한다.  추가적으로 A 는 투명도를 표현하는것으로 0(투명transparent)~(불투명:opaque)로 표현한다.
rgba(0-255,0-255,0-255,0-1)


[이미지출처 : 웹디자이너월]

브라우저에 다음과 같이 사용할 수 있다.
.topbox {
    color: rgb(235,235,235);
    color: rgba(255,255,255,0.75);
    background-color: rgb(153,153,153);
    background-color: rgba(0,0,0,0.5);
    border-color: rgb(235,235,235);
    border-color: rgba(255,255,255,0.65);
}

IE에서는 지원되지 않으나 조건(if IE)로 gradient를 구현할수 있다.
<!--[if IE]>
.pretty-box {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000050,
          endColorstr=#00000050);
    zoom:1;
}
<![endif]-->





2  둥근 모서리 효과
지원브라우저 : 사파리3, 파이어폭스1, 구글크롬1

테두리의 코더값은 아래와 같이 radius값으로 지정해 줄수 있다.
border-radius:값



브라우저 호환을 위해 다음과 같이 표현한다.
-webkit-border-radius: 10px;   (사파리나 크롬)
-moz-border-radius: 10px;     (파이어폭스)
border-radius: 10px;

각각 지정해 주려면 다음과 같이 하면 된다.

CSS3

Mozilla

WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius








3. 텍스트 음영(Drop Shadow효과)
지원브라우저 : 사파리3, 파이어폭스3.0.5, 구글크롬1

특정 텍스트 하단에 음영을 추가하기 위해서는 다음과 같이 좌/우측, 위/아래, offset값과, blur효과, 칼라값등과 같이 표현하다.
text-shadow: x y blur color;

[이미지출처 : 웹디자이너월]


음영을 조절하기 위해 다음과 같이 표현한다.
text-shadow: -2px 2px 10px rgba(0,0,0,.5);

여러개 효과를 주려면 아래와같이 콤마(,)로 구현한다.
text-shadow:   
       0 0 10px rgba(0,255,0,.5),
       -10px 5px 4px rgba(0,0,255,.45), 
       15px -4px 3px rgba(255,0,0,.75);





아래 이미지와 같이 표현하기 위해서는
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;  
이 하면 된다.






4. 박스모델의 음영주기
지원브라우저 : 사파리4, 파이어폭스3, 구글크롬1

박스모델에 음영을 주기위해서는 아래와 같이 text-shodow와 같이 표현한다.
box-shadow: x y blur color;

text-shadows와 같이, Mozilla 와 Webkit에서 최종CSS표준에서는 자신만의 문법을 제공한다.
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

멀티음영을 주려면 아래와같이 공백으로 분리하여 컴마(,)로 멀티표현하여 처리한다.
-webkit-box-shadow: 0 0 20px rgb(0,255,0),
        -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0),
         -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0),
         -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);



-moz-box-shadow: 
          -2px -2px 0 #fff,       /*shadow1*/
          2px 2px 0 #bb9595,    /*shadow2*/
          2px 4px 15px rgba(0, 0, 0, .3);  /*shadow3*/





5. 백그라운드이미지 여러개 표현
지원브라우저 : 사파리1.3,  구글크롬1

백그라운드 이미지를 주기위해서 아래 두번째 줄과 같이 콤마(,)로 해당 이미지를 여러개 표현할 수 있다.
background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

background: url(첫번째이미지) 0 0 no-repeat, url(두번째이미지) 10 -20px repeat-x;





6. 박스모델 회전시키기
지원브라우저 : 사파리4, 파이어폭스3.5 구글크롬1

아직 CSS3 표준스펙에는 포함되어 있지 않지만 Webkit과 Mozilla에서는 박스모델 회전을 시키는 속성값이 있다.
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);


rotate속성을 지원하지 않는 브라우저에서는 다음과 같이 표현된다.






정리하자면

위의 css3 의 4가지 룰에 대해서 정리하자면 다음과 같다.(순서주의) 
아래소스는 모든 브라우저에서 호환가능하도록 cross-browsing처리하기 위한 표현들이다 css3에 대해 간단하게 처리하기 위해서는 다음과 같이 css reset 기능들을 가지고 있으면 개발시 유용할것 같다.

/*둥근모서리 표현*/
.box_round {
     -moz-border-radius: 12px; /* FF1+ */
     -webkit-border-radius: 12px; /* Saf3+, Chrome */
      border-radius: 12px; /* Opera 10.5, IE 9 */
}


/*박스음영*/
.box_shadow {
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
  filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
}

/*백그라운드 그라디언트*/
.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444)
                             ,color-stop(1, #999999)); /* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
         /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
        /* IE8 */
}


/*투명효과*/
.box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490');
         /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490'
                 ,endColorstr='#99B4B490')"; /* IE8 */
}


/*박스모델 회전*/
.box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+
  -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8
}


/*웹폰트*/
@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6+ */
  src: local('?'),
        url('myfont.woff') format('woff'),  /* FF3.6 */
        url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,Opera10+ */
}


CSS3 향후지원할 BOX Model 에 대한 흥미로운 포스트가 있어 소개합니다.

'Publisher > CSS' 카테고리의 다른 글

간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Firefox에서 링크 점선 없애기  (2) 2010.03.06
CSS로 만든 3D입체 이미지  (6) 2009.12.31
CSS 이용한 Text를 이미지로 대체하기  (3) 2009.11.16
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요