블로그 이미지

카테고리

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

최근에 달린 댓글

'css3 pseudo selector'에 해당되는 글 1건

  1. 2013.03.21 CSS3의 구조적인 가상선택자 (1)


요즘 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 우연일까 필연일까  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다...