width
요소의 너비를 설정합니다. px, rem, %, vw 단위를 지원하며, auto와 inherit 키워드도 사용할 수 있습니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 패턴 | CSS | 예시 |
|---|---|---|
w{N}px | width: {N}px | w100px, w200px, w300px |
w{N}rem | width: {N}rem | w10rem (100px), w20rem (200px) |
w{N}p | width: {N}% | w50p (50%), w100p (100%) |
w{N}vw | width: {N}vw | w50vw, w100vw |
wa | width: auto | 브라우저 자동 계산 |
wi | width: inherit | 부모 값 상속 |
단위 비교
동일한 시각적 너비(200px)를 4가지 단위로 표현한 비교입니다.
px (픽셀) — w200px
고정 200px. 화면 크기와 무관하게 항상 동일
rem (root em) — w20rem
20rem = 200px (1rem = 10px). 루트 폰트 크기에 비례
% (퍼센트) — w50p
부모 너비의 50%. 부모 크기에 따라 변동
vw (viewport width) — w20vw
뷰포트 너비의 20%. 창 크기에 따라 변동
rem 환산 가이드
html { font-size: 10px } 기준으로 1rem = 10px입니다. 20px 이상은 rem 사용을 권장합니다.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">px 값 | rem 값 | 클래스 |
|---|---|---|
| 20px | 2rem | w2rem |
| 50px | 5rem | w5rem |
| 100px | 10rem | w10rem |
| 150px | 15rem | w15rem |
| 200px | 20rem | w20rem |
| 240px | 24rem | w24rem |
| 300px | 30rem | w30rem |
| 400px | 40rem | w40rem |
| 500px | 50rem | w50rem |
클래스별 상세
w{N}pxwidth: {N}px
픽셀 단위로 고정 너비를 설정합니다. 20px 미만의 작은 값에 적합합니다. 20px 이상은 rem 사용을 권장합니다.
<!-- Fixed Width Button -->
<button class="w100px py8px bg6366F1 cFFFFFF br8px bn cp tac">Confirm</button>
<!-- Fixed width icon box -->
<div class="w48px h48px bg18181B br8px df jcc aic">
<svg width="24" height="24" fill="currentColor">...</svg>
</div>
<!-- Fixed Width Sidebar -->
<div class="df">
<aside class="w200px bg18181B p16px">Sidebar</aside>
<main class="fg1 p16px">Main Content</main>
</div>px 크기 비교
w{N}remwidth: {N}rem
rem 단위로 너비를 설정합니다. 1rem = 10px이므로 w10rem은 100px, w20rem은 200px입니다. 20px 이상의 크기에 권장됩니다.
<!-- Card fixed width -->
<div class="w30rem bg18181B p2rem br8px">
300px width card
</div>
<!-- Max width container -->
<div class="w120rem mxa px2rem">
1200px max width container
</div>
<!-- rem Size Comparison -->
<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 크기 비교
w{N}pwidth: {N}%
부모 요소의 너비를 기준으로 백분율 너비를 설정합니다. p는 %를 의미합니다. 반응형 레이아웃에서 가장 유용합니다.
<!-- Full width -->
<div class="w100p bg18181B p16px">100% of parent</div>
<!-- Half-half layout -->
<div class="df">
<div class="w50p bg18181B p16px">Left 50%</div>
<div class="w50p bg27272A p16px">Right 50%</div>
</div>
<!-- Split into thirds -->
<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>퍼센트 크기 비교 (부모 기준)
w{N}vwwidth: {N}vw
뷰포트 너비를 기준으로 너비를 설정합니다. w100vw는 화면 전체 너비이며, 부모 요소와 무관하게 뷰포트 기준입니다.
<!-- Viewport full width background -->
<div class="w100vw bg18181B py4rem tac">
Banner covering full screen
</div>
<!-- Viewport half width -->
<div class="w50vw bg27272A p2rem">
Half of viewport
</div>주의
w100vw는 스크롤바 너비를 포함하므로 가로 스크롤이 발생할 수 있습니다. 전체 너비가 필요하면 w100p를 우선 사용하세요.
wawidth: auto
브라우저가 요소의 너비를 자동으로 계산합니다. 블록 요소는 부모의 전체 너비를, 인라인 요소는 콘텐츠 크기만큼 차지합니다. 고정 너비를 해제할 때 사용합니다.
<!-- Release fixed width -->
<div class="w200px md-wa">
Default 200px, auto at 1024px and below
</div>
<!-- Auto width to fit content -->
<button class="wa py8px px2rem bg6366F1 cFFFFFF br8px bn cp">
Fit to content
</button>wiwidth: inherit
부모 요소의 width 값을 그대로 상속받습니다. 부모의 고정 너비를 자식에게 전달할 때 사용합니다.
<!-- Inherit parent width -->
<div class="w300px">
<div class="wi bg18181B p16px">
Inherits 300px from parent
</div>
</div>반응형
미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 너비를 조절할 수 있습니다.
<!-- Mobile Full → Desktop Half -->
<div class="w100p md-w50p">
Default 100%, 50% at 1024px and below
</div>
<!-- Responsive card width -->
<div class="w100p sm-w50p md-w33p">
Mobile: 100%, Tablet: 50%, Desktop: 33%
</div>
<!-- Fixed Width → Mobile Full -->
<div class="w30rem sm-w100p">
Default 300px, full width at 768px and below
</div>| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 조합 | 동작 |
|---|---|
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)를 함께 사용하세요.