반응형 레이아웃에서는 유연성과 사용성을 모두 고려해야 합니다. 요구사항 분석: 1. 최대 800px 너비 → `max-width: 800px` 2. 화면 중앙 배치 → `margin: 0 auto` 3. 문단 간격 → `margin: 16px 0` 4. 모바일 최소 여백 → `padding: 0 20px` 2번 선택지 분석 (정답): ```css .post-container { max-width: 800px; /* 최대 너비 제한 */ margin: 0 auto; /* 중앙 정렬 */ padding: 0 20px; /* 모바일 여백 확보 */ } .post-container p { margin: 16px 0; /* 문단 간 세로 간격 */ } ``` 장점: • 반응형: max-width로 큰 화면에서는 800px, 작은 화면에서는 유연하게 조절 ✓ • 중앙 정렬: margin: 0 auto로 완벽한 중앙 배치 ✓ • 모바일 배려: padding으로 모든 화면 크기에서 최소 여백 보장 ✓ • 가독성: 문단 간 적절한 세로 간격 ✓ 다른 선택지들의 문제점: 1번: 모바일 고려 부족 • `width: 800px`로 고정되어 작은 화면에서 가로 스크롤 발생 • 좌우 여백 없음 3번: 중앙 정렬 실패 • `margin: 0 20px`로 인해 중앙 정렬되지 않음 • 좌우에 각각 20px씩만 고정 4번: 너비 제한 없음 • `width: 100%`로 매우 큰 화면에서 가독성 저하 • 마진 설정 부적절 실무 베스트 프랙티스: ```css .post-container { max-width: 800px; margin: 0 auto; padding: 0 20px; /* 추가 고려사항 */ box-sizing: border-box; /* 패딩 포함 너비 계산 */ } .post-container p { margin: 16px 0; line-height: 1.6; /* 줄 간격으로 가독성 향상 */ } /* 모바일 최적화 */ @media (max-width: 480px) { .post-container { padding: 0 16px; /* 모바일에서는 조금 더 좁게 */ } .post-container p { margin: 12px 0; /* 모바일에서는 간격을 줄임 */ } } ``` 핵심 개념: • max-width vs width: 반응형 디자인에서는 max-width 선호 • margin vs padding: 바깥 여백 vs 안쪽 여백의 적절한 조합 • 중앙 정렬: margin: 0 auto의 정확한 활용 • 사용자 경험: 모든 디바이스에서의 가독성 고려