CSS outline-color 속성 – 요소 외곽선의 색상 지정

`outline-color` 속성의 이해

outline-color 속성은
요소 outline(외곽선)의 색상을 지정합니다.

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

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

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

데모

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

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

형식 구문

구문

CSS

/* <색상> 값: CSS에서 지원하는 색상 값 */
outline-color: blue;
outline-color: #00a0e9;
outline-color: rgba(0, 0, 0, 0.5);
outline-color: currentcolor; /* 현재 요소의 글자색 */

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

값

<색상> 값을 사용할 수 있습니다. 이 값은 CSS에서 지원하는 색상 값입니다.

초깃값

auto입니다.

명세서에서는 auto 값이 초깃값으로 명시되어 있지만 현재 어떤 브라우저에서도 지원하지 않습니다. 이 값은 미래의 명세서 구현에 따라 동작이 결정될 것이라고 추측합니다.

실제 동작은 대부분 currentcolor(현재 요소의 글자색)입니다.

예제

CSS

p {
    color: red;
    outline-width: 7px;
    outline-style: solid;
    /* outline(외곽선) 색상은 글자색인 red로 설정된다. */
} 

/* 요소에 마우스를 올려 놓았을 동안에는
   outline(외곽선) 색상은 글자색인 blue로 설정된다. */
p:hover {
    color: blue;
}

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

코드 부연설명
outline-style 속성은 요소 outline(외곽선)의 스타일을 지정합니다.

코드 부연설명
:hover 가상 클래스 선택자는 요소에 마우스 커서를 올려 놓았을 동안 해당 요소를 선택합니다.

형식 정의

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

접근성 고려사항

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

outline-color 색상 값을 조정하는 경우 outline(외곽선)과 outline(외곽선)이 놓인 배경 사이의 대비율이 시력이 약한 사람이 인식할 수 있을 만큼 충분히 높은지 확인하는 것이 중요합니다. 이는 WCAG(웹 콘텐츠 접근성 지침)에서 권장하는 기준입니다.

WCAG(Web Content Accessibility Guidelines)

WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 가이드라인)는 웹 콘텐츠를 누구나 접근하고 사용할 수 있도록 하는 기술적인 지침입니다. 장애 유형이나 기술적 제약 없이 모든 사람이 웹 콘텐츠를 동등하게 이용할 수 있도록 보장하는 것이 목표입니다.

예제

다음은 <button> 요소가 포커스되었을 때 outline(외곽선)으로 포커스 스타일을 설정하는 예제입니다.

CSS

button {
    border: 1px solid #6699ff;
    padding: 0.8em;
    border-radius: 0.4em;
    background-color: #e6eeff;
}
button:focus { /*  포커스 스타일을 설정 */
    background-color: #ccddff;
    outline-width: 2px;
    outline-style: dashed;
    outline-color: #003cb3;
    outline-offset: 3px;
}

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

코드 부연설명
outline-offset 속성은 요소의 outline(외곽선)이 요소의 경계(border)로부터 떨어진 거리, 즉 간격을 지정합니다.

브라우저 호환성

outline-color 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`outline-color`	1	12	1.5	1.2

명세서

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

참고문헌

MDN - outline-color

outline-color 속성의 이해

데모