CSS - 문제 미리보기
문제 1316
medium
드롭다운 메뉴가 화면 오른쪽 끝으로 정렬되도록 하려면 어떤 CSS 속성을 추가해야 하나요?
```css
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
_____: 0;
}
```
```css
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
_____: 0;
}
```
정답: B
• **`right: 0;`**을 사용하면 드롭다운이 부모 요소의 오른쪽 끝에 정렬됩니다
• 위치 지정 방식의 차이:
• `left: 0;`: 부모의 왼쪽 끝에 정렬 (기본)
• `right: 0;`: 부모의 오른쪽 끝에 정렬
• 실제 사용 시나리오:
• 화면 오른쪽에 있는 사용자 메뉴
• 언어 선택 드롭다운
• 설정 메뉴 등
• 다른 선택지 분석:
• `top`: 세로 위치 조정 (기본값 보통 사용)
• `margin-right`: 여백만 조정, 정렬 효과 없음
• `position: absolute;`에서는 `left/right`, `top/bottom` 속성으로 정확한 위치를 지정합니다
• 위치 지정 방식의 차이:
• `left: 0;`: 부모의 왼쪽 끝에 정렬 (기본)
• `right: 0;`: 부모의 오른쪽 끝에 정렬
• 실제 사용 시나리오:
• 화면 오른쪽에 있는 사용자 메뉴
• 언어 선택 드롭다운
• 설정 메뉴 등
• 다른 선택지 분석:
• `top`: 세로 위치 조정 (기본값 보통 사용)
• `margin-right`: 여백만 조정, 정렬 효과 없음
• `position: absolute;`에서는 `left/right`, `top/bottom` 속성으로 정확한 위치를 지정합니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.