CSS - 문제 미리보기
문제 1483
easy
반응형 네비게이션 메뉴에서 모바일 화면(600px 이하)일 때 메뉴 링크들을 세로로 배열하려면 빈칸에 무엇을 입력해야 할까요?
```css
.topnav a {
float: left;
display: block;
color: white;
padding: 14px 16px;
}
@media screen and (max-width: 600px) {
.topnav a {
float: _______;
width: 100%;
}
}
```
정답: C
• float 속성의 역할:
• `float: left`: 요소를 왼쪽으로 띄워서 가로 배열
• `float: none`: float를 해제하여 기본 블록 레이아웃으로 복귀
• 반응형 메뉴 패턴:
• 데스크톱: `float: left`로 메뉴들이 가로 한 줄에 배치
• 모바일: `float: none` + `width: 100%`로 메뉴들이 세로로 쌓임
• width: 100%의 역할: 각 메뉴 링크가 화면 전체 너비를 차지하여 터치하기 쉬운 큰 버튼 형태가 됩니다.
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.