width 속성에 대한 유틸리티입니다.
요소의 너비를 설정합니다. 기본적으로 콘텐츠 영역의 너비를 설정하지만, box-sizing이 border-box로 설정된 경우에는 테두리 영역의 너비를 설정합니다.
| 클래스 | 약어 클래스 | 속성 |
|---|---|---|
width:0 |
w:0 |
width: var(--width-0) !important; /* 0px */ |
width:1 |
w:1 |
width: var(--width-1) !important; /* 50px */ |
width:2 |
w:2 |
width: var(--width-2) !important; /* 100px */ |
width:3 |
w:3 |
width: var(--width-3) !important; /* 150px */ |
width:4 |
w:4 |
width: var(--width-4) !important; /* 200px */ |
width:5 |
w:5 |
width: var(--width-5) !important; /* 250px */ |
width:6 |
w:6 |
width: var(--width-6) !important; /* 300px */ |
width:7 |
w:7 |
width: var(--width-7) !important; /* 350px */ |
width:8 |
w:8 |
width: var(--width-8) !important; /* 400px */ |
width:9 |
w:9 |
width: var(--width-9) !important; /* 450px */ |
width:10 |
w:10 |
width: var(--width-10) !important; /* 500px */ |
width:1p |
w:1p |
width: var(--width-percent-1) !important; /* 10% */ |
width:2p |
w:2p |
width: var(--width-percent-2) !important; /* 20% */ |
width:3p |
w:3p |
width: var(--width-percent-3) !important; /* 30% */ |
width:4p |
w:4p |
width: var(--width-percent-4) !important; /* 40% */ |
width:5p |
w:5p |
width: var(--width-percent-5) !important; /* 50% */ |
width:6p |
w:6p |
width: var(--width-percent-6) !important; /* 60% */ |
width:7p |
w:7p |
width: var(--width-percent-7) !important; /* 70% */ |
width:8p |
w:8p |
width: var(--width-percent-8) !important; /* 80% */ |
width:9p |
w:9p |
width: var(--width-percent-9) !important; /* 90% */ |
width:10p |
w:10p |
width: var(--width-percent-10) !important; /* 100% */ |
width:1/2 |
w:1/2 |
width: 50% !important; |
width:1/3 |
w:1/3 |
width: 33% !important; |
width:2/3 |
w:2/3 |
width: 66% !important; |
width:1/4 |
w:1/4 |
width: 25% !important; |
width:2/4 |
w:2/4 |
width: 50% !important; |
width:3/4 |
w:3/4 |
width: 75% !important; |
width:1/5 |
w:1/5 |
width: 20% !important; |
width:2/5 |
w:2/5 |
width: 40% !important; |
width:3/5 |
w:3/5 |
width: 60% !important; |
width:4/5 |
w:4/5 |
width: 80% !important; |
width:100p |
w:100p |
width: 100% !important; |
width:100vw |
w:100vw |
width: 100vw !important; |
width:100svw |
w:100svw |
width: 100svw !important; |
width:100lvw |
w:100lvw |
width: 100lvw !important; |
width:100dvw |
w:100dvw |
width: 100dvw !important; |
width:min-content |
w:min-content |
width: min-content !important; |
width:max-content |
w:max-content |
width: max-content !important; |
width:fit-content |
w:fit-content |
width: fit-content !important; |
width:auto |
w:auto |
width: auto !important; |
기본 너비값 var(--width) 설정과 관련된 내용은 여기를 참고해주세요.