아웃라인 오프셋

아웃라인 오프셋 (Outline Offset)

요소의 아웃라인(outline)이 테두리(border)에서부터 얼마나 떨어져 그려질지 정하는 유틸리티예요. CSS의 outline-offset 속성을 조절해요.

출처: 문서

본문

클래스와 스타일

  • outline-offset-<number> — outline-offset: <number>px;
  • -outline-offset-<number> — outline-offset: calc(<number>px * -1);
  • outline-offset-(<custom-property>) — outline-offset: var(<custom-property>);
  • outline-offset-[<value>] — outline-offset: <value>;

기본 예제

outline-offset-2나 outline-offset-4 같은 유틸리티를 쓰면 요소 아웃라인의 오프셋을 바꿀 수 있어요.

<button class="outline-2 outline-offset-0 ...">Button A</button>
<button class="outline-2 outline-offset-2 ...">Button B</button>
<button class="outline-2 outline-offset-4 ...">Button C</button>

커스텀 값 사용하기

outline-offset-[<value>] 문법을 쓰면 완전히 커스텀한 값으로 아웃라인 오프셋을 정할 수 있어요.

<div class="outline-offset-[2vw] ...">
  <!-- ... -->
</div>

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

<div class="outline-offset-(--my-outline-offset) ...">
  <!-- ... -->
</div>

이건 outline-offset-[var(<custom-property>)]의 축약형이라서 var() 함수를 자동으로 붙여줘요.

반응형 디자인

outline-offset 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<div class="outline md:outline-offset-2 ...">
  <!-- ... -->
</div>

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

더 알아보기 (Learn more)