CSS - 문제 미리보기

문제 1515

hard
다음 Grid 레이아웃에서 .item2(메뉴)의 스타일링에 대한 설명으로 올바른 것은?
```css
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
}
.item2 li:hover {
background-color: #0099cc;
}
```
A. 리스트 항목들이 세로로 배치되고, 마우스 오버 시 더 밝은 파란색으로 변함
B. 리스트 항목들이 가로로 배치되고, 마우스 오버 시 더 어두운 파란색으로 변함
C. 리스트 항목들이 세로로 배치되고, 마우스 오버 시 더 어두운 파란색으로 변함
D. 리스트 항목들이 격자 형태로 배치되고, 마우스 오버 시 색상이 변하지 않음

정답: C

메뉴 영역의 스타일링은 네비게이션 메뉴의 일반적인 패턴을 따릅니다.

• 리스트 초기화:
• `list-style-type: none`: 불릿 포인트 제거
• `margin: 0; padding: 0`: 기본 여백 제거

• 세로 배치:
• 별도의 `display: flex`나 `float` 설정이 없으므로 기본 블록 요소로 세로 배치
• `margin-bottom: 7px`로 항목 간 간격 생성

• 색상 변화:
• 기본 색상: `#33b5e5` (밝은 파란색)
• 호버 색상: `#0099cc` (더 어두운 파란색)
• 마우스 오버 시 시각적 피드백 제공

• 패딩과 여백: `padding: 8px`로 클릭 영역 확보 및 가독성 향상
🎯 이 과목 문제 풀기 🏠 홈으로 가기

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.