본문 바로가기

HTML&CSS

HTML+CSS 기초 강의 - 25. CSS 선택자 기초 2 - 클래스와 가상클래스의 조합



a, a:link, a:visited, a:hover

링크 태그(<a></a>)는 중요하기 때문에 따로 분리해서 CSS선택자를 설명합니다.

선택자 뒤에 콜론(:)으로 구분해 추가되는 단어를 가상 클래스라고 하며, 선택된 요소의 특정 상태를 가리키는데 사용됩니다. 

예를 들어 a:hover 클래스 정의는 하이퍼링크 a 태그 위에 마우스 커서가 위치했을 때의 상태를 나타내는 것으로

hover는 이 상태를 가리키는 가상클래스 이름입니다.



태그/클래스:가상클래스(상태)


이런식으로 표기합니다.


링크 태그는 다른 태그들과 달리 전용으로 사용하는 하위 상태를 여러개 가지고 있습니다.


a 와 a:link는 CSS 속성 정의할 때 같은 것으로 간주합니다.

a:hover 는 링크 태그(<a></a>) 위로 마우스 커서를 위치했을 때의 상태를 나타냅니다.

a{color:#a00} 과 a:link{color:#a00} 은 같은 결과를 나타냅니다.

a:visited 는 방문한 링크(한번 이상 클릭)를 나타냅니다.


:hover 는 링크 태그 뿐만 아니라 일반 태그에도 사용할 수 있는 상태입니다. 뒤에서 따로 설명합니다.



클래스/태그 + 클래스/태그


+ 기호로 클래스/태그 를 2개 이상 나열해 정의합니다. 인접한 두 태그의 뒤쪽 태그를 선택할 때 사용합니다.

예를 들어


ul p{color:#a00}


으로 정의하며

ul 태그 바로 다음에(하위가 아니라) 오는 p태그에 빨강색을 적용합니다.

인접 태그 적용이기 때문에 ul 과 p 태그 사이에 다른 태그가 오면 해당 CSS는 적용되지 않습니다.

일종의 조건부 적용이라고 이해하면 됩니다.


클래스/태그 > 클래스/태그

알 클래스/태그 바로 밑의 1뎁스 하위 클래스/태그에 속성을 적용합니다. 1뎁스 외에 2뎁스 이하 클래스/태그에는 적용되지 않습니다.

예를 들어


div > p{color:#a00}


으로 정의 했다면


<div>
<p>문단1</p>
<div>
<p>문단2</p>
</div>
<p>문단3</p>
</div>


섹션에서 문단1과 문단3에는 컬러 속성(color:#a00)이 적용되지만 문단2에는 컬러 속성이 적용되지 않습니다.



클래스/태그 ~ 클래스/태그

앞 클래스/태그 선택자 뒤에 오는 모든 뒷 선택자(클래스/태그)에 속성을 적용합니다.

+ 조합은 바로 뒤에 인접해 오는 첫번째 클래스/태그에만 적용되지만, ~ 태그는 바로 인접하지 않아도 뒤에 오는 모든 태그/클래스에 영향을 미칩니다.

+ 와 마찬가지로 동위(형제) 태그에만 적용되며, 하위 태그에는 영향을 주지 않습니다.


예를 들어


div ~ p{font-color:#a00}


로 CSS를 정의했다면


<div></div>
<ul></ul>
<p>
문단1
<p>문단2</p>
</p>
<p>문단3</p>
<p>문단4</p>


섹션에서는 문단1, 문단3, 문단4에만 컬러 속성이 적용됩니다.




< 이전강의 다음강의 >



닫기