테두리
outline-offset
엘리먼트의 아웃라인 오프셋을 조절하는 유틸리티입니다.
| Class | Styles |
|---|---|
outline-offset-<number> | outline-offset: <number>px; |
-outline-offset-<number> | outline-offset: calc(<number>px * -1); |
outline-offset-(length:<custom-property>) | outline-offset: var(<custom-property>); |
outline-offset-[<value>] | outline-offset: <value>; |
예제
기본 예제
outline-offset-2와 outline-offset-4 같은 유틸리티를 사용해 엘리먼트의 아웃라인 오프셋을 변경할 수 있습니다.
outline-offset-0
outline-offset-2
outline-offset-4
<button class="outline-2 outline-offset-0 ...">버튼 A</button><button class="outline-2 outline-offset-2 ...">버튼 B</button><button class="outline-2 outline-offset-4 ...">버튼 C</button>커스텀 값 사용하기
outline-offset-[<value>] 구문을 사용하세요 outline offset를 완전히 커스텀한 값으로 설정하려면:
<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() 함수를 추가해 줍니다.
반응형 디자인
접두사 an outline-offset 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="outline md:outline-offset-2 ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
