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

`text-emphasis-position` 속성 사용법

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

주의하세요!
text-emphasis-position 속성은 단축 속성인 text-emphasis 속성으로 재설정할 수 없습니다.

정의와 구문

CSS

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

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

값

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

`over` | `under`

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

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

`right` | `left`

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

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

예제

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

CSS

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

CSS text-emphasis-color 속성

세로 쓰기 모드

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