container-inner 가 100% 지정됨에도 불구하고 작게 표시됨
| 영역 | 역할 | 특이사항 |
|---|---|---|
.wrapper |
전체 뷰포트를 감싸는 최상단 영역 | min-height: 100dvh |
.page |
페이지 전용 배경 및 스타일 적용 | .page-home로 특화됨 |
.page-body |
헤더 제외 콘텐츠 전용 영역 | padding-top으로 헤더 고려 |
.container |
중앙 정렬/가로 제한 역할 | width: 100%, display: flex |
.container-inner |
내부 레이아웃 컨트롤 (align, padding) | width: 100%, padding: 0 20px |
.container-body |
실질적인 콘텐츠 영역 (section 배치) | display: flex로 섹션 나열 |
.section:first-child |
이미지 섹션 (좌측 40%) | flex: 0 0 40%, 1024px 이하 display: none |
.section:last-child |
텍스트 섹션 (우측 auto) | flex: 1 1 auto |
⇒ container-inner 너비 설정을 안 하는 이슈로 인해 컨텐츠 너비 만큼만 반응한 이슈 대응
너비설정으로 인한 처리 완료