CSS - 문제 미리보기
문제 1495
easy
데스크톱에서는 가로 배치, 모바일에서는 세로 배치로 변경하려면 빈칸에 무엇을 입력해야 할까요?
```css
.flex-container {
display: flex;
flex-direction: row;
}
@media (max-width: 800px) {
.flex-container {
flex-direction: _______;
}
}
```
```css
.flex-container {
display: flex;
flex-direction: row;
}
@media (max-width: 800px) {
.flex-container {
flex-direction: _______;
}
}
```
정답: B
• flex-direction의 역할: flex items의 배치 방향을 결정합니다.
• `row`: 가로 배치 (왼쪽에서 오른쪽)
• `column`: 세로 배치 (위에서 아래)
• 반응형 패턴 분석:
• 기본 스타일: `flex-direction: row` (데스크톱용 가로 배치)
• 모바일 조건: `max-width: 800px` (800px 이하일 때)
• 모바일 스타일: `flex-direction: column` (세로 배치)
• 브레이크포인트 800px: 태블릿과 모바일을 구분하는 일반적인 기준점입니다.
• `row`: 가로 배치 (왼쪽에서 오른쪽)
• `column`: 세로 배치 (위에서 아래)
• 반응형 패턴 분석:
• 기본 스타일: `flex-direction: row` (데스크톱용 가로 배치)
• 모바일 조건: `max-width: 800px` (800px 이하일 때)
• 모바일 스타일: `flex-direction: column` (세로 배치)
• 브레이크포인트 800px: 태블릿과 모바일을 구분하는 일반적인 기준점입니다.
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.