outline-style 속성의 이해

outline-style 속성은 요소의 경계(border) 바깥쪽에 있는
outline(외곽선)이 나타나는지 여부와,
나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.

이 속성은 요소의 네 면(위, 아래, 왼쪽, 오른쪽)에 있는 outline(외곽선) 여부와 스타일을 동일하게 설정합니다.

outline(외곽선)은 요소 경계(border) 밖에 그려지는 선입니다. CSS outline 속성 – 요소 경계 밖에 있는 외곽선을 설정하는 단축 속성을 참고하세요.

기본적으로 이 선은 요소의 경계(border) 바깥쪽에 그려지지만, outline-offset 속성을 사용하면 outline(외곽선)과 경계(border) 사이의 간격을 조정해서 요소의 경계(border) 안쪽으로도 그릴 수 있습니다.

데모

다음의 CSS 데모로 outline-style 속성의 사용 방법을 확인해 보세요.

CSS 데모: outline-style 데모 버튼을 클릭해 보세요!

알아두세요!
border-style은 border-top-style, border-bottom-style과 같이 각 면을 개별적으로 지정할 수 있지만,
outline-style은 요소의 네 면(위, 아래, 왼쪽, 오른쪽)이 동일하게 지정됩니다.
따라서, outline-top-style, outline-bottom-style, outline-left-style, outline-right-style과 같은 속성이 없습니다.

형식 구문

CSS 
selector {
    outline-style: <outline-style>
}

구문

CSS 
/* 키워드 값 */
outline-style: none; /* 초깃값 */
outline-style: auto;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/* 전역 값 */
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;

값

outline(외곽선)의 스타일을 설명합니다. 다음 값을 가질 수 있습니다.

<outline-style>

요소에 outline(외곽선)이 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.
초깃값은 none입니다.

초깃값입니다. outline(외곽선)을 표시하지 않습니다.
outline-width 값이 지정되어 있더라도 무시되고 계산된 값은 0이 됩니다.

부연설명
outline-width 속성은 요소 outline(외곽선)의 두께, 즉 너비를 지정합니다.

브라우저가 특정 상황에 따라 적절한 스타일을 결정해서 표시합니다. 브라우저 종류나 버전에 따라 다를 수 있습니다.

명세서에 따르면 "일반적으로 플랫폼의 사용자 인터페이스 기본 스타일이거나 CSS에서 자세히 설명할 수 있는 것보다 더 풍부한 스타일, 예를 들어 반투명 바깥쪽 픽셀이 있는 둥근 모서리 outline(외곽선)은 빛나는 것처럼 보입니다."라고 설명되어 있습니다.

HTML 
<p class="auto">auto</p>
CSS 
.auto {
    outline-width: 10px;
    outline-style: auto;
    background-color: #c2d089;
}
실제 적용된 모습

둥근 점이 간격을 두고 연속적으로 표시됩니다. 점의 간격은 명세서에 정의되어 있지 않습니다.

예제
HTML 
<p class="dotted">dotted</p>
CSS 
.dotted {
    outline-width: 10px;
    outline-style: dotted;
    background-color: #c2d089;
}
실제 적용된 모습

직사각형이 간격을 두고 연속적으로 표시됩니다. 사각형의 크기와 간격은 명세서에 정의되어 있지 않습니다.

예제
HTML 
<p class="dashed">dashed</p>
CSS 
.dashed {
    outline-width: 10px;
    outline-style: dashed;
    background-color: #c2d089;
}
실제 적용된 모습

직선으로 표시됩니다.

예제
HTML 
<p class="solid">solid</p>
CSS 
.solid {
    outline-width: 10px;
    outline-style: solid;
    background-color: #c2d089;
}
실제 적용된 모습

두 개의 평행한 직선으로 표시됩니다.

예제
HTML 
<p class="double">double</p>
CSS 
.double {
    outline-width: 10px;
    outline-style: double;
    background-color: #c2d089;
}
실제 적용된 모습

outline(외곽선) 두께 중앙이 날카롭게 홈이 파인듯한 음영으로 표시됩니다. ridge 값과 반대로 표시됩니다.

예제
HTML 
<p class="groove">groove</p>
CSS 
.groove {
    outline-width: 10px;
    outline-style: groove;
    background-color: #c2d089;
}
실제 적용된 모습

outline(외곽선) 두께 중앙이 날카롭게 도드라진 음영으로 표시됩니다. groove 값과 반대로 표시됩니다.

예제
HTML 
<p class="ridge">ridge</p>
CSS 
.ridge {
    outline-width: 10px;
    outline-style: ridge;
    background-color: #c2d089;
}
실제 적용된 모습

outline(외곽선)으로 인해 요소가 outline(외곽선) 안쪽으로 눌려 꺼진 것처럼 표시합니다. outset 값과 반대로 표시됩니다.

예제
HTML 
<p class="inset">inset</p>
CSS 
.inset {
    outline-width: 10px;
    outline-style: inset;
    background-color: #c2d089;
}
실제 적용된 모습

outline(외곽선)으로 인해 요소가 outline(외곽선) 안쪽에서 볼록 솟아 있는 것처럼 표시합니다. inset 값과 반대로 표시됩니다.

예제
HTML 
<p class="outset">outset</p>
CSS 
.outset {
    outline-width: 10px;
    outline-style: outset;
    background-color: #c2d089;
}
실제 적용된 모습

형식 정의

outline-style 속성의 형식 정의
초깃값 none
적용 요소 모든 요소
상속 아니오
애니메이션 아니오

접근성 고려사항

outline(외곽선)은 키보드 사용자나 보조 기술을 사용하는 사용자가 현재 포커스된 요소를 쉽게 식별할 수 있도록 브라우저에서 시각적 표시를 위해 기본적으로 제공합니다.

outline-style에 none 값을 지정하면 기본 포커스 스타일이 사라집니다. 이렇게 outline(외곽선)을 제거하면 키보드 네비게이션을 사용하는 사용자들이 현재 포커스된 요소를 확인할 수 없게 되어, 웹 접근성이 크게 저하됩니다.

권장 사항

가급적 포커스되는 요소에는 outline(외곽선)을 제거하지 마세요. 부득이 제거해야 한다면 반드시 명확한 대체 스타일을 제공해야 합니다.

CSS 
button:focus {
    outline-style: none; /* 기본 스타일 제거 */
    box-shadow: 0 0 4px 2px #4CAF50; /* 대체 스타일 */
}

코드 부연설명
:focus 가상 클래스는 요소가 포커스되었을 동안 해당 요소를 선택합니다.

브라우저 호환성

outline-style 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
outline-style 1 12 1 1.2
auto 1 12 1.5 1.2

명세서

outline-style 속성의 명세서 사양
명세서 사양
outline-style CSS Basic User Interface Module Level 4
#outline-style

참고문헌

같이 보기