bottom
bottom 속성에 대한 유틸리티입니다.
요소의 수직 위치를 지정합니다. 이 속성은 position이 지정되지 않은 요소들에는 영향을 미치지 않습니다.
변수 --bottom, --bottom-percent는 여기를 참고해주세요.
| 클래스 | 약어 클래스 | 속성 |
|---|---|---|
bottom:0 | bottom: 0 !important;/* 0 */ | |
bottom:1 | bottom: var(--bottom-1) !important;/* 0 */ | |
bottom:2 | bottom: var(--bottom-2) !important;/* 100px */ | |
bottom:3 | bottom: var(--bottom-3) !important;/* 200px */ | |
bottom:4 | bottom: var(--bottom-4) !important;/* 300px */ | |
bottom:5 | bottom: var(--bottom-5) !important;/* 400px */ | |
bottom:6 | bottom: var(--bottom-6) !important;/* 500px */ | |
bottom:7 | bottom: var(--bottom-7) !important;/* 600px */ | |
bottom:8 | bottom: var(--bottom-8) !important;/* 700px */ | |
bottom:9 | bottom: var(--bottom-9) !important;/* 800px */ | |
bottom:10 | bottom: var(--bottom-10) !important;/* 900px */ | |
bottom:1p | bottom: var(--bottom-percent-1) !important;/* 10% */ | |
bottom:2p | bottom: var(--bottom-percent-2) !important;/* 20% */ | |
bottom:3p | bottom: var(--bottom-percent-3) !important;/* 30% */ | |
bottom:4p | bottom: var(--bottom-percent-4) !important;/* 40% */ | |
bottom:5p | bottom: var(--bottom-percent-5) !important;/* 50% */ | |
bottom:6p | bottom: var(--bottom-percent-6) !important;/* 60% */ | |
bottom:7p | bottom: var(--bottom-percent-7) !important;/* 70% */ | |
bottom:8p | bottom: var(--bottom-percent-8) !important;/* 80% */ | |
bottom:9p | bottom: var(--bottom-percent-9) !important;/* 90% */ | |
bottom:10p | bottom: var(--bottom-percent-10) !important;/* 100% */ | |
bottom:1/2 | bottom: 50% !important; | |
bottom:1/3 | bottom: 33% !important; | |
bottom:2/3 | bottom: 66% !important; | |
bottom:1/4 | bottom: 25% !important; | |
bottom:2/4 | bottom: 50% !important; | |
bottom:3/4 | bottom: 75% !important; | |
bottom:1/5 | bottom: 20% !important; | |
bottom:2/5 | bottom: 40% !important; | |
bottom:3/5 | bottom: 60% !important; | |
bottom:4/5 | bottom: 80% !important; | |
bottom:-1 | bottom: calc(var(--bottom-1) * -1) !important;/* 0 */ | |
bottom:-2 | bottom: calc(var(--bottom-2) * -1) !important;/* -100px */ | |
bottom:-3 | bottom: calc(var(--bottom-3) * -1) !important;/* -200px */ | |
bottom:-4 | bottom: calc(var(--bottom-4) * -1) !important;/* -300px */ | |
bottom:-5 | bottom: calc(var(--bottom-5) * -1) !important;/* -400px */ | |
bottom:-6 | bottom: calc(var(--bottom-6) * -1) !important;/* -500px */ | |
bottom:-7 | bottom: calc(var(--bottom-7) * -1) !important;/* -600px */ | |
bottom:-8 | bottom: calc(var(--bottom-8) * -1) !important;/* -700px */ | |
bottom:-9 | bottom: calc(var(--bottom-9) * -1) !important;/* -800px */ | |
bottom:-10 | bottom: calc(var(--bottom-10) * -1) !important;/* -900px */ | |
bottom:-1p | bottom: calc(var(--bottom-percent-1) * -1) !important; /* -10% */ | |
bottom:-2p | bottom: calc(var(--bottom-percent-2) * -1) !important; /* -20% */ | |
bottom:-3p | bottom: calc(var(--bottom-percent-3) * -1) !important; /* -30% */ | |
bottom:-4p | bottom: calc(var(--bottom-percent-4) * -1) !important; /* -40% */ | |
bottom:-5p | bottom: calc(var(--bottom-percent-5) * -1) !important; /* -50% */ | |
bottom:-6p | bottom: calc(var(--bottom-percent-6) * -1) !important; /* -60% */ | |
bottom:-7p | bottom: calc(var(--bottom-percent-7) * -1) !important; /* -70% */ | |
bottom:-8p | bottom: calc(var(--bottom-percent-8) * -1) !important; /* -80% */ | |
bottom:-9p | bottom: calc(var(--bottom-percent-9) * -1) !important; /* -90% */ | |
bottom:-10p | bottom: calc(var(--bottom-percent-10) * -1) !important; /* -100% */ | |
bottom:-1/2 | bottom: calc(50% * -1) !important; | |
bottom:-1/3 | bottom: calc(33% * -1) !important; | |
bottom:-2/3 | bottom: calc(66% * -1) !important; | |
bottom:-1/4 | bottom: calc(25% * -1) !important; | |
bottom:-2/4 | bottom: calc(50% * -1) !important; | |
bottom:-3/4 | bottom: calc(75% * -1) !important; | |
bottom:-1/5 | bottom: calc(20% * -1) !important; | |
bottom:-2/5 | bottom: calc(40% * -1) !important; | |
bottom:-3/5 | bottom: calc(60% * -1) !important; | |
bottom:-4/5 | bottom: calc(80% * -1) !important; |