정의 및 사용 방법
text-emphasis
속성은
요소의 텍스트에 강조 표시 모양과 색상을 지정합니다.
이 속성은 요소의 텍스트에 강조 표시 모양을 지정하는 text-emphasis-style
과 색상을 지정하는 text-emphasis-color
속성을 한 번에 지정할 수 있는 단축 속성입니다.
기본 예제
텍스트 강조 표시 값이 dot입니다.
형식 구문
selector {
text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>
/*
이 값은
text-emphasis-style,
text-emphasis-color 속성의 값입니다.
지정하는 속성 값의 순서는 상관없습니다.
지정하지 않은(생략한) 속성의 값은 초깃값이 적용됩니다.
*/
}
구문
/* 초깃값 */
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: '&'; /* 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-style
|
강조 표시 모양을 설정합니다. |
---|---|
text-emphasis-color
|
강조 표시 색상을 설정합니다. |
알아두세요!
텍스트 강조 표시 위치를 지정하는 text-emphasis-position
속성은 강조 표시의 모양과 색상을 한 번에 지정하는 단축 속성인 text-emphasis
로 재설정할 수 없습니다.
텍스트에 강조 표시 적용 범위
text-emphasis-style
속성은 각 텍스트 문자에 대해 강조 마크를 한 번씩 그려줍니다. 하지만 다음 문자들에는 강조 표시가 그려지지 않습니다.
- 공백: 단어 구분을 위한 공백 문자에는 강조 표시가 적용되지 않습니다.
- 컨트롤 문자: 텍스트의 흐름을 제어하는 특수 문자들 (예: 줄 바꿈, 탭 등)에도 강조 표시가 적용되지 않습니다.
- 구두점: 일부 구두점 문자들도 강조 마크가 그려지지 않습니다. 예를 들어 #, %, @, & 등이 이에 해당합니다.
참고하세요!
명세서에서는 향후 텍스트에 강조 표시 적용 범위에 대한 추가 가능성이 있다고 언급하고 있습니다.
형식 정의
초깃값 | 각 단축 속성별로:
text-emphasis-style : none
text-emphasis-color : currentcolor (현재 글자색) |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
예제
키워드 값과 색상 값
p span {
text-emphasis: triangle red;
}
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
텍스트에 강조 표시가 있습니다.
키워드 값과 색상 값 주의할 점
p span {
text-emphasis: open red circle;
/*
text-emphasis-style 값이 두 개일 경우
text-emphasis-color 값이 그 사이에 올 수 없습니다.
*/
}
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
text-emphasis-style
값이 두 개일 경우 text-emphasis-color
값이 그 사이에 올 수 없습니다. 따라서 화면에 적용되지 않습니다.
텍스트에 강조 표시가 있습니다.
'커스텀 문자'
p span {
text-emphasis: '하';
font-size: 1.5em;
}
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
텍스트에 강조 표시가 있습니다.
주의할 점
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-emphasis
|
99 | 99 | 46 | 7 |
명세서
명세서 사양 | |
---|---|
text-emphasis
|
CSS Text Decoration Module Level 4 #text-emphasis-property |