CSS text-emphasis-position 속성 – 텍스트 강조 표시 위치 설정

정의 및 사용 방법

text-emphasis-position 속성은
text-emphasis-style로 지정된 요소의 텍스트 강조 표시 위치를 지정합니다.

이 속성을 사용하면 텍스트 강조 표시의 기본 위치 이외에도 다른 위치에 설정할 수 있습니다.

기본 예제

참고 사항 - 관련 속성들

강조 표시 위치를 설정하는 text-emphasis-position 속성 이외에도 텍스트의 강조 표시 스타일과 관련된 속성들이 있습니다.
다음의 속성들과 함께 사용하면 텍스트 강조 표시를 좀 더 다양하게 스타일링할 수 있습니다.

`text-emphasis-style`의 관련 속성들
`text-emphasis-style`	강조 표시 모양을 설정합니다.
`text-emphasis-color`	강조 표시 색상을 설정합니다.
`text-emphasis`	강조 표시 모양과 색상을 한 번에 설정할 수 있는 단축 속성입니다.

알아두세요!
text-emphasis-position 속성은 텍스트 강조 표시의 모양과 색상을 한 번에 지정하는 단축 속성인 text-emphasis로 재설정할 수 없습니다.

형식 구문

CSS

/*
    [ over | under ]
    텍스트 강조 표시의 수직 위치를 지정하는 부분으로,
    "over" 또는 "under" 중 하나를 선택합니다.
    이 부분은 `필수` 사항입니다.
    
    [ right | left ]?:
    텍스트 강조 표시의 수평 위치를 지정하는 부분으로,
    "right" 또는 "left" 중 하나를 선택할 수 있습니다.
    이 부분은 `선택` 사항입니다.
    지정하지 않을 경우 초깃값인 "right"가 적용됩니다.
*/
selector {
    text-emphasis-position: [ over | under ] && [ right | left ]?;
}

형식 정의

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

값

text-emphasis-position 속성 값
`over`	가로 쓰기 모드에서 텍스트 위에 표시를 그립니다.
`under`	가로 쓰기 모드에서 텍스트 아래에 표시를 그립니다.
`right`	세로 쓰기 모드에서 텍스트 오른쪽에 표시를 그립니다.
`left`	세로 쓰기 모드에서 텍스트 왼쪽에 표시를 그립니다.

`over` | `under`

가로 쓰기 모드에서 텍스트 강조 표시의 수직 위치를 지정하는 부분으로, over 값은 텍스트 위에 표시를 그리고, under 값은 텍스트 아래에 표시를 그립니다.

이 부분은 필수 사항입니다. 초깃값은 over입니다.

`right` | `left`

세로 쓰기 모드에서 텍스트 강조 표시의 수평 위치를 지정하는 부분으로, right 값은 텍스트 오른쪽에 표시를 그리고, left 값은 텍스트 왼쪽에 표시를 그립니다. 세로 쓰기 모드를 사용하는 아시아권 언어(한국어, 일본어, 중국어, 몽골어 등)에서 사용되는 텍스트 강조 표시를 제어하기 위해 고안되었습니다.

이 부분은 선택 사항입니다. 초깃값은 right입니다.

알아두세요!
강조 표시의 위치는 언어에 따라 다를 수 있습니다.
예를 들어, 일본어에서는 강조 표시의 위치가 오른쪽 위 (over right) 가 선호되지만, 중국어에서는 오른쪽 아래 (under right) 가 일반적으로 사용됩니다.
이 차이는 세로 쓰기 모드에서의 텍스트 강조 표시를 어떻게 다루는지에 대한 문화적·기술적 차이에서 비롯됩니다.

활용 예제

[ `right` | `left` ]는 선택 사항으로 생략 가능

CSS

p span {
    text-emphasis-style: '하';
    text-emphasis-color: red;
    text-emphasis-position: under; /* [ right | left ]는 선택 사항으로 생략 가능함 */
    font-size: 1.5em;
}

세로 쓰기 모드

CSS

p span {
    writing-mode: vertical-rl; /* 세로 쓰기 모드 */
    text-emphasis-style: '하';
    text-emphasis-color: red;
    text-emphasis-position: over left;
    font-size: 1.5em;
}

주의할 점

CSS [ 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;
}

브라우저 호환성

text-emphasis-position 속성에 대한 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`text-emphasis-position`	99	99	46	7

명세서

text-emphasis-position 속성에 대한 명세서 사양
명세서 사양
`text-emphasis-position`	CSS Text Decoration Module Level 4 #text-emphasis-position-property