이번 장에서는 CSS의 선택자 (Selector)에 대해서 알아보겠습니다!
일단, 선택자의 정의에 대해 알아보겠습니다.
◈ 선택자 (Selector)
-> CSS를 적용시키기 위해 요소(대상)를 지정할 때 사용하는 것입니다.
선택자에는 다양한 종류가 있는데 저희는 이번 장에서 제일 기본이 되는 선택자들에 대해 학습해보겠습니다.
처음 배울 선택자는 전체 선택자입니다.
◈ 전체 선택자
-> 모든 요소를 선택하는 선택자
기본 구조 : * {
contents;
}
전체 선택자는 말 그대로 모든 요소를 선택하게 됩니다.
전체 선택자를 이용해 모든 요소에 teal이라는 색을 입혀보도록 하겠습니다!
See the Pen QWGgXrv by JaeyongLee (@jaeyonglee960212) on CodePen.
이해가 되셨나요?
진짜 모든 요소의 색깔을 바꾸게 된답니다!
두 번째 선택자는 바로 유형 선택자입니다.
◈ 태그 선택자
-> 태그를 선택하는 선택자
기본 구조 : 태그 {
contents;
}
태그 선택자는 <div> <body> 같은 태그를 선택하는 선택자입니다.
이번에는 body 태그를 선택해 보라색 배경을 입혀 보겠습니다 :) (아마 자주 보셨을 거예요!)
See the Pen wvoeVMq by JaeyongLee (@jaeyonglee960212) on CodePen.
자주 보셨죠? 제가 예전에 썼던 글들을 보시면 바로 찾으실 수 있으실 겁니다 :)
세 번째로 다룰 선택자는 바로 클래스 선택자입니다.
◈ 클래스 선택자
-> 클래스 특성을 가진 모든 요소를 선택하는 선택자
기본 구조 : . 클래스명 {
contents;
}
클래스 선택자는 클래스 특성을 가진 모든 요소를 선택하는 선택자입니다.
클래스 특성을 가진 요소라 함은 <div class="school"></div>에서 school입니다.
클래스를 선택할 때에는 앞에. 을 붙이고 클래스명을 적으면 된답니다!
ex). school { color:blue; }
이런 식으로 말이죠!
클래스 선택자는 선택한 클래스 속성을 가진 모든 요소를 선택해서 변경할 수 있습니다.
직접 보여드리겠습니다!
See the Pen xxRrvdx by JaeyongLee (@jaeyonglee960212) on CodePen.
이제 조금 이해가 되시나요?
change라는 클래스를 가진 요소는 빨간색으로 변경하였고,
change2라는 클래스를 가진 요소는 황금색으로 변경하였습니다.
마지막으로 다룰 선택자는 바로 ID 선택자입니다.
◈ 아이디 선택자
-> 아이디 특성을 가진 요소를 선택하는 선택자
기본 구조 : #아이디명 {
contents;
}
아이디 선택자는 아이디 특성을 가진 요소를 선택하는 선택자입니다.
클래스와는 달리 하나의 아이디만을 선택해서 적용하는데 그건 바로 클래스와 아이디의 특성 차이에 있습니다.
클래스와 아이디의 특성에 관해서는 다음 장에서 다루도록 하고,
아이디 선택자는 어떻게 사용하는지 보여드리겠습니다!
See the Pen mdOwNXw by JaeyongLee (@jaeyonglee960212) on CodePen.
이해가 되셨죠?
지금 여러분을 헷갈리게 하는 것이 있다면 바로 클래스와 아이디일 텐데요,
그 부분에 대해서는 제가 다음 장에서 설명해드리겠습니다!
이번 장에서는 신기한 선택자에 대해 알아보았습니다.
내가 원하는 요소만 골라서 디자인하고 싶을 때 정말 유용하게 쓰이겠죠?
다음 장에서는 CSS의 클래스와 ID를 비교하는 시간을 가지도록 하겠습니다!
그럼 다음 장에서 봐요~~~
'css' 카테고리의 다른 글
| <css 공부> 6장. 디스플레이 - 블록, 인라인 (0) | 2021.02.24 |
|---|---|
| <css 공부> 5장. 클래스와 아이디 (0) | 2021.02.22 |
| <css 공부> 3장. 색깔 입히기 (0) | 2021.02.16 |
| <css 공부> 2장. CSS 적용 방법 (0) | 2021.02.14 |
| < css 공부 > 1장. CSS란? (0) | 2021.02.11 |