AAtomic CSS

outline-width

요소의 outline 두께를 설정합니다. outline-style이 설정되어 있어야 두께가 보이며, border와 달리 레이아웃 공간을 차지하지 않습니다.

클래스 목록

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

클래스CSS설명
ow1pxoutline-width: 1pxoutline 두께 1px
ow2pxoutline-width: 2pxoutline 두께 2px
ow3pxoutline-width: 3pxoutline 두께 3px
ow4pxoutline-width: 4pxoutline 두께 4px

시각적 비교

다양한 outline-width 값을 시각적으로 비교합니다.

1px — ow1px

1px

2px — ow2px

2px

3px — ow3px

3px

4px — ow4px

4px

사용 예시

<!-- 포커스 시 outline 두께 적용 -->
<input class="py8px px16px br8px bg18181B cFAFAFA bn focus-olss focus-ow2px" placeholder="포커스하세요" />

<!-- 다양한 두께의 outline -->
<div class="df gap4rem fww">
  <div class="olss ow1px p2rem cFAFAFA">1px</div>
  <div class="olss ow2px p2rem cFAFAFA">2px</div>
  <div class="olss ow3px p2rem cFAFAFA">3px</div>
</div>

<!-- outline-offset과 조합 -->
<div class="olss ow2px oo4px p2rem cFAFAFA">
  outline과 요소 사이에 간격
</div>

팁 & 주의사항

outline-style 필수

ow{N}px만 단독 사용하면 outline이 보이지 않습니다. olss(outline-style: solid) 등과 함께 사용하세요.

포커스 상태와 조합

focus-ow2px처럼 의사 클래스와 조합하면, 포커스 시에만 outline 두께를 적용할 수 있습니다.

outline-styleoutline-offsetborder-widthborder