CSS - 문제 미리보기
문제 1274
medium
다음 CSS 코드의 빈칸에 들어갈 올바른 값은?
```css
.nav li {
display: _____;
width: 150px;
padding: 20px;
text-align: center;
}
```
리스트 아이템들을 가로로 나열하면서 각각의 크기를 제어하고 싶을 때
정답: C
내비게이션 메뉴 구현의 최적 선택:
요구사항 분석:
• 가로 나열: 메뉴 항목들이 한 줄에 배치
• 크기 제어: width: 150px 적용 필요
• 패딩 적용: 클릭 영역 확보를 위한 padding
• 텍스트 정렬: text-align: center로 가운데 정렬
inline-block이 최적인 이유:
• 가로 배치: 리스트 아이템들이 자연스럽게 나란히
• 크기 적용: width와 padding이 정확히 작동
• 클릭 영역: 전체 박스 영역이 클릭 가능
• 일관성: 모든 메뉴 항목이 동일한 크기
현대적 대안:
```css
/* Flexbox 방식 (더 권장) */
.nav {
display: flex;
}
.nav li {
flex: 0 0 150px; /* 고정 크기 */
text-align: center;
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.