CSS outline 속성 – 요소 경계 밖에 있는 외곽선을 설정하는 단축 속성

`outline` 속성의 이해

outline 속성은
요소의 경계(border) 바깥쪽에 있는 외곽선의 너비, 스타일, 색상을 지정합니다.

outline 속성은 다음의 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

border 속성의 구성 속성
`outline-width`	요소 외곽선의 두께, 즉 너비를 지정합니다.
`outline-style`	요소의 외곽선이 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.
`outline-color`	요소 외곽선의 색상을 지정합니다.

outline 속성으로 설정되는 이 선을 outline(외곽선)이라고 말합니다.

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

데모

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

HTML

<p class="solid">1px solid blue outline</p>
<p class="dashed">5px dashed green outline</p>
<p class="dotted">thick dotted outline</p>
<p class="groove">groove outline</p>
<p class="ridge">ridge outline</p>
<p class="inset">inset outline</p>
<p class="outset">outset outline</p>
<p class="double">double outline</p>

CSS

/* 공통 스타일 */
p {
    padding: 1em;
    margin: 2.5em 0;
    border: 3px solid red;
    /* 이해를 돕기 위해
       요소 경계(border) 테두리 설정
       (3px 두께의 빨간색 직선) */
}

/* outline(외곽선) */
.solid {
    outline: 10px solid blue;
}
.dashed {
    outline: 5px dashed green;
}
.dotted {
    outline: thick dotted;
}
.groove {
    outline: 15px groove;
}
.ridge {
    outline: 15px ridge;
}
.inset {
    outline: 15px inset;
}
.outset {
    outline: 15px outset;
}
.double {
    outline: 15px double;
}

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

형식 구문

CSS

selector {
    outline: <outline-width> || <outline-style> || <outline-color>
             /* 너비 || 스타일 || 색상 */
             /* 값의 순서는 중요하지 않습니다. 순서는 영향을 주지 않습니다. */
}

구문

CSS

/*
 * outline 속성 값
 * 아래에 나열된 값 중 하나, 둘 또는 셋을 사용하여 지정할 수 있습니다.
 * 값의 순서는 중요하지 않습니다. 순서는 영향을 주지 않습니다.
*/

/* <outline-style> */
outline: none;
outline: solid;
outline: double;

/* <outline-width> | <outline-style>  */
outline: 2px dotted;
outline: 1em inset;
outline: thin inset;

/* <outline-style> | <outline-color> */
outline: dashed red;
outline: rgba(0, 0, 0, 0.5) dashed;

/* <outline-width> | <outline-style> | <outline-color> */
outline: 10px solid #fddd9b;
outline: 10px #fddd9b solid;

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

값

아래에 나열된 값 중 하나, 둘 또는 셋을 사용하여 지정할 수 있습니다.
값의 순서는 중요하지 않습니다. 순서는 영향을 주지 않습니다.
다른 단축 속성(shorthand property)과 마찬가지로 값을 지정하지 않으면(생략하면) 해당하는 속성의 초깃값이 적용됩니다.

<outline-style>은 필수로 지정해야 합니다.
지정하지 않으면 초깃값인 none이 적용되어 outline(외곽선)이 나타나지 않습니다.

`<outline-width>`

outline(외곽선)의 두께, 즉 너비를 지정합니다. outline-width 속성의 값에 해당합니다.
초깃값은 medium입니다.

`<길이>` 값

길이 값은 양수나 0입니다. (음수 값은 유효하지 않습니다.)

상대적 `<길이>` 단위

rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 `<길이>` 단위

px
vh
vw
CSS에서 사용 가능한 길이 단위

주의하세요!
outline-width의 값에는 퍼센트(%) 단위 값을 사용할 수 없습니다.

당연하지만, <길이> 단위 값이 0으로 지정되면 outline(외곽선)이 나타나지 않습니다.

키워드 값

thin - 가는 두께
medium - 보통 두께(초깃값임)
thick - 굵은 두께

명세서에서 각 키워드 값은 정확한 두께를 정의하고 있지 않습니다. 하지만, thin ≤ medium ≤ thick의 두께 패턴은 항상 유지합니다.

예제

`<outline-style>`

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

`none` 값

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

`auto` 값

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

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

`dotted` 값

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

예제

`dashed` 값

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

예제

`solid` 값

직선으로 표시됩니다.

예제

`double` 값

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

예제

`groove` 값

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

예제

`ridge` 값

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

예제

`inset` 값

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

예제

`outset` 값

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

예제

`<outline-color>`

<outline-style>로 설정된 테두리의 전경색을 지정합니다. CSS에서 지원하는 색상 값입니다. outline-color 속성의 값에 해당합니다.

초깃값

auto입니다.

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

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

예제

CSS

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

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

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

형식 정의

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

outline(외곽선)과 요소 크기 및 레이아웃의 관계

outline(외곽선)은 브라우저 렌더링에서 요소의 외부에 그려지므로 요소의 너비나 높이에 영향을 미치지 않습니다. 따라서 절대적 공간을 차지하지 않아 요소 자체나 주변 레이아웃에 영향을 주지 않습니다. 이는 오버플로(overflow, 경계를 넘어섬)하더라도 스크롤에 영향을 주지 않습니다.

다음의 예제를 통해 확인해 보세요.

.box가 위에 렌더링된 outline(외곽선)으로 인해 아래로 밀려 내려가지 않습니다.
outline(외곽선)은 주변 레이아웃에 영향을 주지 않는다는 것을 확인할 수 있습니다.

이러한 성격의 속성으로는 outline, text-shadow, box-shadow 등이 있습니다.

outline(외곽선)과 `border-radius`의 관계

예전에는 border-radius 속성으로 인해서 요소 테두리의 모서리를 둥글게 만들어졌다고 하더라도 그 영향을 받지 않고 사각형으로 그려졌습니다.

하지만, 현재 모든 브라우저에서는 border-radius의 영향을 받게 되었습니다. 이제 outline이 둥근 모서리를 가진 요소에 적용되면, border-radius와 함께 outline(외곽선)도 둥글게 처리됩니다.

부연설명
border-radius 속성은 요소 테두리의 모서리를 둥글게 만드는 속성입니다.

예제를 통해서 확인해 보세요.

CSS

.box {
    width: 150px;
    height: 150px;
    background-color: gold;
    border-radius: 50%;
    border: 2px solid red;
    outline: 5px solid blue;
    outline-offset: 5px; /*  outline(외곽선)과 경계(border) 사이의 간격(5px)을 조정 */
}

접근성 고려사항

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

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

권장 사항

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

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

예제

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

CSS

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

브라우저 호환성

outline 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`outline`	94	94	88	16.4

Chrome 94 이전에는 border-radius 속성의 모양을 따르지 않았습니다.
Edge 94 이전에는 border-radius 속성의 모양을 따르지 않았습니다.
Firefox 88 이전에는 border-radius 속성의 모양을 따르지 않았습니다.
Safari 16.4 이전에는 border-radius 속성의 모양을 따르지 않았습니다.

명세서

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

참고문헌

MDN - outline

outline 속성의 이해

데모

형식 구문

구문

값

<outline-width>

<길이> 값

상대적 <길이> 단위

절대적 <길이> 단위

키워드 값

예제

<outline-style>

none 값

auto 값

dotted 값

예제

dashed 값

예제

solid 값

예제

double 값

예제

groove 값

예제

ridge 값

예제

inset 값

예제

outset 값

예제

<outline-color>

초깃값

예제