CSS - 문제 미리보기
문제 1322
hard
완전한 이미지 갤러리 항목을 만들기 위한 CSS 구조에서 빈칸에 들어갈 올바른 값들은?
```css
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: _____;
width: _____;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: _____;
}
div.desc {
padding: 15px;
text-align: center;
}
```
정답: B
완전한 이미지 갤러리 구성 요소들의 역할:
`float: left;`:
• 갤러리 항목들을 왼쪽부터 차례로 가로 배치
• 여러 행에 걸쳐 자동으로 줄바꿈 가능
• 그리드 형태의 갤러리 레이아웃 구현
`width: 180px;`:
• 각 갤러리 항목의 고정 너비 설정
• 일관된 크기로 깔끔한 정렬 효과
• 반응형이 필요하면 % 단위도 사용 가능
`height: auto;`:
• 이미지 비율을 유지하면서 높이 자동 조절
• width: 100%와 함께 사용하여 완벽한 반응형 이미지
• 다양한 비율의 이미지도 자연스럽게 처리
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.