<CSS3 선택자의 종류와 형태, 의미 첫번째>
| 종류 | 형태 | 사용 예 | 사용 예의 내용 |
| 전체 선택자 | * | * { } | 문서 전체에 효과를 줌 |
| 타입 선택자 | 태그 이름만 | p(꺽쇠없이 p태그 이름만) { } | p태그에 효과를 줌 |
| 아이디 선택자 | # 아이디 이름 | #students(작성자가 설정한 id이름) { } | 무슨 태그에 있던 students라는 id이름 붙여진 것에 효과를 줌 |
| 클래스 선택자 | . 클래스 이름 | .teacher(작성자가 설정한 class이름) { } | teacher이라는 class이름이 붙여진 클래스에 효과를 줌 |
| 속성 선택자 | 선택자[속성 =값] | a[title = "food"] | a태그에 title 속성의 속성값이 딱 food인 것을 선택해 효과를 줌 |
| 선택자[속성 ~=값] | a[title ~= "food"] | a태그에 title 속성의 속성값이 food이거나 앞 뒤 상관없이 공백포함한 food인 것(ex. slow food/ food store)을 선택해 효과를 줌 | |
| 선택자[속성 |=값] | a[title |= "food"] | a태그에 title 속성의 속성값이 food이거나 food와 하이픈(-)로 만들어진 합성어(ex. food-stylist)를 선택해 효과를 줌 | |
| 선택자[속성 ^=값] | a[title ^= "food"] | a태그에 title 속성의 속성값이 food이거나 food로 시작하는 것은 공백, 하이픈, 언더바, 합성어 상관없이 모두 선택해 효과를 줌 | |
| 선택자[속성 $=값] | a[title $= "food"] | a태그에 title 속성의 속성값이 food이거나 food로 끝나는 것은 공백, 하이픈, 언더바, 합성어 상관없이 모두 선택해 효과를 줌 | |
| 선택자[속성 *=값] | a[title *= "food"] | a태그에 title 속성의 속성값이 food이거나 food가 들어가는 것은 공백, 하이픈, 언더바, 합성어, 그리고 시작하거나 끝나는 것에 상관없이 모두 선택해 효과를 줌 |
(가상 클래 선택자와 가상 요소 선택자는 추후에 보충하겠다.)
˙ 바로 하위에 바로 나오는 것은 자식(Child)이라고 하고,
자식을 포함하여 그 이하의 모든 하위 부분을 통칭해서는 후손(/자손 Descendant)이라고 지칭한다.
▣ 생초보 길라잡이 ▣
가뜩이나 초보인데.. 생초보인 내가 간지러웠던 부분을 소개해 드립니다.
- 요소? 태그? 도대체 뭐가 뭔거야??
하위 요소, 부모 요소, 자식 요소 등에서 말하는 요소라는 것은, 태그 포함, 그 안에 감싸져 있는 모든 내용이나 명령어들을 통칭하여 지칭한다. 반면, 태그라는 것은 <head>, <h1>, <p>, <div> 등과 같이 꺽쇠(<>)로 표시되어 있는 부분으로 요소의 의미보다 보다 좁은 의미로 단순히 태그라는 사인(sign) 자체를 이야기하는 것이다.
따라서, 무슨 무슨 요소라고 하면 태그(<>)을 포함한 그 안의 내용을 얘기한다고 생각하면 된다.
▣ 기본기를 탄탄히 하자! ▣
그거 쉬운거 아냐? 노노~ 피가 되고, 살이 된다! 기본적인 개념부터 다시 짚어보자.
-선택자는 왜 배우는거지? 어떤 의미인거지?
웹페이지의 단순해 보이는 HTML 요소들을 아름답게 치장하고 꾸며줄 수 있는 CSS.
그 CSS를 통하여 HTML의 요소들의 스타일을 지정해 줄 수 있는데, 이 때 스타일을 지정하려는 HTML 각각의 요소들을 구별하여 어느 부분을 어떻게 꾸밀건지에 대한 명령을 내리기 위해 선택자가 필요한 것이다. 이러한 선택자를 이용할 때에 스타일을 지정할 요소를 선택함에 있어 세밀해지고 정밀해질 수 있는 것이다. 결합자를 이용하여 정밀하게 접근해가는 법은 추후 추가해 작성하겠다.
'컴퓨터 사이언스 > TIL 정리' 카테고리의 다른 글
| [프론트엔드][CSS] TIL -Day 11.1 @-규칙 (0) | 2022.04.11 |
|---|---|
| [프론트엔드][일반]TIL -Day 10.1 깃 설치하기 1 (0) | 2022.04.08 |
| [프론트엔트][CSS] TIL - Day 7 폰트 사이즈, 인라인 형식 vs 블록 형식 (0) | 2022.04.05 |
| [프론트엔트][CSS][HTML] TIL - Day 6 수업노트 끄적임 (0) | 2022.04.04 |
| [프론트엔드][CSS][HTML] TIL -Day 5.2 익숙해지면 좋은 단축키들 (0) | 2022.04.03 |
