아웃라인 스타일

아웃라인 스타일 (Outline Style)

요소의 아웃라인(outline) 스타일(Solid, dashed, dotted 등)을 정하는 유틸리티예요. CSS의 outline-style 속성을 조절해요.

출처: 문서

본문

클래스와 스타일

outline-solid — outline-style: solid;
outline-dashed — outline-style: dashed;
outline-dotted — outline-style: dotted;
outline-double — outline-style: double;
outline-none — outline-style: none;
outline-hidden — outline: 2px solid transparent; outline-offset: 2px;

기본 예제

outline-solid이나 outline-dashed 같은 유틸리티를 쓰면 요소 아웃라인의 스타일을 정할 수 있어요.

<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button>
<button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button>
<button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button>
<button class="outline-3 outline-offset-2 outline-double ...">Button D</button>

아웃라인 숨기기

outline-hidden 유틸리티를 쓰면 포커스된 요소의 기본 브라우저 아웃라인을 숨기면서도, forced colors 모드에서는 아웃라인을 그대로 유지해요.

<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />

개발자 도구에서 forced-colors: active를 에뮬레이션해 보면 이 동작을 직접 확인할 수 있어요. 이 유틸리티를 쓸 때는 접근성을 위해 자신만의 포커스 스타일을 적용하는 것을 강력히 권장해요.

아웃라인 제거하기

outline-none 유틸리티를 쓰면 포커스된 요소의 기본 브라우저 아웃라인을 완전히 제거해요.

<div class="focus-within:outline-2 focus-within:outline-indigo-600 ...">
  <textarea class="outline-none ..." placeholder="Leave a comment..." />
  <button class="..." type="button">Post</button>
</div>

이 유틸리티를 쓸 때는 접근성을 위해 자신만의 포커스 스타일을 적용하는 것을 강력히 권장해요.

반응형 디자인

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

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

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

아웃라인 스타일