다음 코드에서 2컬럼 레이아웃을 1컬럼으로 변경하는 방법으로 올바른 것은?<br>```css<br>.... | CSS

CSS - 문제 미리보기

문제 1496

medium

다음 코드에서 2컬럼 레이아웃을 1컬럼으로 변경하는 방법으로 올바른 것은?
```css
.flex-container {
display: flex;
flex-wrap: wrap;
}

.flex-item-left, .flex-item-right {
flex: 50%;
}

@media (max-width: 800px) {
.flex-item-left, .flex-item-right {
flex: _______;
}
}
```

A. 25%

B. 50%

C. 100%

D. auto

정답: C

• flex 속성과 레이아웃 계산:
• `flex: 50%`: 각 아이템이 50% 너비 → 2개가 한 줄에 배치 (2컬럼)
• `flex: 100%`: 각 아이템이 100% 너비 → 1개가 한 줄에 배치 (1컬럼)

• flex-wrap: wrap의 역할:
• 한 줄에 들어가지 않는 아이템들을 다음 줄로 넘깁니다
• 100% + 100% = 200% → 두 번째 아이템이 다음 줄로 이동

• 레이아웃 변화:
• 데스크톱: 가로 2컬럼
• 모바일: 세로 1컬럼

💡 학습 팁

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