반응형
※ CSS 선택자란?
CSS3 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능이다. 선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있다.
1. 전체 선택자
| 선택자 형태 | 설명 |
| * | HTML 페이지 내부의 모든 태그를 선택한다. |
2. 태그 선택자
태그 선택자는 HTML 페이지 내부에서 특정 종류의 태그를 모두 선택할 때 사용한다.
| 선택자 형태 | 설명 |
| 태그 | 특정한 태그를 선택한다. |
<style>
/* h1 태그의 color 속성에 red 키워드를 적용한다 */
h1 { color : red; }
/* p 태그의 color 속성에 blue 키워드를 적용한다 */
p { color : blue: }
</style>
3. 아이디 선택자
아이디 선택자는 특정한 id 속성을 가지고 있는 태그를 선택할 때 사용하는 선택자이다.
| 선택자 형태 | 설명 |
| #아이디 | 아이디 속성을 가지고 있는 태그를 선택한다 |
웹 표준에 "id 속성은 웹 페이지 내부에서 중복되면 안 된다"라는 규정이 있으므로 아이디 선택자는 특정한 하나의 태그를 선택할 때 사용한다. 일반적으로 공간 분할 태그에 id 속성을 적용하고 레이아웃을 구성한다.
4. 클래스 선택자
클래스 선택자는 특정한 클래스를 가지고 있는 태그를 선택할 때 사용하는 선택자이다.
| 선택자 형태 | 설명 |
| .클래스 | 특정한 클래스를 가지고 있는 태그를 선택한다. |
5. 기본 속성 선택자
input 태그는 이름이 모두 input 이지만 type 속성값에 따라 형태가 달라진다. 따라서 input 태그를 선택할 떄는 기본 속성 선택자를 많이 사용한다.
| 선택자 형태 | 설명 |
| 선택자 [속성] | 특정한 속성이 있는 태그를 선택한다. |
| 선택자 [속성=값][속성=값] | 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택한다. |
<style>
input[type=text] {background : red; }
</style>
<form>
<input type="text">
</form>※ 후손 선택자와 자손 선택자
div 태그를 기준으로 바로 한 단계 아래에 위치한 태그를 자손이라고 부르고 div 태그 아래에 위치한 모든 태그를 후손이라고 부른다.
1. 후손 선택자
후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자이다.
| 선택자 형태 | 설명 |
| 선택자A 선택자B | 선택자A의 후손에 위치하는 선택자B를 선택한다. |
2. 자손 선택자
자손 선택자는 특정 태그 아래에 있는 자손을 선택할 때 사용하는 선택자이다.
| 선택자 형태 | 설명 |
| 선택자A > 선택자B | 선택자A의 자손에 위치하는 선택자B를 선택한다. |
※ 반응 선택자
반응 선택자는 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자이다. 사용자가 마우스를 특정한 태그 위에 올리면 hover 상태가 적용되고 클릭하면 active 상태가 적용된다.
| 선택자 형태 | 설명 |
| :active | 사용자가 마우스로 클릭한 태그를 선택한다. |
| :hover | 사용자가 마우스를 올린 태그를 선택한다. |
Reference
 |
|
반응형
댓글