CSS text-emphasis-style 속성 : 텍스트 강조 표시 모양 설정

`text-emphasis-style` 속성 사용법

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

형식 정의

text-emphasis-style 속성의 형식 정의
초깃값	`none`
적용 요소	모든 요소
상속	예

값

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

구문

CSS - 값의 구문

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

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: 'Korea'; /*  문자를 두 개 이상 사용할 경우 처음의 맨 앞 문자만 표시됨. => K만 표시됨 */
text-emphasis-style: '*';
text-emphasis-style: '\00A9'; /* CSS 엔티티 사용 가능 => ©로 표시됨*/
text-emphasis-style: '&amp;'; /* 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의 size
명세서에 따르면, text-emphasis-style 속성으로 표시된 기호는 해당 요소 글꼴 설정의 font-size의 50%로 축소한 값을 기호의 font-size에 적용해서 표시합니다.

예제

키워드 값

'커스텀 문자'

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

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

가로 쓰기 모드

위의 예제처럼 가로 쓰기 모드에서 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;
}