width
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) 설정과 관련된 내용은 여기를 참고해주세요.