CSS text-emphasis 속성

정의 및 사용 방법

text-emphasis 속성은
요소의 텍스트에 강조 표시 모양과 색상을 지정합니다.

이 속성은 요소의 텍스트에 강조 표시 모양을 지정하는 text-emphasis-style과 색상을 지정하는 text-emphasis-color 속성을 한 번에 지정할 수 있는 단축 속성입니다.

기본 예제

형식 구문

CSS

selector {
    text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>
    /*  
        이 값은
        text-emphasis-style,
        text-emphasis-color 속성의 값입니다.
        지정하는 속성 값의 순서는 상관없습니다.
        지정하지 않은(생략한) 속성의 값은 초깃값이 적용됩니다.
    */
}

구문

CSS

/* 초깃값 */
text-emphasis: none; /* 텍스트에 강조 표시 스타일을 적용하지 않음. */

/* 키워드 값 */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: dot;
text-emphasis: circle;
text-emphasis: double-circle;
text-emphasis: triangle;
text-emphasis: sesame;
text-emphasis: open sesame;
text-emphasis: sesame open; /* 좌우 값 상관 없음. => open sesame와 동일  */

/* '커스텀 문자' */
text-emphasis: 'K';
text-emphasis: 'k'; /* 대소문자 구문함 */
text-emphasis: "K"; /* 쌍따옴표 상관 없음 */
text-emphasis: 'Key'; /*  문자를 두 개 이상 사용할 경우 처음의 맨 앞 문자만 표시됨. => K만 표시됨 */
text-emphasis: '*';
text-emphasis: '\00A9'; /* CSS 엔티티 사용 가능 => ©로 표시됨*/
text-emphasis: '&amp;'; /* HTML 엔티티 사용 가능 => &로 표시됨*/

/* 키워드 값과 색상 값 */
text-emphasis: open sesame red;
text-emphasis: filled sesame #00a0e9;

/* 글로벌 값 */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: unset;
text-emphasis: revert;
text-emphasis: revert-layer;

값

text-emphasis 속성은 하나 이상의 공백으로 구분된 값을 지정하며, 이 값들은 text-emphasis-style, text-emphasis-color 속성의 값입니다. 지정하는 값의 순서는 상관없습니다.

text-emphasis 속성 값
`text-emphasis-style`	강조 표시 모양을 설정합니다.
`text-emphasis-color`	강조 표시 색상을 설정합니다.

알아두세요!
텍스트 강조 표시 위치를 지정하는 text-emphasis-position 속성은 강조 표시의 모양과 색상을 한 번에 지정하는 단축 속성인 text-emphasis로 재설정할 수 없습니다.

텍스트에 강조 표시 적용 범위

text-emphasis-style 속성은 각 텍스트 문자에 대해 강조 마크를 한 번씩 그려줍니다. 하지만 다음 문자들에는 강조 표시가 그려지지 않습니다.

공백: 단어 구분을 위한 공백 문자에는 강조 표시가 적용되지 않습니다.
컨트롤 문자: 텍스트의 흐름을 제어하는 특수 문자들 (예: 줄 바꿈, 탭 등)에도 강조 표시가 적용되지 않습니다.
구두점: 일부 구두점 문자들도 강조 마크가 그려지지 않습니다. 예를 들어 #, %, @, & 등이 이에 해당합니다.

참고하세요!
명세서에서는 향후 텍스트에 강조 표시 적용 범위에 대한 추가 가능성이 있다고 언급하고 있습니다.

형식 정의

text-emphasis 속성의 형식 정의
초깃값	각 단축 속성별로: `text-emphasis-style`: `none` `text-emphasis-color`: `currentcolor` (현재 글자색)
적용 요소	모든 요소
상속	예

예제

키워드 값과 색상 값

키워드 값과 색상 값 주의할 점

CSS

p span {
    text-emphasis: open red circle;
    /*
        text-emphasis-style 값이 두 개일 경우
        text-emphasis-color 값이 그 사이에 올 수 없습니다.
    */
}

'커스텀 문자'

주의할 점

text-emphasis 속성은 시각적으로는 강조 효과를 제공하지만, 보조 기술(스크린 리더 등)에는 전달되지 않을 수 있습니다. 접근성을 향상시키려면 상황에 따라 의미론적인 HTML 태그(예: <strong>, <em> 등)나 role 속성의 사용을 고려해 보세요.

브라우저 호환성

text-emphasis 속성에 대한 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`text-emphasis`	99	99	46	7

명세서

text-emphasis 속성에 대한 명세서 사양
명세서 사양
`text-emphasis`	CSS Text Decoration Module Level 4 #text-emphasis-property