CSS text-emphasis 속성이란?
text-emphasis 속성은 요소의 텍스트 위나 아래에 강조 기호(emphasis mark)를 표시하는 CSS 속성입니다. 주로 동아시아권 언어(한국어, 일본어, 중국어)에서 특정 단어나 문구를 강조할 때 사용되며, 마침표·원·삼각형 등 다양한 기호를 텍스트에 덧붙여 시각적으로 돋보이게 만들 수 있습니다.
기본 문법
text-emphasis: text-emphasis-style text-emphasis-color;
주요 하위 속성
1. text-emphasis-style
요소의 텍스트에 표시될 강조 기호의 모양을 지정합니다. 사용 가능한 주요 값은 다음과 같습니다.
none: 강조 기호를 표시하지 않습니다.filled: 속이 채워진 기호를 사용합니다. (기본값)open: 속이 빈 기호를 사용합니다.dot: 작은 점(•) 형태의 기호를 표시합니다.circle: 원(●) 형태의 기호를 표시합니다.double-circle: 이중 원(◎) 형태의 기호를 표시합니다.triangle: 삼각형(▲) 형태의 기호를 표시합니다.sesame: 참깨 모양(、)의 기호를 표시합니다.
또한 임의의 문자열(예: '★')을 직접 지정하여 원하는 기호로 강조할 수도 있습니다.
2. text-emphasis-color
강조 기호의 전경색(foreground color)을 지정합니다. 색상 이름, HEX 코드, RGB·HSL 값 등 CSS에서 지원하는 모든 색상 표기 방식을 사용할 수 있습니다. 값을 생략하면 텍스트의 현재 색상(currentcolor)이 기본적으로 적용됩니다.
사용 예제
.emphasis-text {
text-emphasis: filled circle #e74c3c;
}위 코드는 해당 텍스트에 빨간색(#e74c3c)의 채워진 원형 강조 기호를 표시합니다.
.custom-mark {
text-emphasis: '★' gold;
}이처럼 문자열을 지정하면 별표(★) 같은 사용자 정의 기호도 강조 표시로 활용할 수 있습니다.
참고 사항
- 강조 기호의 위치는
text-emphasis-position속성으로 조절할 수 있으며, 언어 설정에 따라 텍스트 위 또는 아래에 배치됩니다. text-emphasis는 개별 하위 속성(text-emphasis-style,text-emphasis-color)을 한 번에 선언하는 축약형(shorthand) 속성입니다.- 대부분의 최신 브라우저에서 지원되지만, 구버전 브라우저에서는 벤더 접두사(예:
-webkit-text-emphasis)가 필요할 수 있습니다.