CSS - 문제 미리보기
문제 1287
medium
다음 툴팁 효과 CSS에서 빈칸에 들어갈 올바른 선택자는?
```css
p {
display: none;
background-color: yellow;
padding: 20px;
}
_____ {
display: block;
}
```
div에 마우스를 올렸을 때 내부의 p 요소가 나타나게 하고 싶을 때
```css
p {
display: none;
background-color: yellow;
padding: 20px;
}
_____ {
display: block;
}
```
div에 마우스를 올렸을 때 내부의 p 요소가 나타나게 하고 싶을 때
정답: B
Pseudo-class와 Combinator의 조합 활용:
div:hover p의 동작 원리:
• div에 호버가 발생했을 때
• div 내부의 모든 p 요소를 선택
• 호버 상태에서 p 요소의 display 변경
선택자 구조 분석:
• `div:hover`: 호버 상태인 div 요소
• 공백(descendant combinator): 후손 관계
• `p`: div 내부의 모든 p 요소
다른 선택지들의 문제점:
div p:hover:
• p 요소에 직접 호버해야 함
• p가 숨겨져 있으면 호버 불가능
• 툴팁 용도로 부적합
div:hover + p:
• div 바로 다음 형제 p만 선택
• div 내부가 아닌 외부 p 선택
• 구조적으로 맞지 않음
div ~ p:hover:
• div 이후 형제 p에 직접 호버
• 의도한 동작과 완전히 다름
div:hover p의 동작 원리:
• div에 호버가 발생했을 때
• div 내부의 모든 p 요소를 선택
• 호버 상태에서 p 요소의 display 변경
선택자 구조 분석:
• `div:hover`: 호버 상태인 div 요소
• 공백(descendant combinator): 후손 관계
• `p`: div 내부의 모든 p 요소
다른 선택지들의 문제점:
div p:hover:
• p 요소에 직접 호버해야 함
• p가 숨겨져 있으면 호버 불가능
• 툴팁 용도로 부적합
div:hover + p:
• div 바로 다음 형제 p만 선택
• div 내부가 아닌 외부 p 선택
• 구조적으로 맞지 않음
div ~ p:hover:
• div 이후 형제 p에 직접 호버
• 의도한 동작과 완전히 다름
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.