CSS text-emphasis 속성으로 텍스트 강조하기
CSS의 text-emphasis 속성을 사용하면 텍스트에 강조 표시(emphasis mark)를 추가하고, 그 강조 표시의 색상까지 한 번에 지정할 수 있습니다. 이 속성은 주로 일본어·중국어 등 동아시아 언어권에서 흔히 볼 수 있는 점이나 원 모양의 강조 기호를 텍스트 위쪽이나 아래쪽에 표시할 때 유용하게 활용됩니다.
기본 문법
다음 예제처럼 강조 스타일과 색상을 함께 지정합니다.
text-emphasis: text-emphasis-style text-emphasis-color;
여기서 각 값의 의미는 다음과 같습니다.
- text-emphasis-style: 요소의 텍스트에 적용할 강조 표시의 모양을 지정합니다.
dot(점),circle(원),double-circle(이중 원),triangle(삼각형),sesame(참깨 모양) 같은 키워드를 사용하거나, 원하는 문자를 직접 지정할 수도 있습니다. - text-emphasis-color: 강조 표시의 전경색(foreground color)을 지정합니다. 색상 이름, HEX 코드, RGB 값 등 일반적인 CSS 색상 값을 그대로 사용할 수 있습니다.
활용 예제
em {
text-emphasis: filled circle red;
}위 코드는 <em> 요소의 텍스트 위에 빨간색 원형 강조 표시를 추가합니다. 이처럼 text-emphasis 속성 하나만으로 강조 기호의 모양과 색상을 손쉽게 제어할 수 있어, 특정 단어나 문장을 시각적으로 돋보이게 만들 때 매우 편리합니다.