CSS - 문제 미리보기
문제 1277
medium
이미지를 가운데 정렬하기 위한 올바른 CSS 조합은?
```css
img {
display: _____;
margin: _____;
width: 40%;
}
```
```css
img {
display: _____;
margin: _____;
width: 40%;
}
```
정답: D
이미지 가운데 정렬의 완전한 해결책:
display: block의 필요성:
• 이미지는 기본적으로 인라인 요소
• 인라인 요소에는 margin: auto가 적용되지 않음
• 블록 요소로 변경해야 가로 margin 자동 분배 가능
margin: 0 auto의 의미:
• 0: 상하 여백 없음
• auto: 좌우 여백 자동 분배 (가운데 정렬 효과)
• 축약형으로 간결하게 표현
완전한 동작 과정:
• `display: block` → 이미지를 블록 요소로 변환
• `width: 40%` → 명시적 너비 설정
• `margin: 0 auto` → 좌우 가운데 정렬
display: block의 필요성:
• 이미지는 기본적으로 인라인 요소
• 인라인 요소에는 margin: auto가 적용되지 않음
• 블록 요소로 변경해야 가로 margin 자동 분배 가능
margin: 0 auto의 의미:
• 0: 상하 여백 없음
• auto: 좌우 여백 자동 분배 (가운데 정렬 효과)
• 축약형으로 간결하게 표현
완전한 동작 과정:
• `display: block` → 이미지를 블록 요소로 변환
• `width: 40%` → 명시적 너비 설정
• `margin: 0 auto` → 좌우 가운데 정렬
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.