outline-width 속성의 이해

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

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

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

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

데모

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

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

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

형식 구문

CSS 
selector {
    outline-width: <길이>
}

구문

CSS 
/* <길이> 지정 */
outline-width: 10px;
outline-width: 1em;
outline-width: thin;
outline-width: medium; /* 초깃값 */
outline-width: thick;
outline-width: 0;

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

값

<길이> 값을 사용할 수 있습니다.
길이 값은 양수나 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의 두께 패턴은 항상 유지합니다.

예제
HTML 
<p class="thin">thin</p>
<p class="medium">medium</p>
<p class="thick">thick</p>
CSS 
.thin {
    outline-style: solid;
    outline-width: thin;
}
.medium {
    outline-style: solid;
    outline-width: medium;
}
.thick {
    outline-style: solid;
    outline-width: thick;
}

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

실제 적용된 모습

형식 정의

outline-width 속성의 형식 정의
초깃값 medium
적용 요소 모든 요소
상속 아니오
계산된 값 outline-width: 절대적 <길이>
(단, outline-style이 none일 경우에는 0)
애니메이션 예

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

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

outline-width을 설정하더라도 요소 크기 및 레이아웃에 영향을 주지 않습니다.

브라우저 호환성

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

명세서

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

참고문헌

같이 보기