아웃라인 너비

아웃라인 너비 (Outline Width)

요소의 아웃라인(outline) 두께를 정하는 유틸리티예요. CSS의 outline-width 속성을 조절해요.

출처: 문서

본문

클래스와 스타일

outline — outline-width: 1px;
outline-<number> — outline-width: <number>px;
outline-(length:<custom-property>) — outline-width: var(<custom-property>);
outline-[<value>] — outline-width: <value>;

기본 예제

outline 또는 outline-<number> 유틸리티(예: outline-2, outline-4)를 쓰면 요소 아웃라인의 너비를 정할 수 있어요.

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

포커스 시 적용

outline-width 유틸리티 앞에 focus:* 같은 변형을 붙이면 그 상태에서만 유틸리티가 적용돼요.

<button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Save Changes</button>

버튼을 포커스하면 아웃라인이 추가되는 것을 볼 수 있어요. 변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

커스텀 값 사용하기

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

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

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

<div class="outline-(length:--my-outline-width) ...">
  <!-- ... -->
</div>

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

반응형 디자인

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

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

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

아웃라인 너비