정의 및 사용 방법

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

이 속성을 사용하면 지원하는 다양한 값 중에서 원하는 텍스트 강조 표시 모양을 설정할 수 있습니다.

기본 예제

CSS 라이브 데모: text-emphasis-style 데모 버튼을 클릭해 보세요!

참고 사항 - 관련 속성들

강조 표시 모양을 설정하는 text-emphasis-style 속성 이외에도 텍스트의 강조 표시 스타일과 관련된 속성들이 있습니다.
다음의 속성들과 함께 사용하면 텍스트 강조 표시를 좀 더 다양하게 스타일링할 수 있습니다.

text-emphasis-style의 관련 속성들
text-emphasis-color 강조 표시 색상을 설정합니다.
text-emphasis 강조 표시 모양과 색상을 한 번에 설정할 수 있는 단축 속성입니다.
text-emphasis-position 강조 표시 위치을 설정합니다.

형식 구문

CSS 
selector {
    text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | [ '커스텀 문자' ]
}

값

text-emphasis-style 속성에 사용하는 값의 의미는 다음과 같습니다.

text-emphasis-style 속성 값
none 텍스트에 강조 표시 스타일을 적용하지 않습니다.
filled 텍스트를 채운 형태의 강조 표시 스타일을 적용합니다.
open 텍스트를 비어 있는 형태의 강조 표시 스타일을 적용합니다.
dot 텍스트 주위에 점을 사용한 강조 표시 스타일을 적용합니다.
circle 텍스트 주위에 원을 사용한 강조 표시 스타일을 적용합니다.
double-circle 텍스트 주위에 이중 원을 사용한 강조 표시 스타일을 적용합니다.
triangle 텍스트 주위에 삼각형을 사용한 강조 표시 스타일을 적용합니다.
sesame 텍스트 주위에 참깨 모양을 사용한 강조 표시 스타일을 적용합니다.
'커스텀 문자' 텍스트 주위에 지정한 문자을 사용한 강조 표시 스타일을 적용합니다. 문자를 두 개 이상 사용할 경우 처음의 맨 앞 문자만 표시됩니다.

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

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

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

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

구문

CSS 
/* 키워드 값 */
text-emphasis-style: none; /* 텍스트에 강조 표시 스타일을 적용하지 않음. */
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: sesame;
text-emphasis-style: open sesame;
text-emphasis-style: sesame open; /* 좌우 값 상관 없음. => open sesame와 동일  */

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

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

형식 정의

text-emphasis-style 속성의 형식 정의
초깃값 none
적용 요소 모든 요소
상속 예
애니메이션 아니오

참고: text-emphasis-style의 size
명세서에 따르면, text-emphasis-style 속성으로 표시된 기호는 해당 요소 글꼴 설정의 font-size의 50%로 축소한 값을 기호에 적용해서 표시합니다.

다양한 예제

키워드 값

CSS 
p span {
    text-emphasis-style: triangle;
}
HTML 
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
실제 적용 모습

'커스텀 문자'

CSS 
p span {
    text-emphasis-style: '하';
    font-size: 1.5em;
}
HTML 
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
실제 적용 모습

filled 또는 open 값만을 지정할 경우

filled 또는 open 값만을 지정할 경우 가로 쓰기 모드와 세로 쓰기 모드에서 표현되는 방식이 다릅니다.

가로 쓰기 모드
CSS - 가로 쓰기 모드 
p span {
    text-emphasis-style: open; /* text-emphasis-style: open dot;와 동일 */
    font-size: 1.5em;
}
HTML 
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
실제 적용 모습 text-emphasis-style: open dot;와 동일하게 표시합니다.

위의 예제처럼 가로 쓰기 모드에서 open 값만을 지정할 경우 text-emphasis-style: open dot;와 동일하게 표시합니다. 만약에 filled 값만을 지정할 경우 text-emphasis-style: filled dot;와 동일하게 표시합니다

세로 쓰기 모드

아래의 예제처럼 세로 쓰기 모드에서 open 값만을 지정할 경우 text-emphasis-style: open sesame;와 동일하게 표시합니다. 만약에 filled 값만을 지정할 경우 text-emphasis-style: filled sesame;와 동일하게 표시합니다

CSS - 세로 쓰기 모드 
p span {
    writing-mode: vertical-rl; /* 세로 쓰기 모드 */
    text-emphasis-style: open; /* text-emphasis-style: open sesame;와 동일 */
    font-size: 1.5em;
}
HTML 
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
실제 적용 모습 text-emphasis-style: open sesame;와 동일하게 표시합니다.

주의할 점

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

브라우저 호환성

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

명세서

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

참고문헌

같이 보기