CSS3 선택자란?
- 특정한 HTML 태그를 선택할 때 사용하는 기능
- 해당 태그에 원하는 스타일 또는 기능을 적용하기 위해 사용
ex) h1{ color : red; } = 선택자 { 스타일 속성 : 스타일 값; }
이러한 코드를 CSS 블록이라고 부르고 style 태그 내부에 입력해 사용.
전체 선택자
| 선택자 형태 | 설명 |
| * | HTML 페이지 내부의 모든 태그 선택 |
- 모든 웹 페이지에서 빠지지 않고 사용하는 선택자.
- body 태그 뿐만 아니라 html, head, title, style 태그까지 전부 선택하여 적용 함.
태그 선택자
| 선택자 형태 | 설명 |
| 태그 | 특정한 태그를 선택 |
- 특정 종류의 태그를 모두 선택할 때 사용하는 선택자.
ex) h1 { color : red; } , p { color : blue; }
여러개의 선택자 적용
- 여러개의 선택자를 한꺼번에 선택할 때에는 쉼표를 사용.
ex) body, p, h1, h2, h3 { margin : 0; padding : 0; }
아이디 선택자, 클래스 선택자
| 선택자 형태 | 설명 |
| #아이디 | 아이디 속성을 가지고 있는 태그를 선택 |
| .클래스 | 특정한 클래스를 가지고 있는 태그를 선택 |
- 스타일시트에서 가장 많이 사용하는 선택자로 웹 페이지의 레이아웃을 구성하고 디자인을 적용할 때 사용되는 태그.
- 아이디 선택자는 특정한 하나의 태그를 선택할 때 사용하므로 웹 페이지 내부에서 중복되면 안됨.
- 클래스 선택자는 웹 페이지를 개발할 때 가장 많이 사용하는 선택자.
<style>
#rint {color:red;} // 아이디 선택자
.select{color:red;} // 클래스 선택자
li.select{color:red;} // 태그 선택자와 클래스 선택자
</style>
<body>
<h1 id="rint"> Hello World </h1>
<li class="select"> Hello Class </h1>
</body>- 클래스 선택자를 태그 선택자와 같이 사용하면 더 정확하게 태그를 선택할 수 있음.
기본 속성 선택자
| 선택자 형태 | 설명 |
| 선택자[속성] | 특정한 속성이 있는 태그를 선택 |
| 선택자[속성=값][속성=값] | 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택 |
- 속성 선택자는 기본 속성 선택자와 문자열 속성 선택자로 나눌 수 있으며, 기본 속성 선택자는 많이 사용하지만 문자열
속성 선택자는 특별한 경우에만 사용.
<style>
input[type="text"] {background: red;}
input[type="password"] {background: blue;}
</style>
<body>
<input type = "text" />
<input type = "password" />
</body>- input 태그는 type 속성값에 따라 형태가 달라지기 때문에 기본 속성 선택자를 많이 사용함.
후손 선택자, 자손 선택자
- 자손 선택자 : 태그 바로 한 단계 아래에 위치한 태그
- 후손 선택자 : 태그 아래에 위치한 모든 태그
| 선택자 형태 | 설명 |
| 선택자A 선택자B | 선택자A의 후손에 위치하는 선택자B를 선택 |
| 선택자A > 선택자B | 선택자A의 자손에 위치하는 선택자B를 선택 |
- 후손 선택자
<style>
#header h1 {color : red;}
/* id 속성값으로 header를 가지는 태그의 후손 위치에 있는 h1 태그의 color 속성에 red 키워드를 적용*/
#section h1 {color : blue;}
/* id 속성값으로 section을 가지는 태그의 후손 위치에 있는 h1 태그의 color 속성에 blue 키워드를 적용*/
</style>- 자손 선택자
<style>
#header > h1 {color : red;}
/* id 속성값으로 header를 가지는 태그의 자손 위치에 있는 h1 태그의 color 속성에 red 키워드를 적용*/
#section > h1 {color : blue;}
/* id 속성값으로 section을 가지는 태그의 자손 위치에 있는 h1 태그의 color 속성에 blue 키워드를 적용*/
</style>- table 태그를 선택할 때에는 자손 선택자를 사용하는 것이 좋지 않음.
HTML 페이지의 계층 구조를 살펴보면 table 태그에 tbody 태그가 자동으로 추가되어 스타일 속성이 적용되지 않기 때문.
동위 선택자
| 선택자 형태 | 설명 |
| 선택자A + 선택자B | 선택자A 바로 뒤에 위치하는 선택자B를 선택 |
| 선택자A ~ 선택자B | 선택자A 뒤에 위치하는 선택자B를 선택 |
- CSS3 애니메이션을 사용해 동적으로 움직이는 레이아웃을 구성할 때 동위 선택자를 사용.
반응 선택자
| 선택자 형태 | 설명 |
| :active | 사용자가 마우스로 클릭한 태그를 선택 |
| :hover | 사용자가 마우스로 올린 태그를 선택 |
- 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자
<style>
h1:hover {color:red;}
h2:active {color:blue;}
</style>
상태 선택자
| 선택자 형태 | 설명 |
| :checked | 체크 상태의 input 태그를 선택 |
| :focus | 초점이 맞추어진 input 태그를 선택 |
| :enabled | 사용 가능한 input 태그를 선택 |
| :disabled | 사용 불가능한 input 태그를 선택 |
- 입력 양식의 상태를 선택할 때 사용하는 선택자.
- checked : type 속성값이 checkbox, radio인 input 태그가 선택된 상태를 의미
- focus : 웹 페이지 하나당 하나의 input 태그에만 초점을 맞출 수 있음
- enabled는 input 태그가 사용 가능한 상태를 나타내고, disabled 는 input 태그가 사용 불가능한 상태를 나타냄.
구조 선택자
| 선택자 형태 | 설명 |
| :first-child | 형제 관계 중에서 첫 번째에 위치하는 태그를 선택 |
| :last-child | 형제 관계 중에서 마지막에 위치하는 태그를 선택 |
| :nth-child(수열) | 형제 관계 중에서 앞에서 수열 번째에 위치하는 태그를 선택 |
| :nth-last-child(수열) | 형제 관계 중에서 뒤에서 수열 번째에 위치하는 태그를 선택 |
<style>
li:first-child {border-radius: 10px 0 0 10px;}
li:last-child {border-radius: 0 10px 10px 0;}
li:nth-child(2n) {background-color: #FF0003;} // 수열 2n : 짝수
li:nth-child(2n+1) {background-color: #800000;} // 수열 2n+1 : 홀수
</style>
형태 구조 선택자
| 선택자 형태 | 설명 |
| :first-of-type | 형제 관계 중에서 첫 번째로 등장하는 특정 태그를 선택 |
| :last-of-type | 형제 관계 중에서 마지막으로 등장하는 특정 태그를 선택 |
| :nth-of-type(수열) | 형제 관계 중에서 앞에서 수열 번째로 등장하는 특정 태그를 선택 |
| :nth-last-of-type(수열) | 형제 관계 중에서 뒤에서 수열 번째에 등장하는 특정 태그를 선택 |
문자 선택자
| 선택자 형태 | 설명 |
| ::first-letter | 첫 번째 글자를 선택 |
| ::last-letter | 첫 번째 줄을 선택 |
- 태그 내부 특정 조건의 문자를 선택하는 선택자.
전후 문자 선택자
| 선택자 형태 | 설명 |
| ::after | 태그 뒤에 위치하는 공간을 선택 |
| ::before | 태그 앞에 위치하는 공간을 선택 |
- 특정 태그의 전후에 위치하는 공간을 선택하는 선택자
반응 문자 선택자
| 선택자 형태 | 설명 |
| ::selection | 사용자가 드래그한 글자를 선택 |
링크 선택자, 부정 선택자
| 선택자 형태 | 설명 |
| :link | href 속성을 가지고 있는 a 태그를 선택 |
| :visited | 방문했던 링크를 가지고 있는 a 태그를 선택 |
| :not(선택자) | 선택자를 반대로 적용 |
<style>
/* input 태그 중에서 type 속성값이 password가 아닌 태그의 background 속성에 red 키워드를 적용 */
input:not([type=password]){
background: red;
}
</style>'개념공부 > FrontEnd' 카테고리의 다른 글
| React 개념 및 TIC TAC TOE 만들기 (0) | 2021.12.27 |
|---|---|
| Javascript 객체 및 객체의 종류 (0) | 2021.12.13 |
| HTML5 개요 및 기본 태그 (0) | 2021.12.10 |
| [Vue.js] Vue.js란 무엇인가? (0) | 2021.11.04 |
| [JavaScript] `(백틱) 을 이용한 Template literals ${} 데이터 추출 (2) | 2021.11.03 |
댓글