이번에는 선택자에 대해서 알아보도록 할 거에요.
선택자가 어떻게 구성되어있는지부터 먼저 알아보도록 할게요~!
여기에서 p가 선택자이고 중괄{}를 열고 닫는 것을 블록이라고 해요.
color:red;이렇게 ;(세미콜론)이 하나 찍히기까지의 단위를 하나의 선언이라고 하고, 하나의 선언에는 속성(property)와 속성값(value)가 포함되어 있어요!
선택자로는 HTML의 요소를 선택하고 {}내에 속성값을 지정하여 다양한 style을 지정하면 되겠죠
또한 여러개의 위에서 처럼 여러개의 프로퍼티를 연속해서 지정할 수 있으며 프로퍼티간의 구분은 세미콜론으로 해요!
속성은 표준 스펙으로 지정되어있는것을 사용하고, 사용자가 임의로 정의할 수는 없어요.
값은 해당 속성에 사용할 수 있는 값을 키워드나 크기단위 또는 색상 단위 등의 특정단위로 지정할 수 있어요.
선택자에는 여러가지가 있는데 차근차근 알아보도록 할게요!
1.단일 선택자
1)전체선택자(*)
말 그대로 모든 요소를 선택하는 것을 의미해요. *는 all(모두)를 의미한답니다.
2)태그선택:태그 이름을 그대로 붙여주면 됩니다.
3)클래스 선택자(.classname): HTML의 요소에서 시작태그 안에 클래스라는 속성을 지정할 수 있습니다. ".(클래스이름)"으로 사용하는 것이 클래스 선택자입니다!
사진을 보면 html파일에서 li태그와 span태그에 orange라는 클래스를 부여했고 이를 css파일에서 .orange를 선택자로 언급하면서 orange라는 클래스를 갖는 요소에 색을 빨간색으로 스타일을 지정했음을 알 수 있겠죠?
4)ID선택자(#idname): 시작태그에서는 class뿐만 아니라 id라는 속성도 지정할 수 있어요! 이때 특정 id를 갖는 요소에 스타일을 지정하고 싶다면 #(idname)으로 지정해 볼 수 있습니다!
⭐Class 와 id의 비교
id 특성의 값이 공백(스페이스나 탭 등)을 포함해서는 안됩니다. 공백으로 값을 구분하는 class 속성과 달리, 하나의 요소는 하나의 ID만 가질 수 있습니다. 만약 ID에 공백을 넣는다면, 브라우저는 그 공백마저 ID의 일부로 취급합니다.
<!-- class와 id의 올바른 사용
1. 🆗한 요소에 여러 클래스를 사용: 공백으로 구분 -->
<p class="hello hi meet">안녕하세요</p>
<!-- 2. 🆗한 요소에 하나의 아이디를 사용 -->
<p id="my-hello">안녕하세요</p>
<!-- 3.🆗한 요소가 여러 클래스와 하나의 아이드를 사용 -->
<p class="hello hi meet" id="your-hello">안녕하세요</p>
<!-- 4. ❌한 요소가 여러 개의 아이디를 사용 -->
<p id="one two">안녕하세요</p>
2. 복합선택자
특수한 요소를 호출하고 싶을 때, 기본 선택자만으로는 선택이 불가능한 경우에 사용하는 것이 복합선택자입니다.
선택자가 여러개의 요소에 적용 될 경우 조금 더 세부적으로 선택해야 하는 상황에서 사용하는 것이 복합선택자 입니다!
1)하위 선택자(선택자√선택자)
여기에서 div .orange를 선택자로 사용하면 div태그 아래에 있는 orange라는 클래스를 속성으로 갖는 요소들에만 스타일이 적용되고 div바깥쪽에 있는 맨 마지막 줄의 orange클래스 속성을 갖는 span태그의 요소에는 스타일이 적용되지 않습니다.
2)자식 선택자(>): (바로 한단계 밑에 있는)자식에만 스타일을 적용하고 싶을 때 사용합니다.
이를 적용하기 위해서 먼저 HTML의 계층구조를 먼저 한번 이해해 볼게요~
HTML에서 부모,자식은 바로 한단계를 의미하고, 조상과 후손은 한단계~그이상을 의미해요!
그러니까 여기에서 ul과 li는 부모와자식관계이지만, div와 ul은 조상과 후손 관계라고 볼 수 있어요!
이때, ul>.orange를 해주면 .orange를 했을 때와는 달리 ul의 자식중에서 orange클래스 속성을 갖는 li태그에만 스타일이 적용되겠죠?
3)인접 형제 선택자(+)
예를 들어서 h1+ul{}와 같이 사용했다면 h1 바로 뒤의 ul에만 스타일이 적용되는 거에요!
4)일반 형제 선택자(~)
h1~ul{}이렇게 사용했다면 h1을 기준으로 그 뒤에 있는 ul들 모두에 스타일이 적용되는 거라고 볼 수 있어요!
⭐인접형제선택자(+) vs 일반형제선택자(~)
A+B:A뒤에 있는 B 하나
A~B:A뒤에 있는 모든 B
추가적으로 사용할 수 있는 복합선택자를 더 알아볼게요!
A.B(공백없이):A태그이자 B클래스를 갖는 요소AB(공백없이): 선택자이자 선택자인 요소
선택자 연습은
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
여기에서 재미있게 해볼 수 있어용 ㅎㅎ 다들 도전해보시길!!
다음 포스팅에서는 가상클래스 선택자, 가상요소선택자, 속성선택자에 대해서 다뤄보도록 할게요~!
'[새싹X코딩온]웹 풀스택' 카테고리의 다른 글
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(4)-자주 쓰이는 CSS속 (0) | 2023.07.27 |
|---|---|
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(3)-선택자(Selector)2 (0) | 2023.07.26 |
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(1)-개요, 참조방식 (0) | 2023.07.25 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(3) 회고록 (0) | 2023.07.24 |
| [새싹X코딩온]웹 풀스택 1주차(7/19) HTML(2) 회고록 (1) | 2023.07.24 |
