Day62 - [css] 선택자

이번에는 css의 선택자에 대해서 알아 봅시다.

 

선택자

선택자는 어디에 css를 적용할 것인지 선택하는 것을 말합니다.

 

전역선택자

파일의 모든 곳을 선택하는 방법입니다.

 

* 를 사용 합니다.

 

ex) * { margin : 0; font-size : 15; }

 

태그선택자

태그를 선택하는 방법입니다.

 

선택자가 들어가는 자리에 태그 이름을 사용 합니다.

 

ex) p { color: red; }

 

다중선택자

여러가지 선택자를 선택하는 방법입니다.

 

, 를 사용 합니다.

 

ex) p , div { color: blue; }

 

하위선택자

위의 그림과 같이 있을 때, <p> 태그는 <div> 의 하위에 있다고 생각하시면 됩니다.

 

공백(스페이스바) 로 사용 합니다.

 

ex) div p { color: red; }

자식선택자

위의 그림과 같이 있을 때, <section> 태그의 아래 있는 <p> 태그, <ul> 태그를 자식이라고 합니다.

 

> 를 사용 합니다.

 

ex) section > p { color : blue; }

아이디선택자

특정한 id 값을 주어서 해당 id 를 가진 태그에만 스타일 을 주는 방법 입니다.

 

id는 고유 합니다.

# 을 사용합니다.

클래스선택자

특정한 class 값을 주어서, 해당 class 를 가진 태그에만 스타일 을 주는 방법 입니다.

 

class 는 여러 곳에 동일하게 줄 수 있습니다.

 

. 을 사용합니다.

※ 응용

특정 속성을 가진 태그 선택

input 태그처럼 특정한 type 을 가진 것을 선택하는 방법 입니다.

 

태그 뒤에 [type="속성"] 을 사용합니다.

특정 속성을 하나라도 포함한 태그선택

class 의 이름을 부분적으로 똑같이 준 다음

태그 뒤에 [class*="name"] 을 사용합니다.

가상선택자

가상선택자 는 여러가지가 있지만, 그 중에서 자주 사용하는 3가지에 대해서 알아 봅시다.

 

hover -> 마우스가 닿을 때

focus -> 포커싱이 되었을 때 ( input 태그의 경우. 해당 란에 입력할 때 )

active -> 활성화 되었을 때 ( 클릭하고 있을 때 or 클릭했을 때 )