정의 및 사용 방법
text-emphasis-position
속성은
text-emphasis-style
로 지정된 요소의 텍스트 강조 표시 위치를 지정합니다.
이 속성을 사용하면 텍스트 강조 표시의 기본 위치 이외에도 다른 위치에 설정할 수 있습니다.
기본 예제
텍스트 강조 표시 위치는 over right 입니다.
참고 사항 - 관련 속성들
강조 표시 위치를 설정하는 text-emphasis-position
속성 이외에도 텍스트의 강조 표시 스타일과 관련된 속성들이 있습니다.
다음의 속성들과 함께 사용하면 텍스트 강조 표시를 좀 더 다양하게 스타일링할 수 있습니다.
text-emphasis-style
|
강조 표시 모양을 설정합니다. |
---|---|
text-emphasis-color
|
강조 표시 색상을 설정합니다. |
text-emphasis
|
강조 표시 모양과 색상을 한 번에 설정할 수 있는 단축 속성입니다. |
알아두세요!
text-emphasis-position
속성은 텍스트 강조 표시의 모양과 색상을 한 번에 지정하는 단축 속성인 text-emphasis
로 재설정할 수 없습니다.
형식 구문
/*
[ over | under ]
텍스트 강조 표시의 수직 위치를 지정하는 부분으로,
"over" 또는 "under" 중 하나를 선택합니다.
이 부분은 `필수` 사항입니다.
[ right | left ]?:
텍스트 강조 표시의 수평 위치를 지정하는 부분으로,
"right" 또는 "left" 중 하나를 선택할 수 있습니다.
이 부분은 `선택` 사항입니다.
지정하지 않을 경우 초깃값인 "right"가 적용됩니다.
*/
selector {
text-emphasis-position: [ over | under ] && [ right | left ]?;
}
형식 정의
초깃값 | over right |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
값
over |
가로 쓰기 모드에서 텍스트 위에 표시를 그립니다. |
---|---|
under |
가로 쓰기 모드에서 텍스트 아래에 표시를 그립니다. |
right |
세로 쓰기 모드에서 텍스트 오른쪽에 표시를 그립니다. |
left |
세로 쓰기 모드에서 텍스트 왼쪽에 표시를 그립니다. |
over
| under
가로 쓰기 모드에서 텍스트 강조 표시의 수직 위치를 지정하는 부분으로, over
값은 텍스트 위에 표시를 그리고, under
값은 텍스트 아래에 표시를 그립니다.
이 부분은 필수 사항입니다. 초깃값은 over
입니다.
right
| left
세로 쓰기 모드에서 텍스트 강조 표시의 수평 위치를 지정하는 부분으로, right
값은 텍스트 오른쪽에 표시를 그리고, left
값은 텍스트 왼쪽에 표시를 그립니다. 세로 쓰기 모드를 사용하는 아시아권 언어(한국어, 일본어, 중국어, 몽골어 등)에서 사용되는 텍스트 강조 표시를 제어하기 위해 고안되었습니다.
이 부분은 선택 사항입니다. 초깃값은 right
입니다.
알아두세요!
강조 표시의 위치는 언어에 따라 다를 수 있습니다.
예를 들어, 일본어에서는 강조 표시의 위치가 오른쪽 위 (over right) 가 선호되지만, 중국어에서는 오른쪽 아래 (under right) 가 일반적으로 사용됩니다.
이 차이는 세로 쓰기 모드에서의 텍스트 강조 표시를 어떻게 다루는지에 대한 문화적·기술적 차이에서 비롯됩니다.
활용 예제
[ right
| left
]는 선택 사항으로 생략 가능
p span {
text-emphasis-style: '하';
text-emphasis-color: red;
text-emphasis-position: under; /* [ right | left ]는 선택 사항으로 생략 가능함 */
font-size: 1.5em;
}
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
텍스트에 강조 표시가 있습니다.
세로 쓰기 모드
p span {
writing-mode: vertical-rl; /* 세로 쓰기 모드 */
text-emphasis-style: '하';
text-emphasis-color: red;
text-emphasis-position: over left;
font-size: 1.5em;
}
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
텍스트에 강조 표시가 있습니다.
주의할 점
right
| left
]를 사용할 경우 반드시 [ over
| under
] 값이 지정되어 있어야 합니다. 그렇지 않을 경우 적용되지 않습니다.
p span {
writing-mode: vertical-rl; /* 세로 쓰기 모드 */
text-emphasis-style: '하';
text-emphasis-color: red;
text-emphasis-position: left; /* 적용 안 됨 */
font-size: 1.5em;
}
left
값이 적용되지 않았습니다.
텍스트에 강조 표시가 있습니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-emphasis-position
|
99 | 99 | 46 | 7 |
명세서
명세서 사양 | |
---|---|
text-emphasis-position
|
CSS Text Decoration Module Level 4 #text-emphasis-position-property |