CSS - 문제 미리보기
문제 1436
medium
다음 두 코드의 차이점을 올바르게 설명한 것은?
코드 A:
```css
img {
display: block;
margin: auto;
width: 50%;
}
```
코드 B:
```css
div {
display: flex;
justify-content: center;
}
img {
width: 50%;
}
```
코드 A:
```css
img {
display: block;
margin: auto;
width: 50%;
}
```
코드 B:
```css
div {
display: flex;
justify-content: center;
}
img {
width: 50%;
}
```
정답: B
코드 A의 특징 (`margin: auto` 방식):
• 가로 중앙 정렬만 가능
• 세로 중앙 정렬은 불가능 (margin auto는 세로 방향에 적용되지 않음)
• 단순하고 오래된 방법
코드 B의 특징 (Flexbox 방식):
• 가로 중앙 정렬 기본 제공
• `align-items: center` 추가로 세로 중앙 정렬도 가능
• 더 유연하고 확장 가능
• 가로 중앙 정렬만 가능
• 세로 중앙 정렬은 불가능 (margin auto는 세로 방향에 적용되지 않음)
• 단순하고 오래된 방법
코드 B의 특징 (Flexbox 방식):
• 가로 중앙 정렬 기본 제공
• `align-items: center` 추가로 세로 중앙 정렬도 가능
• 더 유연하고 확장 가능
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.