CSS - 문제 미리보기
문제 1330
medium
속성값이 특정 단어로 시작하는 요소를 선택하는 선택자는?
```css
/* class 속성값이 "top"으로 시작하는 모든 요소 */
[class_____"top"] {
background: yellow;
}
```
```css
/* class 속성값이 "top"으로 시작하는 모든 요소 */
[class_____"top"] {
background: yellow;
}
```
정답: C
• **캐럿 기호 `^=`**는 "~로 시작하는(starts with)"을 의미합니다
• 시작 문자열 매칭의 특징:
• 속성값의 맨 앞 부분이 지정된 값과 일치하면 선택
• 전체 단어가 아니어도 됨 (부분 문자열 매칭)
• 대소문자 구분함
• 실제 매칭 예시:
• `[class^="top"]`가 선택하는 요소들:
• `class="top"` ✓
• `class="topbar"` ✓
• `class="top-menu"` ✓
• `class="my-top"` ✗ (시작하지 않음)
• 다른 선택자들과의 차이:
• `~=`: 공백으로 구분된 단어 중 하나와 일치
• `|=`: 정확한 값이거나 하이픈으로 이어지는 값
• `$=`: 끝나는 문자열과 일치
• 클래스명이나 ID 명명 규칙에 따른 그룹 선택에 매우 유용합니다
• 시작 문자열 매칭의 특징:
• 속성값의 맨 앞 부분이 지정된 값과 일치하면 선택
• 전체 단어가 아니어도 됨 (부분 문자열 매칭)
• 대소문자 구분함
• 실제 매칭 예시:
• `[class^="top"]`가 선택하는 요소들:
• `class="top"` ✓
• `class="topbar"` ✓
• `class="top-menu"` ✓
• `class="my-top"` ✗ (시작하지 않음)
• 다른 선택자들과의 차이:
• `~=`: 공백으로 구분된 단어 중 하나와 일치
• `|=`: 정확한 값이거나 하이픈으로 이어지는 값
• `$=`: 끝나는 문자열과 일치
• 클래스명이나 ID 명명 규칙에 따른 그룹 선택에 매우 유용합니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.