max-width

요소의 최대 너비를 제한합니다. 컨테이너 중앙 정렬, 반응형 레이아웃, 콘텐츠 가독성 확보에 핵심적인 속성입니다. maxw + 단위 조합으로 사용합니다.

클래스 목록

클래스	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 폭의 중앙 정렬 컨테이너를 만듭니다.

<!-- 가장 보편적인 센터 컨테이너 -->
<div class="maxw120rem mxa px2rem">
  <!-- max-width: 1200px, margin: 0 auto, padding: 0 20px -->
  <h1>페이지 제목</h1>
  <p>콘텐츠가 1200px를 초과하지 않고 가운데 정렬됩니다</p>
</div>

<!-- 좁은 콘텐츠 영역 (블로그, 문서) -->
<article class="maxw72rem mxa px2rem">
  <!-- max-width: 720px, 본문 가독성에 적합 -->
  <h1>글 제목</h1>
  <p>한 줄에 60~80자 정도로 읽기 편한 폭입니다</p>
</article>

<!-- 넓은 컨테이너 (대시보드) -->
<div class="maxw160rem mxa px2rem">
  <!-- max-width: 1600px -->
  <div class="dg gtcr4-1fr gap2rem">...</div>
</div>

센터 컨테이너 시각화

maxw40rem mxa px2rem

외부 영역은 화면 전체, 보라색 영역은 max-width로 제한되어 가운데 정렬됩니다

클래스 조합	설명
`maxw120rem mxa px2rem`	1200px 센터 컨테이너 (가장 보편적)
`maxw72rem mxa px2rem`	720px 텍스트 영역 (블로그, 문서)
`maxw96rem mxa px2rem`	960px 중간 컨테이너
`maxw160rem mxa px2rem`	1600px 넓은 컨테이너 (대시보드)
`maxw40rem mxa`	400px 좁은 영역 (로그인 폼, 모달)

반응형 컨테이너

미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 다른 max-width를 적용할 수 있습니다.

<!-- 반응형 max-width 전환 -->
<div class="maxw120rem md-maxw96rem sm-maxw100p mxa px2rem">
  기본 1200px → 태블릿 960px → 모바일 100%
</div>

<!-- 모바일에서 제한 해제 -->
<div class="maxw80rem sm-maxwn mxa px2rem">
  기본 800px → 모바일에서는 제한 없음
</div>

<!-- 이미지 반응형 제한 -->
<img class="maxw100p ha db" src="hero.jpg" alt="반응형 이미지" />

클래스 조합	동작
`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: 콘텐츠 크기에 맞춤 -->
<div class="maxwfc bg18181B p16px br8px">
  이 박스는 텍스트 길이에 맞춰집니다
</div>

<!-- min-content: 가장 긴 단어 기준 -->
<div class="maxwminc bg18181B p16px br8px">
  긴 문장이지만 단어 단위로 줄바꿈됩니다
</div>

<!-- max-content: 줄바꿈 없이 전체 표시 -->
<div class="maxwmaxc bg18181B p16px br8px">
  이 텍스트는 줄바꿈 없이 한 줄로 표시됩니다
</div>

<!-- none: 제한 해제 -->
<div class="maxwn bg18181B p16px br8px">
  max-width 제한이 없습니다
</div>

시각적 비교

다양한 max-width 값이 요소에 어떤 영향을 주는지 비교합니다.

max-width: 200px — maxw200px

maxw200px (200px 제한)

요소 너비가 200px을 초과하지 않습니다

max-width: 50rem (500px) — maxw50rem

maxw50rem (500px 제한)

1rem = 10px 기준으로 500px까지 허용

max-width: 100% — maxw100p

maxw100p (부모 100%)

부모 너비를 초과하지 않음. 이미지에 필수

max-width: fit-content — maxwfc

maxwfc

콘텐츠 크기에 맞춰 너비 결정

max-width: none — maxwn

maxwn (제한 없음)

max-width 제한이 완전히 해제됨

팁 & 주의사항

maxw + mxa = 센터 레이아웃

maxw120rem mxa px2rem은 가장 보편적인 센터 컨테이너 패턴입니다. 최대 폭을 제한하고, 좌우 마진을 auto로 설정하며, 모바일에서 좌우 여백을 확보합니다.

maxwfc로 자동 크기 요소

maxwfc는 버튼, 태그, 뱃지 등 콘텐츠에 맞춰 자동으로 크기가 결정되어야 하는 요소에 유용합니다.

maxwn으로 제한 해제

부모나 전역 스타일에서 max-width가 설정된 경우, maxwn으로 제한을 해제할 수 있습니다. 반응형에서 sm-maxwn 패턴으로 모바일에서 전체 폭을 사용하는 경우가 많습니다.

가독성을 위한 텍스트 폭 제한

본문 텍스트는 한 줄에 60~80자가 적정합니다. maxw72rem(720px) 정도로 텍스트 영역의 최대 폭을 제한하면 가독성이 좋아집니다.

width min-width height margin padding