레이아웃
top / right / bottom / left
위치가 지정된 엘리먼트의 배치를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
inset-<number> | inset: calc(var(--spacing) * <number>); |
-inset-<number> | inset: calc(var(--spacing) * -<number>); |
inset-<fraction> | inset: calc(<fraction> * 100%); |
-inset-<fraction> | inset: calc(<fraction> * -100%); |
inset-px | inset: 1px; |
-inset-px | inset: -1px; |
inset-full | inset: 100%; |
-inset-full | inset: -100%; |
inset-auto | inset: auto; |
inset-(<custom-property>) | inset: var(<custom-property>); |
inset-[<value>] | inset: <value>; |
inset-x-<number> | inset-inline: calc(var(--spacing) * <number>); |
-inset-x-<number> | inset-inline: calc(var(--spacing) * -<number>); |
inset-x-<fraction> | inset-inline: calc(<fraction> * 100%); |
-inset-x-<fraction> | inset-inline: calc(<fraction> * -100%); |
inset-x-px | inset-inline: 1px; |
-inset-x-px | inset-inline: -1px; |
inset-x-full | inset-inline: 100%; |
-inset-x-full | inset-inline: -100%; |
inset-x-auto | inset-inline: auto; |
inset-x-(<custom-property>) | inset-inline: var(<custom-property>); |
inset-x-[<value>] | inset-inline: <value>; |
inset-y-<number> | inset-block: calc(var(--spacing) * <number>); |
-inset-y-<number> | inset-block: calc(var(--spacing) * -<number>); |
inset-y-<fraction> | inset-block: calc(<fraction> * 100%); |
-inset-y-<fraction> | inset-block: calc(<fraction> * -100%); |
inset-y-px | inset-block: 1px; |
-inset-y-px | inset-block: -1px; |
inset-y-full | inset-block: 100%; |
-inset-y-full | inset-block: -100%; |
inset-y-auto | inset-block: auto; |
inset-y-(<custom-property>) | inset-block: var(<custom-property>); |
inset-y-[<value>] | inset-block: <value>; |
start-<number> | inset-inline-start: calc(var(--spacing) * <number>); |
-start-<number> | inset-inline-start: calc(var(--spacing) * -<number>); |
start-<fraction> | inset-inline-start: calc(<fraction> * 100%); |
-start-<fraction> | inset-inline-start: calc(<fraction> * -100%); |
start-px | inset-inline-start: 1px; |
-start-px | inset-inline-start: -1px; |
start-full | inset-inline-start: 100%; |
-start-full | inset-inline-start: -100%; |
start-auto | inset-inline-start: auto; |
start-(<custom-property>) | inset-inline-start: var(<custom-property>); |
start-[<value>] | inset-inline-start: <value>; |
end-<number> | inset-inline-end: calc(var(--spacing) * <number>); |
-end-<number> | inset-inline-end: calc(var(--spacing) * -<number>); |
end-<fraction> | inset-inline-end: calc(<fraction> * 100%); |
-end-<fraction> | inset-inline-end: calc(<fraction> * -100%); |
end-px | inset-inline-end: 1px; |
-end-px | inset-inline-end: -1px; |
end-full | inset-inline-end: 100%; |
-end-full | inset-inline-end: -100%; |
end-auto | inset-inline-end: auto; |
end-(<custom-property>) | inset-inline-end: var(<custom-property>); |
end-[<value>] | inset-inline-end: <value>; |
top-<number> | top: calc(var(--spacing) * <number>); |
-top-<number> | top: calc(var(--spacing) * -<number>); |
top-<fraction> | top: calc(<fraction> * 100%); |
-top-<fraction> | top: calc(<fraction> * -100%); |
top-px | top: 1px; |
-top-px | top: -1px; |
top-full | top: 100%; |
-top-full | top: -100%; |
top-auto | top: auto; |
top-(<custom-property>) | top: var(<custom-property>); |
top-[<value>] | top: <value>; |
right-<number> | right: calc(var(--spacing) * <number>); |
-right-<number> | right: calc(var(--spacing) * -<number>); |
right-<fraction> | right: calc(<fraction> * 100%); |
-right-<fraction> | right: calc(<fraction> * -100%); |
right-px | right: 1px; |
-right-px | right: -1px; |
right-full | right: 100%; |
-right-full | right: -100%; |
right-auto | right: auto; |
right-(<custom-property>) | right: var(<custom-property>); |
right-[<value>] | right: <value>; |
bottom-<number> | bottom: calc(var(--spacing) * <number>); |
-bottom-<number> | bottom: calc(var(--spacing) * -<number>); |
bottom-<fraction> | bottom: calc(<fraction> * 100%); |
-bottom-<fraction> | bottom: calc(<fraction> * -100%); |
bottom-px | bottom: 1px; |
-bottom-px | bottom: -1px; |
bottom-full | bottom: 100%; |
-bottom-full | bottom: -100%; |
bottom-auto | bottom: auto; |
bottom-(<custom-property>) | bottom: var(<custom-property>); |
bottom-[<value>] | bottom: <value>; |
left-<number> | left: calc(var(--spacing) * <number>); |
-left-<number> | left: calc(var(--spacing) * -<number>); |
left-<fraction> | left: calc(<fraction> * 100%); |
-left-<fraction> | left: calc(<fraction> * -100%); |
left-px | left: 1px; |
-left-px | left: -1px; |
left-full | left: 100%; |
-left-full | left: -100%; |
left-auto | left: auto; |
left-(<custom-property>) | left: var(<custom-property>); |
left-[<value>] | left: <value>; |
예제
기본 예제
top-<number>, right-<number>, bottom-<number>, left-<number>, 그리고 inset-<number> 유틸리티를 사용하여 포지셔닝된 엘리먼트의 수평 또는 수직 위치를 설정할 수 있습니다. 예를 들어 top-0과 bottom-4를 사용할 수 있습니다.
01
02
03
04
05
06
07
08
09
<!-- 왼쪽 상단 모서리에 고정 --><div class="relative size-32 ..."> <div class="absolute top-0 left-0 size-16 ...">01</div></div><!-- 상단 가장자리에 걸침 --><div class="relative size-32 ..."> <div class="absolute inset-x-0 top-0 h-16 ...">02</div></div><!-- 오른쪽 상단 모서리에 고정 --><div class="relative size-32 ..."> <div class="absolute top-0 right-0 size-16 ...">03</div></div><!-- 왼쪽 가장자리에 걸침 --><div class="relative size-32 ..."> <div class="absolute inset-y-0 left-0 w-16 ...">04</div></div><!-- 부모 전체를 채움 --><div class="relative size-32 ..."> <div class="absolute inset-0 ...">05</div></div><!-- 오른쪽 가장자리에 걸침 --><div class="relative size-32 ..."> <div class="absolute inset-y-0 right-0 w-16 ...">06</div></div><!-- 왼쪽 하단 모서리에 고정 --><div class="relative size-32 ..."> <div class="absolute bottom-0 left-0 size-16 ...">07</div></div><!-- 하단 가장자리에 걸침 --><div class="relative size-32 ..."> <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div></div><!-- 오른쪽 하단 모서리에 고정 --><div class="relative size-32 ..."> <div class="absolute right-0 bottom-0 size-16 ...">09</div></div>음수 값 사용하기
음수 top/right/bottom/left 값을 사용하려면 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환합니다:
<div class="relative size-32 ..."> <div class="absolute -top-4 -left-4 size-14 ..."></div></div>논리적 속성 사용하기
start-<number>와 end-<number> 유틸리티를 사용해 inset-inline-start와 inset-inline-end 논리적 속성을 설정할 수 있습니다. 이 속성들은 텍스트 방향에 따라 왼쪽 또는 오른쪽에 매핑됩니다. 예를 들어 start-0과 end-4를 사용할 수 있습니다.
왼쪽에서 오른쪽
오른쪽에서 왼쪽
<div dir="ltr"> <div class="relative size-32 ..."> <div class="absolute start-0 top-0 size-14 ..."></div> </div> <div> <div dir="rtl"> <div class="relative size-32 ..."> <div class="absolute start-0 top-0 size-14 ..."></div> </div> <div></div> </div> </div></div>더 세밀한 제어를 원한다면 LTR 및 RTL 수정자를 사용해 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수 있습니다.
커스텀 값 사용하기
inset-[<value>] 그리고 top-[<value>]와 같은 유틸리티를 사용하세요 position를 완전히 커스텀한 값으로 설정하려면:
<div class="inset-[3px] ..."> <!-- ... --></div>CSS 변수를 사용하려면 inset-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="inset-(--my-position) ..."> <!-- ... --></div>이는 inset-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 inset,inset-x,inset-y,start,end,top,left,bottom, 그리고 right 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="top-4 md:top-6 ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스터마이징
inset-<number>,inset-x-<number>,inset-y-<number>,start-<number>,end-<number>,top-<number>,left-<number>,bottom-<number>, and right-<number> 유틸리티는 --spacing 테마 변수에 의해 결정되며, 이 변수는 여러분의 테마에서 커스텀할 수 있습니다:
@theme { --spacing: 1px; }스페이싱 스케일 커스터마이징에 대해 더 알아보려면 테마 변수 문서를 참고하세요.
