max-width
요소의 최대 너비를 제한합니다. 컨테이너 중앙 정렬, 반응형 레이아웃, 콘텐츠 가독성 확보에 핵심적인 속성입니다. maxw + 단위 조합으로 사용합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
maxw{N}px | max-width: {N}px | 픽셀 단위 최대 너비 (20px 미만) |
maxw{N}rem | max-width: {N}rem | rem 단위 최대 너비 (20px 이상, 1rem=10px) |
maxw{N}p | max-width: {N}% | 퍼센트 단위 최대 너비 |
maxwa | max-width: auto | 브라우저 기본값으로 되돌림 |
maxwn | max-width: none | 최대 너비 제한 해제 |
maxwfc | max-width: fit-content | 콘텐츠에 맞는 크기 (부모 초과 안 함) |
maxwminc | max-width: min-content | 가장 긴 단어 기준 최소 크기 |
maxwmaxc | max-width: max-content | 줄바꿈 없이 한 줄에 들어가는 크기 |
핵심 패턴: 센터 컨테이너
Atomic CSS에서 가장 많이 사용하는 패턴입니다. maxw120rem mxa px2rem은 최대 1200px 폭의 중앙 정렬 컨테이너를 만듭니다.
<!-- Most common center container -->
<div class="maxw120rem mxa px2rem">
<!-- max-width: 1200px, margin: 0 auto, padding: 0 20px -->
<h1>Page Title</h1>
<p>Content stays center-aligned without exceeding 1200px</p>
</div>
<!-- Narrow content area (blog, docs) -->
<article class="maxw72rem mxa px2rem">
<!-- max-width: 720px, Suitable for body text readability -->
<h1>Article title</h1>
<p>Comfortable width for about 60-80 characters per line</p>
</article>
<!-- Wide container (dashboard) -->
<div class="maxw160rem mxa px2rem">
<!-- max-width: 1600px -->
<div class="dg gtcr4-1fr gap2rem">...</div>
</div>센터 컨테이너 시각화
외부 영역은 화면 전체, 보라색 영역은 max-width로 제한되어 가운데 정렬됩니다
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 조합 | 설명 |
|---|---|
maxw120rem mxa px2rem | 1200px 센터 컨테이너 (가장 보편적) |
maxw72rem mxa px2rem | 720px 텍스트 영역 (블로그, 문서) |
maxw96rem mxa px2rem | 960px 중간 컨테이너 |
maxw160rem mxa px2rem | 1600px 넓은 컨테이너 (대시보드) |
maxw40rem mxa | 400px 좁은 영역 (로그인 폼, 모달) |
반응형 컨테이너
미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 다른 max-width를 적용할 수 있습니다.
<!-- Responsive max-width transition -->
<div class="maxw120rem md-maxw96rem sm-maxw100p mxa px2rem">
Default 1200px → Tablet 960px → Mobile 100%
</div>
<!-- Remove limit on mobile -->
<div class="maxw80rem sm-maxwn mxa px2rem">
Default 800px, no limit on mobile
</div>
<!-- Image responsive limit -->
<img class="maxw100p ha db" src="hero.jpg" alt="Responsive Image" />| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 조합 | 동작 |
|---|---|
maxw120rem md-maxw96rem | 기본 1200px, 1024px 이하에서 960px |
maxw80rem sm-maxwn | 기본 800px, 768px 이하에서 제한 해제 |
maxw100p | 부모 너비 100%를 초과하지 않음 (이미지 필수) |
maxw120rem sm-maxw100p | 기본 1200px, 모바일에서 100% |
콘텐츠 기반 크기
고정 값 대신 콘텐츠에 맞춰 최대 너비를 결정하는 키워드 클래스입니다.
fit-content — maxwfc
콘텐츠 크기에 맞추되 부모 너비를 초과하지 않습니다
min-content — maxwminc
가장 긴 단어의 너비로 제한됩니다
max-content — maxwmaxc
줄바꿈 없이 콘텐츠 전체가 한 줄에 들어가는 너비
<!-- fit-content: Fits to content size -->
<div class="maxwfc bg18181B p16px br8px">
This box fits the text length
</div>
<!-- min-content: Based on longest word -->
<div class="maxwminc bg18181B p16px br8px">
Long sentence but wraps at word boundaries
</div>
<!-- max-content: Full display without wrapping -->
<div class="maxwmaxc bg18181B p16px br8px">
This text is displayed in a single line without wrapping
</div>
<!-- none: Remove limit -->
<div class="maxwn bg18181B p16px br8px">
No max-width limit
</div>시각적 비교
다양한 max-width 값이 요소에 어떤 영향을 주는지 비교합니다.
max-width: 200px — maxw200px
요소 너비가 200px을 초과하지 않습니다
max-width: 50rem (500px) — maxw50rem
1rem = 10px 기준으로 500px까지 허용
max-width: 100% — maxw100p
부모 너비를 초과하지 않음. 이미지에 필수
max-width: fit-content — maxwfc
콘텐츠 크기에 맞춰 너비 결정
max-width: none — maxwn
max-width 제한이 완전히 해제됨
팁 & 주의사항
maxw + mxa = 센터 레이아웃
maxw120rem mxa px2rem은 가장 보편적인 센터 컨테이너 패턴입니다. 최대 폭을 제한하고, 좌우 마진을 auto로 설정하며, 모바일에서 좌우 여백을 확보합니다.
maxwfc로 자동 크기 요소
maxwfc는 버튼, 태그, 뱃지 등 콘텐츠에 맞춰 자동으로 크기가 결정되어야 하는 요소에 유용합니다.
maxwn으로 제한 해제
부모나 전역 스타일에서 max-width가 설정된 경우, maxwn으로 제한을 해제할 수 있습니다. 반응형에서 sm-maxwn 패턴으로 모바일에서 전체 폭을 사용하는 경우가 많습니다.
가독성을 위한 텍스트 폭 제한
본문 텍스트는 한 줄에 60~80자가 적정합니다. maxw72rem(720px) 정도로 텍스트 영역의 최대 폭을 제한하면 가독성이 좋아집니다.