outline
요소의 외곽선을 설정하는 속성입니다. border와 달리 레이아웃에 영향을 주지 않으며, 주로 포커스 인디케이터로 사용됩니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
oln | outline: none | outline 완전 제거. 포커스 인디케이터 제거 시 사용 |
olss | outline-style: solid | 실선 outline. 커스텀 포커스 스타일에 주로 사용 |
olsd | outline-style: dashed | 파선 outline. 드래그/드롭 영역 표시 |
olsdt | outline-style: dotted | 점선 outline. 보조적 시각 힌트 |
olsdb | outline-style: double | 이중선 outline. 강한 강조 표시 |
olsg | outline-style: groove | groove(홈 파인) 3D 효과 |
olsr | outline-style: ridge | ridge(돌출) 3D 효과 |
olsi | outline-style: inset | inset(안쪽) 3D 효과 |
olso | outline-style: outset | outset(바깥쪽) 3D 효과 |
olsn | outline-style: none | outline-style만 none 설정 |
시각적 비교
각 outline-style 값이 요소에 어떤 영향을 주는지 비교합니다.
solid — olss
dashed — olsd
dotted — olsdt
double — olsdb
groove — olsg
ridge — olsr
none — oln
inset — olsi
outline vs border — 레이아웃 영향 비교
outline은 레이아웃에 영향을 주지 않고, border는 요소의 크기에 포함됩니다.
outline (레이아웃 영향 없음)
outline이 있어도 옆 요소와의 간격이 변하지 않음
border (레이아웃에 포함)
border 두께만큼 요소 크기가 커지고 간격에 영향
outline-width & outline-offset 패턴
ow{N}px로 두께를, oo{N}px로 요소와의 간격을 조절합니다.
| 패턴 | CSS | 예시 |
|---|---|---|
| ow{N}px | outline-width: {N}px | ow2px |
| ow{N}rem | outline-width: {N}rem | ow0-3rem |
| oo{N}px | outline-offset: {N}px | oo4px |
| oo{N}rem | outline-offset: {N}rem | oo0-2rem |
| neg-oo{N}px | outline-offset: -{N}px | neg-oo4px |
클래스별 상세
olnoutline: none
요소의 outline을 완전히 제거합니다. 브라우저 기본 포커스 인디케이터를 없앨 때 사용하지만, 접근성 문제를 반드시 고려해야 합니다.
<!-- 기본 포커스 outline 제거 + 커스텀 포커스 스타일 -->
<button class="oln focus-visible-olss focus-visible-ow2px py8px px16px bg6366F1 cFFFFFF br8px bn cp">
접근성 유지 버튼
</button>
<!-- 주의: oln만 단독 사용은 접근성 문제! -->
<input class="oln py8px px16px bg18181B cFFFFFF br4px b1pxsolid27272A" />접근성 주의
oln을 사용하면 키보드 사용자가 포커스 위치를 알 수 없습니다. 반드시 focus-visible- 프리픽스로 커스텀 포커스 스타일을 제공하세요.
olssoutline-style: solid
실선 스타일의 outline을 적용합니다. 가장 일반적인 outline 스타일이며, 커스텀 포커스 인디케이터를 만들 때 주로 사용합니다.
<!-- 커스텀 포커스 인디케이터 -->
<button class="oln focus-visible-olss focus-visible-ow2px oo2px py8px px16px bg18181B cFFFFFF br8px bn cp">
포커스 시 solid outline
</button>
<!-- outline-width, outline-offset 조합 -->
<div class="olss ow2px oo4px p2rem bg18181B br4px cFFFFFF">
solid outline + offset
</div>olsdoutline-style: dashed
파선(대시) 스타일의 outline을 적용합니다. 드래그 영역, 드롭 대상 등을 시각적으로 구분할 때 활용합니다.
<!-- 드롭 영역 표시 -->
<div class="olsd ow2px p3-2rem bg18181B br8px df jcc aic cA1A1AA">
파일을 여기에 드롭하세요
</div>olsdtoutline-style: dotted
점선 스타일의 outline을 적용합니다. 보조적인 시각적 힌트나 디버깅 용도로 사용합니다.
<!-- 보조 힌트 영역 -->
<div class="olsdt ow2px p2rem bg18181B br4px cA1A1AA">
dotted outline 영역
</div>olsdboutline-style: double
이중선 스타일의 outline을 적용합니다. 강조가 필요한 요소에 사용하며, outline-width가 최소 3px 이상이어야 이중선이 보입니다.
<!-- 강조 영역 (최소 3px 이상 필요) -->
<div class="olsdb ow4px p2rem bg18181B br4px cFFFFFF">
double outline 강조
</div>olsgolsrolsiolsogroove / ridge / inset / outset
3D 효과의 outline 스타일입니다. 브라우저에 따라 렌더링이 다를 수 있으며, 현대 웹에서는 잘 사용하지 않습니다.
<!-- 3D 스타일 outline -->
<div class="olsg ow3px p2rem bg18181B cA1A1AA mb8px">groove</div>
<div class="olsr ow3px p2rem bg18181B cA1A1AA mb8px">ridge</div>
<div class="olsi ow3px p2rem bg18181B cA1A1AA mb8px">inset</div>
<div class="olso ow3px p2rem bg18181B cA1A1AA">outset</div>olsg | groove — 홈이 파인 듯한 3D 효과 |
olsr | ridge — 돌출된 듯한 3D 효과 (groove의 반대) |
olsi | inset — 안쪽으로 들어간 듯한 3D 효과 |
olso | outset — 바깥으로 나온 듯한 3D 효과 (inset의 반대) |
olsnoutline-style: none
outline 스타일을 none으로 설정합니다. oln과 유사하지만, outline-style만 개별적으로 제어할 때 사용합니다.
<!-- outline-style만 개별 제어 -->
<div class="olsn p2rem bg18181B cA1A1AA">
outline-style: none
</div>팁 & 주의사항
oln 사용 시 접근성 대안 필수
oln으로 기본 포커스를 제거하면 키보드 사용자가 현재 위치를 알 수 없습니다. 반드시 focus-visible-과 함께 커스텀 스타일을 제공하세요.
outline은 레이아웃에 영향 없음
border와 달리 outline은 요소의 크기나 위치에 영향을 주지 않습니다. 포커스 시 레이아웃이 밀리지 않는 장점이 있습니다.
outline-offset으로 간격 조절
oo{N}px를 사용하면 outline과 요소 사이에 간격을 줄 수 있습니다. 음수 값도 가능하여 요소 안쪽으로 outline을 그릴 수 있습니다.