⏳ 2023. 4. 24. - 2023. 4. 30.
1. 기본 선택자
우선순위 : 전체 < 태그 < 클래스 < 아이디
전체 선택자
*을 사용하여 모든 요소를 선택
<css />
* {
color: red;
font-size: 100px;
}
태그 선택자
태그로 선택
<css />
div {
color: red;
font-size: 100px;
}
클래스 선택자
.을 사용하여 선택
<css />
.box {
background-color: blue;
padding: 20px;
}
아이디 선택자
#을 사용하여 선택
<css />
#box {
background-color: blue;
padding: 20px;
}
2. 복합 선택자
일치 선택자
선택자를 동시에 만족하는 요소를 선택 : 모든 선택자를 공백없이 작성
<css />
div.orange {
color: orange;
}
div이면서 class가 orange인 요소 선택
자식 선택자
선택자의 자식 요소를 선택 : > 사용
<css />
ul > .orange {
color: orange;
}
ul의 자식 요소 중에서 class가 orange인 요소 선택
하위(후손) 선택자
선택자의 하위 요소를 선택 : 공백 사용
<css />
div .orange {
color: orange;
}
div의 하위 요소 중에서 class가 orange인 요소 선택
인접 형제 선택자
선택자의 다음 형제 요소 하나를 선택 : + 사용
<css />
.orange + li {
color: orange;
}
class가 orange인 요소의 다음 형제 요소 하나를 선택
일반 형제 선택자
선택자의 다음 형제 요소 모두를 선택 : ~ 사용
<css />
.orange ~ li {
color: orange;
}
class가 orange인 요소의 다음 형제 요소 모두를 선택
3. 가상 클래스 선택자
기본 문법
선택자:가상클래스선택자
:focus
기본적으로 focus가 될 수 있는 요소는 html 대화형 컨텐츠(ex. input, a, button 등)에 해당한다.
<css />
input:focus {
background-color: brown;
}
input 요소가 focus되면 선택
<html />
<div tabindex="-1"></div>
div는 focus 될 수 없는 요소이지만 tabindex 속성을 사용하면 focus 가능한 요소로 만들 수 있다.
tabindex : tab 키를 사용해 focus할 순서를 지정한다.(값으로는 -1을 권장)
tabindex="-1"?
실은, tabindex에 값으로 0을 주는 것이 탭으로 이동했을 때 요소가 정렬된 순서(논리적 흐름)대로 이동하게 하는 방법이고, tabindex에 값으로 -1을 주는 것은 포커스 받을 수 있는 태그가 탭으로 포커스를 받지 못하게 하는 방법이다.
그럼 왜 강의에서는 동작한 것인가?
→ 탭이 아닌 클릭으로 포커스했기 때문! 값이 -1이지만, tabindex 속성이 있기 때문에 클릭했을 때 포커스가 된다.
:nth-child(n)
형제 요소 중 n번째 요소를 선택한다. n은 0부터 시작한다.
<html />
<div class="fruits">
<span>딸기</span> <!-- 1 ❌ -->
<span>수박</span> <!-- 2 ✅ -->
<div>오렌지</div> <!-- 3 ✅ -->
<p>망고</p> <!-- 4 ✅ -->
<h3>사과</h3> <!-- 5 ✅ -->
</div>
두 번째 요소부터 마지막 요소까지 선택하고 싶을 때 다음과 같이 작성할 수 있다.
<css />
.fruits *:nth-child(n + 2) {
color: red;
}
:not(선택자)
선택자가 아닌 요소를 선택한다.
<html />
<div class="fruits">
<span>딸기</span> <!-- ❌ -->
<span>수박</span> <!-- ❌ -->
<div>오렌지</div> <!-- ✅ -->
<p>망고</p> <!-- ✅ -->
<h3>사과</h3> <!-- ✅ -->
</div>
span 요소를 선택하고 싶지 않을 때 다음과 같이 작성할 수 있다.
<css />
.fruits *:not(span) {
color: red;
}
4. 가상 요소 선택자
기본 문법
선택자::가상요소선택자
가상의 요소를 만들어서 내용을 삽입한다. -> html의 구조를 단순화할 수 있는 장점이 있다!
<css />
.fruits::before {
content: "바나나";
}
::before은 선택자 요소의 내부 앞에 내용(인라인 요소)을 삽입하고, ::after은 선택자 요소의 내부 뒤에 내용(인라인 요소)을 삽입한다.
두 가상 요소 선택자 모두 content라는 속성을 필요로 한다.
5. 속성 선택자
기본 문법
[속성]
속성을 포함한 요소를 선택한다.
<css />
[type] {
color: red;
}
[type="password"] {
color: orange;
}'카카오테크캠퍼스 > 필수과정' 카테고리의 다른 글
| [카카오테크캠퍼스 4주차] CSS 속성 (0) | 2023.05.06 |
|---|---|
| [카카오테크캠퍼스 3주차] CSS 속성(Property), 단위 (0) | 2023.05.06 |
| [카카오테크캠퍼스 3주차] CSS 개요: 상속, 우선순위 (0) | 2023.05.06 |
| [카카오테크캠퍼스 3주차] CSS 개요: 선언 방식 (0) | 2023.05.06 |
| [카카오테크캠퍼스 1주차] 무작정 시작하기 (0) | 2023.05.06 |
