AAtomic CSS

outline-offset

outline과 요소 border 사이의 간격을 설정합니다. 양수 값은 outline을 바깥으로, 음수 값은 안쪽으로 이동시킵니다. 포커스 링을 요소와 분리하여 더 명확한 시각적 피드백을 제공할 때 유용합니다.

클래스 목록

패턴 기반 클래스입니다. oo{N}px 형식으로 숫자와 단위를 조합하여 사용합니다.

클래스CSS설명
oo1pxoutline-offset: 1pxoutline 간격 1px
oo2pxoutline-offset: 2pxoutline 간격 2px
oo4pxoutline-offset: 4pxoutline 간격 4px
oo8pxoutline-offset: 8pxoutline 간격 8px

시각적 비교

다양한 outline-offset 값을 시각적으로 비교합니다. outline-style과 outline-width가 함께 설정되어야 보입니다.

0px (기본) — oo0px

0px (기본)

2px — oo2px

2px

4px — oo4px

4px

8px — oo8px

8px

사용 예시

<!-- 포커스 시 offset이 있는 outline -->
<input class="py8px px16px br8px bg18181B cFAFAFA bn focus-olss focus-ow2px focus-oo2px" placeholder="포커스하세요" />

<!-- 다양한 offset 비교 -->
<div class="df gap4rem fww">
  <div class="olss ow2px p2rem cFAFAFA">offset 없음</div>
  <div class="olss ow2px oo2px p2rem cFAFAFA">offset 2px</div>
  <div class="olss ow2px oo4px p2rem cFAFAFA">offset 4px</div>
</div>

<!-- 버튼 포커스 링 -->
<button class="py8px px16px br8px bg6366F1 cFFFFFF bn cp focus-olss focus-ow2px focus-oo2px">
  포커스 링 버튼
</button>

팁 & 주의사항

outline-style 필수

oo{N}px만 단독 사용하면 효과가 없습니다. olss(outline-style: solid)와 ow{N}px와 함께 사용하세요.

음수 값으로 안쪽 offset

neg-oo2px처럼 음수 값을 사용하면 outline이 요소 안쪽으로 들어갑니다.

접근성 포커스 링

offset을 적용하면 포커스 링이 요소와 분리되어 더 명확해집니다. 특히 어두운 배경에서 oo2px 정도의 간격이 가독성을 높입니다.

outline-styleoutline-widthborderborder-width