outline-style
요소의 outline 선 스타일을 설정합니다. outline은 border와 달리 레이아웃 공간을 차지하지 않으며, 주로 포커스 표시나 디버깅용으로 사용합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
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 효과 outline |
olsr | outline-style: ridge | ridge 효과 outline |
olsi | outline-style: inset | inset 효과 outline |
olso | outline-style: outset | outset 효과 outline |
olsn | outline-style: none | outline 제거 |
시각적 비교
각 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 on focus -->
<input class="py8px px16px br8px bg18181B cFAFAFA bn focus-olss focus-ow2px" placeholder="Focus here" />
<!-- Dashed outline emphasis -->
<div class="olsd ow2px p2rem cFAFAFA">
Dashed outline area
</div>
<!-- Remove outline (alternative style required) -->
<button class="olsn py8px px16px br8px bg6366F1 cFFFFFF bn cp focus-olss focus-ow2px">
Custom focus
</button>outline vs border
| outline | border | |
|---|---|---|
| 공간 차지 | Does not take up space | Takes up space (affects element size) |
| border-radius 적용 | Varies by browser | Always applied |
| 개별 방향 설정 | Not possible (all sides only) | top/right/bottom/left Can be set individually |
| 주요 용도 | Focus indicator, debugging | Design borders, dividers |
팁 & 주의사항
접근성과 포커스
outline은 키보드 포커스 표시에 중요합니다. olsn(outline-style: none)으로 제거할 때는 반드시 대체 포커스 스타일을 제공하세요.
레이아웃에 영향 없음
outline은 border와 달리 요소 크기나 레이아웃에 영향을 주지 않습니다. 포커스 시 레이아웃 밀림 없이 시각적 피드백을 줄 때 유용합니다.