AAtomic CSS

width

요소의 너비를 설정합니다. px, rem, %, vw 단위를 지원하며, auto와 inherit 키워드도 사용할 수 있습니다.

클래스 목록

클래스 패턴CSS예시
w{N}pxwidth: {N}pxw100px, w200px, w300px
w{N}remwidth: {N}remw10rem (100px), w20rem (200px)
w{N}pwidth: {N}%w50p (50%), w100p (100%)
w{N}vwwidth: {N}vww50vw, w100vw
wawidth: auto브라우저 자동 계산
wiwidth: inherit부모 값 상속

단위 비교

동일한 시각적 너비(200px)를 4가지 단위로 표현한 비교입니다.

px (픽셀) — w200px

w200px

고정 200px. 화면 크기와 무관하게 항상 동일

rem (root em) — w20rem

w20rem

20rem = 200px (1rem = 10px). 루트 폰트 크기에 비례

% (퍼센트) — w50p

w50p

부모 너비의 50%. 부모 크기에 따라 변동

vw (viewport width) — w20vw

w20vw

뷰포트 너비의 20%. 창 크기에 따라 변동

rem 환산 가이드

html { font-size: 10px } 기준으로 1rem = 10px입니다. 20px 이상은 rem 사용을 권장합니다.

px 값rem 값클래스
20px2remw2rem
50px5remw5rem
100px10remw10rem
150px15remw15rem
200px20remw20rem
240px24remw24rem
300px30remw30rem
400px40remw40rem
500px50remw50rem

클래스별 상세

w{N}pxwidth: {N}px

픽셀 단위로 고정 너비를 설정합니다. 20px 미만의 작은 값에 적합합니다. 20px 이상은 rem 사용을 권장합니다.

<!-- 고정 너비 버튼 -->
<button class="w100px py8px bg6366F1 cFFFFFF br8px bn cp tac">확인</button>

<!-- 고정 너비 아이콘 박스 -->
<div class="w48px h48px bg18181B br8px df jcc aic">
  <svg width="24" height="24" fill="currentColor">...</svg>
</div>

<!-- 고정 너비 사이드바 -->
<div class="df">
  <aside class="w200px bg18181B p16px">사이드바</aside>
  <main class="fg1 p16px">메인 콘텐츠</main>
</div>

px 크기 비교

w50px
w100px
w200px
w300px

w{N}remwidth: {N}rem

rem 단위로 너비를 설정합니다. 1rem = 10px이므로 w10rem은 100px, w20rem은 200px입니다. 20px 이상의 크기에 권장됩니다.

<!-- 카드 고정 너비 -->
<div class="w30rem bg18181B p2rem br8px">
  300px 너비의 카드
</div>

<!-- 최대 너비 컨테이너 -->
<div class="w120rem mxa px2rem">
  1200px 최대 너비 컨테이너
</div>

<!-- rem 크기 비교 -->
<div class="w10rem bg27272A p8px br4px mb8px">w10rem = 100px</div>
<div class="w20rem bg27272A p8px br4px mb8px">w20rem = 200px</div>
<div class="w30rem bg27272A p8px br4px">w30rem = 300px</div>

rem 크기 비교

w5rem (50px)
w10rem (100px)
w20rem (200px)
w30rem (300px)

w{N}pwidth: {N}%

부모 요소의 너비를 기준으로 백분율 너비를 설정합니다. p는 %를 의미합니다. 반응형 레이아웃에서 가장 유용합니다.

<!-- 전체 너비 -->
<div class="w100p bg18181B p16px">부모의 100%</div>

<!-- 반반 레이아웃 -->
<div class="df">
  <div class="w50p bg18181B p16px">왼쪽 50%</div>
  <div class="w50p bg27272A p16px">오른쪽 50%</div>
</div>

<!-- 3등분 -->
<div class="df">
  <div class="w33p bg18181B p16px">33%</div>
  <div class="w33p bg27272A p16px">33%</div>
  <div class="w33p bg18181B p16px">33%</div>
</div>

퍼센트 크기 비교 (부모 기준)

w25p (25%)
w50p (50%)
w75p (75%)
w100p (100%)

w{N}vwwidth: {N}vw

뷰포트 너비를 기준으로 너비를 설정합니다. w100vw는 화면 전체 너비이며, 부모 요소와 무관하게 뷰포트 기준입니다.

<!-- 뷰포트 전체 너비 배경 -->
<div class="w100vw bg18181B py4rem tac">
  화면 전체를 덮는 배너
</div>

<!-- 뷰포트 절반 너비 -->
<div class="w50vw bg27272A p2rem">
  뷰포트의 절반
</div>

주의

w100vw는 스크롤바 너비를 포함하므로 가로 스크롤이 발생할 수 있습니다. 전체 너비가 필요하면 w100p를 우선 사용하세요.

wawidth: auto

브라우저가 요소의 너비를 자동으로 계산합니다. 블록 요소는 부모의 전체 너비를, 인라인 요소는 콘텐츠 크기만큼 차지합니다. 고정 너비를 해제할 때 사용합니다.

<!-- 고정 너비 해제 -->
<div class="w200px md-wa">
  기본 200px, 1024px 이하에서 auto
</div>

<!-- 콘텐츠에 맞는 자동 너비 -->
<button class="wa py8px px2rem bg6366F1 cFFFFFF br8px bn cp">
  내용에 맞게
</button>

wiwidth: inherit

부모 요소의 width 값을 그대로 상속받습니다. 부모의 고정 너비를 자식에게 전달할 때 사용합니다.

<!-- 부모 너비 상속 -->
<div class="w300px">
  <div class="wi bg18181B p16px">
    부모의 300px을 그대로 상속
  </div>
</div>

반응형

미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 너비를 조절할 수 있습니다.

<!-- 모바일 전체 → 데스크탑 절반 -->
<div class="w100p md-w50p">
  기본 100%, 1024px 이하에서 50%
</div>

<!-- 반응형 카드 너비 -->
<div class="w100p sm-w50p md-w33p">
  모바일: 100%, 태블릿: 50%, 데스크탑: 33%
</div>

<!-- 고정 너비 → 모바일 전체 -->
<div class="w30rem sm-w100p">
  기본 300px, 768px 이하에서 전체 너비
</div>
클래스 조합동작
w100p md-w50p기본 100% → 1024px 이하에서 50%
w30rem sm-w100p기본 300px → 768px 이하에서 100%
w50p sm-w100p기본 50% → 768px 이하에서 100%
w200px md-wa기본 200px → 1024px 이하에서 auto
w25p sm-w50p us-w100p기본 25% → 768px 50% → 420px 100%

팁 & 주의사항

전체 너비는 w100p

부모 요소의 전체 너비를 차지하려면 w100p를 사용하세요. w100vw는 스크롤바를 포함하므로 가로 스크롤이 발생할 수 있습니다.

일관된 크기는 rem

고정 크기가 필요할 때 rem을 사용하면 루트 폰트 크기에 비례하여 일관성을 유지할 수 있습니다. 1rem = 10px이므로 환산이 간편합니다.

퍼센트는 부모 기준

w50p는 부모 요소 너비의 50%입니다. 부모의 너비가 정의되지 않으면 예상과 다르게 동작할 수 있으므로 부모 크기를 확인하세요.

box-sizing 확인

기본적으로 width는 콘텐츠 영역만 포함합니다. padding과 border까지 포함하려면 bxzbb(box-sizing: border-box)를 함께 사용하세요.

max-widthmin-widthheightbox-sizing