위치 지정: 위/오른쪽/아래/왼쪽

위치 지정: 위/오른쪽/아래/왼쪽 (Top Right Bottom Left)

위치(position)가 지정된 요소의 위(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>; inset-s-<number> inset-inline-start: calc(var(--spacing) * <number>); -inset-s-<number> inset-inline-start: calc(var(--spacing) * -<number>); inset-s-<fraction> inset-inline-start: calc(<fraction> * 100%); -inset-s-<fraction> inset-inline-start: calc(<fraction> * -100%); inset-s-px inset-inline-start: 1px; -inset-s-px inset-inline-start: -1px; inset-s-full inset-inline-start: 100%; -inset-s-full inset-inline-start: -100%; inset-s-auto inset-inline-start: auto; inset-s-(<custom-property>) inset-inline-start: var(<custom-property>); inset-s-[<value>] inset-inline-start: <value>; inset-e-<number> inset-inline-end: calc(var(--spacing) * <number>); -inset-e-<number> inset-inline-end: calc(var(--spacing) * -<number>); inset-e-<fraction> inset-inline-end: calc(<fraction> * 100%); -inset-e-<fraction> inset-inline-end: calc(<fraction> * -100%); inset-e-px inset-inline-end: 1px; -inset-e-px inset-inline-end: -1px; inset-e-full inset-inline-end: 100%; -inset-e-full inset-inline-end: -100%; inset-e-auto inset-inline-end: auto; inset-e-(<custom-property>) inset-inline-end: var(<custom-property>); inset-e-[<value>] inset-inline-end: <value>; inset-bs-<number> inset-block-start: calc(var(--spacing) * <number>); -inset-bs-<number> inset-block-start: calc(var(--spacing) * -<number>); inset-bs-<fraction> inset-block-start: calc(<fraction> * 100%); -inset-bs-<fraction> inset-block-start: calc(<fraction> * -100%); inset-bs-px inset-block-start: 1px; -inset-bs-px inset-block-start: -1px; inset-bs-full inset-block-start: 100%; -inset-bs-full inset-block-start: -100%; inset-bs-auto inset-block-start: auto; inset-bs-(<custom-property>) inset-block-start: var(<custom-property>); inset-bs-[<value>] inset-block-start: <value>; inset-be-<number> inset-block-end: calc(var(--spacing) * <number>); -inset-be-<number> inset-block-end: calc(var(--spacing) * -<number>); inset-be-<fraction> inset-block-end: calc(<fraction> * 100%); -inset-be-<fraction> inset-block-end: calc(<fraction> * -100%); inset-be-px inset-block-end: 1px; -inset-be-px inset-block-end: -1px; inset-be-full inset-block-end: 100%; -inset-be-full inset-block-end: -100%; inset-be-auto inset-block-end: auto; inset-be-(<custom-property>) inset-block-end: var(<custom-property>); inset-be-[<value>] inset-block-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>;

예시 (Examples)

기본 예제 (Basic example)

top-0, bottom-4 같은 top-<number>, right-<number>, bottom-<number>, left-<number>, inset-<number> 유틸리티를 사용하면 위치가 지정된 요소의 가로·세로 위치를 설정할 수 있어요.

<!-- Pin to top left corner --><div class="relative size-32 ...">
  <div class="absolute top-0 left-0 size-16 ...">01</div>
</div><!-- Span top edge --><div class="relative size-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">02</div>
</div><!-- Pin to top right corner --><div class="relative size-32 ...">
  <div class="absolute top-0 right-0 size-16 ...">03</div>
</div><!-- Span left edge --><div class="relative size-32 ...">
  <div class="absolute inset-y-0 left-0 w-16 ...">04</div>
</div><!-- Fill entire parent --><div class="relative size-32 ...">
  <div class="absolute inset-0 ...">05</div>
</div><!-- Span right edge --><div class="relative size-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">06</div>
</div><!-- Pin to bottom left corner --><div class="relative size-32 ...">
  <div class="absolute bottom-0 left-0 size-16 ...">07</div>
</div><!-- Span bottom edge --><div class="relative size-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div>
</div><!-- Pin to bottom right corner --><div class="relative size-32 ...">
  <div class="absolute right-0 bottom-0 size-16 ...">09</div>
</div>

음수 값 사용하기 (Using negative values)

음수 top/right/bottom/left 값을 사용하려면 클래스 이름 앞에 하이픈(-)을 붙여 음수로 변환하면 돼요.

<div class="relative size-32 ...">
  <div class="absolute -top-4 -left-4 size-14 ..."></div>
</div>

논리 속성 사용하기 (Using logical properties)

inset-s-0, inset-e-4 같은 inset-s-<number> 또는 inset-e-<number> 유틸리티를 사용하면 inset-inline-start와 inset-inline-end 논리 속성을 설정할 수 있어요. 이 속성들은 텍스트 방향에 따라 왼쪽 또는 오른쪽에 매핑돼요.

<div dir="ltr">
  <div class="relative size-32 ...">
    <div class="absolute inset-s-0 top-0 size-14 ..."></div>
  </div>
  <div>
    <div dir="rtl">
      <div class="relative size-32 ...">
        <div class="absolute inset-s-0 top-0 size-14 ..."></div>
      </div>
      <div></div>
    </div>
  </div>
</div>

더 세밀하게 제어하려면 LTR과 RTL 수식어(modifier)를 사용해서 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수도 있어요.

커스텀 값 사용하기 (Using a custom value)

inset-[<value>], top-[<value>] 같은 유틸리티를 사용하면 완전히 커스텀한 값으로 위치를 설정할 수 있어요.

<div class="inset-[3px] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 inset-(<custom-property>) 문법을 사용할 수도 있어요.

<div class="inset-(--my-position) ...">
  <!-- ... -->
</div>

이것은 inset-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

inset, inset-x, inset-y, inset-s, inset-e, inset-bs, inset-be, top, left, bottom, right 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="top-4 md:top-6 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

테마 커스터마이징 (Customizing your theme)

inset-<number>, inset-x-<number>, inset-y-<number>, inset-s-<number>, inset-e-<number>, inset-bs-<number>, inset-be-<number>, top-<number>, left-<number>, bottom-<number>, right-<number> 유틸리티는 --spacing 테마 변수에 의해 결정돼요. 이 변수는 여러분의 테마에서 커스터마이즈할 수 있어요.

@theme {
  --spacing: 1px;
}

스페이싱 스케일 커스터마이징에 대해 더 자세히 알고 싶다면 theme 변수 문서를 확인해 보세요.

더 알아보기 (Learn more)