AAtomic CSS

outline-style

요소의 outline 선 스타일을 설정합니다. outline은 border와 달리 레이아웃 공간을 차지하지 않으며, 주로 포커스 표시나 디버깅용으로 사용합니다.

클래스 목록

클래스CSS설명
olssoutline-style: solid실선 outline
olsdoutline-style: dashed대시 outline
olsdtoutline-style: dotted점선 outline
olsdboutline-style: double이중선 outline
olsgoutline-style: groovegroove 효과 outline
olsroutline-style: ridgeridge 효과 outline
olsioutline-style: insetinset 효과 outline
olsooutline-style: outsetoutset 효과 outline
olsnoutline-style: noneoutline 제거

시각적 비교

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

solid — olss

solid

dashed — olsd

dashed

dotted — olsdt

dotted

double — olsdb

double

groove — olsg

groove

ridge — olsr

ridge

inset — olsi

inset

outset — olso

outset

사용 예시

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

<!-- dashed outline 강조 -->
<div class="olsd ow2px p2rem cFAFAFA">
  대시 outline 영역
</div>

<!-- outline 제거 (대체 스타일 필수) -->
<button class="olsn py8px px16px br8px bg6366F1 cFFFFFF bn cp focus-olss focus-ow2px">
  커스텀 포커스
</button>

outline vs border

outlineborder
공간 차지차지하지 않음차지함 (요소 크기 영향)
border-radius 적용브라우저에 따라 다름항상 적용
개별 방향 설정불가 (전체만)top/right/bottom/left 개별 설정 가능
주요 용도포커스 표시, 디버깅디자인 테두리, 구분선

팁 & 주의사항

접근성과 포커스

outline은 키보드 포커스 표시에 중요합니다. olsn(outline-style: none)으로 제거할 때는 반드시 대체 포커스 스타일을 제공하세요.

레이아웃에 영향 없음

outline은 border와 달리 요소 크기나 레이아웃에 영향을 주지 않습니다. 포커스 시 레이아웃 밀림 없이 시각적 피드백을 줄 때 유용합니다.

outline-widthoutline-offsetborderborder-width