CSS text-decoration-skip-ink 속성

`text-decoration-skip-ink` 속성의 이해

text-decoration-skip-ink 속성은
text-decoration-line으로 설정된 윗줄(overline 값)이나 밑줄(underline 값)이 글자와 겹칠 경우 겹치는 부위의 선 일부를 생략할지 아니면 그대로 그을지를 지정합니다.

명세서에서는 윗줄과 밑줄 모두에 적용된다고 설명하지만, 실제로는 밑줄과 겹치는 글자(예: p, j, g, q 등)에서 주로 사용됩니다. 윗줄과 겹치는 글자는 거의 없기 때문입니다.

형식 구문

구문

CSS

/* 키워드 값 */
text-decoration-skip-ink: auto;
text-decoration-skip-ink: none;

/* 전역 값 */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;

형식 정의

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

값

text-decoration-skip-ink 속성 값
`auto`	초깃값. 설정된 윗줄(`overline` 값)이나 밑줄(`underline` 값)이 글자와 겹칠 경우 겹치는 부위의 선 일부를 생략합니다.
`none`	설정된 윗줄(`overline` 값)이나 밑줄(`underline` 값)이 글자와 겹칠 경우 겹치는 부위의 선 일부를 생략하지 않고 그대로 긋습니다.

알아두세요!
명세서에서는 text-decoration-skip-ink 속성의 값으로 all도 정의하고 있지만,
대부분의 브라우저에서 지원하지 않아, 여기에서는 다루지 않았습니다. 브라우저 호환성을 참조하세요.

예제

HTML

<h4>text-decoration-skip-ink: auto</h4>
<p class="skip-ink-auto">
    ABCDEF ghijklm 가나다라 12345
</p>
<h4>text-decoration-skip-ink: none</h4>
<p class="skip-ink-none">
    ABCDEF ghijklm 가나다라 12345
</p>

CSS

p {
    font-size: 2em;
}
.skip-ink-auto {
    text-decoration: underline blue;
    text-decoration-skip-ink: auto;
}
.skip-ink-none {
    text-decoration: underline red;
    text-decoration-skip-ink: none;
}