CSS - 문제 미리보기
문제 1363
easy
CSS 성능을 향상시키기 위해 선택자를 작성할 때 권장되는 방법은?
```css
/* 방법 A */
ul li a.button:hover {
background-color: blue;
}
/* 방법 B */
.button:hover {
background-color: blue;
}
```
정답: B
• 단순한 선택자가 복잡한 선택자보다 빠르게 처리됩니다
• 브라우저의 선택자 처리 과정:
• 오른쪽에서 왼쪽으로 선택자를 읽음
• 각 단계마다 DOM을 탐색하여 일치하는 요소 찾기
• 더 많은 단계일수록 더 많은 연산 필요
• 성능 비교:
• 방법 A (`ul li a.button:hover`): 5단계 검사 필요
1. `:hover` 상태 확인
2. `.button` 클래스 확인
3. `a` 요소인지 확인
4. `li` 부모 요소 확인
5. `ul` 조상 요소 확인
• 방법 B (`.button:hover`): 2단계 검사만 필요
1. `:hover` 상태 확인
2. `.button` 클래스 확인
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.