CSS - 문제 미리보기
문제 1317
hard
완전한 드롭다운 메뉴를 만들기 위해 필요한 핵심 CSS 구성 요소를 모두 포함한 것은?
```css
/* 1단계: 컨테이너 */
.dropdown {
position: relative;
display: inline-block;
}
/* 2단계: 드롭다운 내용 */
.dropdown-content {
display: _____;
position: _____;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
/* 3단계: 호버 효과 */
.dropdown:_____ .dropdown-content {
display: _____;
}
```
정답: B
• 완전한 드롭다운 메뉴의 필수 구성 요소들:
• 1단계 - 컨테이너 설정:
• `position: relative;`: 자식 요소의 기준점 제공
• `display: inline-block;`: 인라인 배치하면서 크기 조절 가능
• 2단계 - 드롭다운 콘텐츠:
• `display: none;`: 평상시 완전히 숨김
• `position: absolute;`: 부모 기준 절대 위치 (문서 흐름에서 제거)
• `z-index: 1;`: 다른 요소들 위에 표시
• 3단계 - 인터랙션:
• `.dropdown:hover .dropdown-content`: 부모에 마우스 올릴 때 자식 선택
• `display: block;`: 숨겨진 메뉴를 표시
• 왜 이 조합이 필요한가?
• 레이아웃 안정성: `relative` + `absolute`로 다른 요소에 영향 없음
• 사용자 경험: 호버만으로 직관적인 조작
• 시각적 완성도: `z-index`로 레이어 순서 보장
• 잘못된 선택지들:
• 1번: `position: relative`는 드롭다운 내용에 부적합
• 3번: `display: hidden`은 존재하지 않는 값
• 4번: `position: static`은 위치 지정 불가
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.