text-emphasis 관련 속성들

text-emphasis 속성은 요소의 텍스트에 강조 표시를 설정합니다. 이 속성은 text-emphasis-style, text-emphasis-color을 한 번에 지정하는 단축 속성(shorthand property)입니다. text-emphasis 속성의 사용 방법에 대해 알아봅니다.

주의하세요!
text-emphasis-position 속성은 text-emphasis 속성으로 재설정할 수 없습니다.

text-emphasis-position 속성

같이 보기

사용법

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

형식 구문

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

형식 정의

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

구문

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: 'Korea'; /*  문자를 두 개 이상 사용할 경우 처음의 맨 앞 문자만 표시됨. => K만 표시됨 */
text-emphasis: '*';
text-emphasis: '\00A9'; /* CSS 엔티티 사용 가능 => ©로 표시됨*/
text-emphasis: '&'; /* 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-style로 지정된 요소의 텍스트 강조 표시 색상을 설정합니다.

예제

키워드 값과 색상 값

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

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

CSS 
p span {
    text-emphasis: open red circle;
    /*
        text-emphasis-style 값이 두 개일 경우
        text-emphasis-color 값이 그 사이에 올 수 없습니다.
    */
}
HTML 
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
실제 적용 모습 text-emphasis-style 값이 두 개일 경우 text-emphasis-color 값이 그 사이에 올 수 없습니다. 따라서 화면에 적용되지 않습니다.

'커스텀 문자'

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

브라우저 호환성

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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

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

참고문헌

같이 보기