테두리
outline-style
엘리먼트의 아웃라인 스타일을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
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 같은 유틸리티를 사용해 엘리먼트의 외곽선 스타일을 설정할 수 있습니다:
outline-solid
outline-dashed
outline-dotted
outline-double
<button class="outline-2 outline-offset-2 outline-solid ...">버튼 A</button><button class="outline-2 outline-offset-2 outline-dashed ...">버튼 B</button><button class="outline-2 outline-offset-2 outline-dotted ...">버튼 C</button><button class="outline-3 outline-offset-2 outline-double ...">버튼 D</button>아웃라인 숨기기
포커스된 엘리먼트의 기본 브라우저 아웃라인을 숨기면서도 강제 색상 모드에서는 아웃라인을 유지하려면 outline-hidden 유틸리티를 사용하세요:
개발자 도구에서 `forced-colors: active`를 에뮬레이트하여 동작을 확인해 보세요
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />이 유틸리티를 사용할 때는 접근성을 위해 직접 포커스 스타일을 적용하는 것을 강력히 권장합니다.
아웃라인 제거하기
포커스된 엘리먼트의 기본 브라우저 아웃라인을 완전히 제거하려면 outline-none 유틸리티를 사용하세요:
<div class="focus-within:outline-2 focus-within:outline-indigo-600 ..."> <textarea class="outline-none ..." placeholder="댓글을 남겨주세요..." /> <button class="..." type="button">게시</button></div>이 유틸리티를 사용할 때는 접근성을 위해 직접 포커스 스타일을 적용하는 것을 강력히 권장합니다.
반응형 디자인
접두사 an outline-style 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="outline md:outline-dashed ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
