CSS - 문제 미리보기
문제 1314
easy
다음 코드에서 빈칸에 들어갈 올바른 값은?
```css
.dropdown {
position: _____;
display: inline-block;
}
.dropdown-content {
position: _____;
display: none;
}
```
```css
.dropdown {
position: _____;
display: inline-block;
}
.dropdown-content {
position: _____;
display: none;
}
```
정답: B
• 드롭다운 메뉴의 위치 지정에는 부모-자식 관계가 중요합니다
• `.dropdown` (부모 컨테이너):
• `position: relative;`: 자식 요소의 기준점 역할
• 자신의 위치는 문서 흐름을 따름
• `.dropdown-content` (드롭다운 내용):
• `position: absolute;`: 부모 기준으로 절대 위치
• 문서 흐름에서 벗어나 다른 요소에 영향 안 줌
• 이 조합의 장점:
• 드롭다운이 버튼 바로 아래 정확히 배치됨
• 페이지 레이아웃을 깨뜨리지 않음
• 다른 요소들과 겹치지 않음
• `relative` + `absolute` 조합은 CSS 포지셔닝의 기본 패턴입니다
• `.dropdown` (부모 컨테이너):
• `position: relative;`: 자식 요소의 기준점 역할
• 자신의 위치는 문서 흐름을 따름
• `.dropdown-content` (드롭다운 내용):
• `position: absolute;`: 부모 기준으로 절대 위치
• 문서 흐름에서 벗어나 다른 요소에 영향 안 줌
• 이 조합의 장점:
• 드롭다운이 버튼 바로 아래 정확히 배치됨
• 페이지 레이아웃을 깨뜨리지 않음
• 다른 요소들과 겹치지 않음
• `relative` + `absolute` 조합은 CSS 포지셔닝의 기본 패턴입니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.