CSS

게시글 'CSS 선택자(Selector) - 동적 선택자'에 대한 정보
CSS 선택자(Selector) - 동적 선택자
등록일 2010-04-05 조회 5,083
동적 선택자
- :link, :visited, :hover, :active, :focus 수도 클래스
- :first-child 수도 클래스
- :first-line, :first-letter 수도 클래스


CSS는 선언적인 특성을 가지고 있기 때문에 문서에 동적으로 스타일을 적용하기는 힘들지만 pseudo class, pseudo element라는 것을 제공함으로써 몇가지 경우에 있어서는 동적으로 스타일을 적용 할 수 있다. 첫번째 엘리먼트라든가 첫번째 글자 등을 따로 선택한다든가 마우스 액션에 따른 스타일을 적용한다든가 하는 것을 이를 이용해서 할 수 있다.


:link, :visited, :hover, :active, :focus 수도 클래스

:link, :visited 수도 클래스는 이미 대부분의 사람들이 사용하고 있는 수도 클래스 이다.바로 링크가 되어 있는 엘리먼트와 방문한 링크를 선택할 수 있는 수도 클래스 인데, 수도클래스는 이와 같이 순차적으로 적용되는 것이 아니고 특정 조건을 가진 엘리먼트를 선택
해 올 수 있는 기능을 제공한다.
:hover와 :active 수도 클래스는 마우스의 사용과 함께 보다 다양한 스타일 적용을 할 수있게 해 준다. MSIE에서는 이 수도클래스가 <a>에서만 작동을 해서 링크 스타일 외의 사용은 많지 않지만 대부분의 브라우져들은 이 수도클래스를 <a>이외의 엘리먼트에도 사용할 수 있다. 예를 들어서 <tr>에 마우스가 오버되었을때 컬러를 바꾸는 것을 :hover를 이용해서 표현이 가능하다.
tr:hover td {
background: #eee;
}
이와같이 하면 마우스가 올라갔을때 배경색이 바뀌는 기능을 javascript를 사용하지 않고 CSS만으로 구현할 수 있다.
이보다 더 유용한 것으로 :focus 수도 클래스가 있다. 이 수도 클래스는 엘리먼트에 포커스가 이동되어 왔을 때를 선택 할 수 있다. 이를 <input>이나 <select>등에 적용하면 사용자는 자신의 포커스가 현재 어디에 있는지 화면상에서 확실하게 알 수 있다. 아래의 회
원가입 폼을 보면 현재의 포커스가 이동해 있는 성명 부분의 <input>의 배경 색이 다른것들과 다른 것을 볼 수 있다.


:first-child 수도 클래스

:first-child 수도 클래스는 첫번째 엘리먼트를 선택해 옴으로써 디자인 적용에 동적인 기능을 제공한다. 위의 리스트 디자인을 보면 각 항목간에 구분선이 있는 것을 볼 수 있다. <li> 엘리먼트에border-top 속성을 이용해서 구현을 할 경우 처음 나오는 리스트 항목에도 위에 줄이 생겨서 원하는 결과를 얻기는 힘들다. 그래서 이와 같은 경우 첫번째 항목에만 특정 class를 적용한다든가 해서 해결을 하게 된다.하지만 이 리스트가 동적으로 생성되는 것이라면 첫번째 항목과 나머지 항목들을 구분하기 위해서 서버사이드나 클라이언트 사이드에서 별도의 작업을 해 주어야 한다. 이러한 추가 작업을 :first-child 수도 클래스를 사용하면 간단히 CSS만으로 구현할 수 있다.

<style type="text/css">
li {
border-top: 1px solid #999;
padding: 0.2em 0;
}
li:first-child {
border-top: 0 none;
}
</style>

이와 같이 :first-child 수도 클래스를 사용하면 추가적인 로직 작업 없이 HTML과 CSS만으로 간편하게 원하는 디자인을 적용 할 수 있다. IE6는 아직 구현되어 있지 않다.


:first-line, :first-letter 수도 클래스

:first-line, :first-letter 수도 엘리먼트는 :first-child 수도 클래스와 비슷한 기능을 가지고 있다. :first-child 수도 클래스가 첫번째 나오는 하위 항목을 선택하는 것과 비슷하게 :first-line 수도 클래스는 첫번째 라인을, :first-letter 수도 클래스는 첫번째 글자를 선택할 수 있다. 차이가 있다면 수도 클래스의 경우는 기존에 생성되어 있는 엘리먼트를 선택해 오지만 수도 엘리먼트의 경우는 코드상에는 별도의 엘리먼트가 없지만 마치 다른 엘리먼트로 구별 되어 있는 것 같이 해당하는 엘리먼트를 생성해서 선택해 온다.


문단의 첫번째 글자인 "원"자의 클씨 크기를 크게 하고 문단의 첫번째 줄에 밑줄이 그어져 있다. 이러한 디자인을 적용하기 위해서 아래와 같은 코드를 작성해서 별도의 클래스를 적용해 주어야 한다.
<p><span class="first-line"><span class="first-child">원</span>칙은..

:first-line 수도 엘리먼트와 :first-letter 수도 엘리먼트를 사용하면 위와 같이<span> 엘리먼트를 삽입한 것과 같은 효과를 CSS만으로 구현 할 수 있다.

<style type="text/css">
p {
margin: 3em;
line-height: 1.6em;
font-family: AppleMyungJo, serif;
}
p:first-line {
text-decoration: underline;
}
p:first-letter {
float: left;
font-weight: bold;


font-size: 3.5em;
}
</style>