[text] CSS - text-emphasis-position 속성 - 텍스트 강조마크 위치 지정 (= text-emphasis-position속성 = 텍스트엠퍼시스포지션속성)

1. text-emphasis-position 예제 - 텍스트 강조마크 위치
2. text-emphasis-position 정의
3. text-emphasis-position 구문

text-emphasis-position 예제 - 텍스트 강조마크 위치

 

<style>   

h3.hz1 {

  text-emphasis: double-circle red;

  text-emphasis-position: over;

}

h3.hz2 {

  text-emphasis: triangle blue;

  text-emphasis-position: under;  

}

h3.hz3 {

  writing-mode: vertical-rl;

  text-emphasis: triangle blue;

  text-emphasis-position: under right;  

}

h3.hz4 {

  writing-mode: vertical-rl;

  text-emphasis: triangle blue;

  text-emphasis-position: under left;  

}

</style>

<h3 class="hz1">홈짱닷컴 Homzzang.com</h3>

<h3 class="hz2">홈짱닷컴 Homzzang.com</h3>

<h3 class="hz3">홈짱닷컴 Homzzang.com</h3>

<h3 class="hz4">홈짱닷컴 Homzzang.com</h3>

결과보기

text-emphasis-position 정의

 

텍스트 강조마크 위치 지정. (over/under/left/right)

 

---

 

1.

• writing-mode 속성 사용해 (가로쓰기/세로쓰기) 여부 결정.
• (수평모드/수직모드) 둘 다 적어도 되고, 하나만 적어도 됨.
• 둘 다 적을 땐 띄어쓰기로 구분하고, 적는 순서는 상관없음.
• 하나만 적을 시 안 적힌 부분은 해당 모드 기본값이 적용됨.

 

 

2. cf.

• text-emphasis 속성 - 텍스트 강조마크 (위치/색상) 일괄 지정
• text-emphasis-style 속성 - 텍스트 강조마크 모양
• text-emphasis-color 속성 - 텍스트 강조마크 색상

 

3.

• 기본값: over right
• 상속여부: O
• 애니타입: discrete (불연속 방식)
• CSS버전: CSS3
• JS구문: object.style.textEmphasisPosition="under";

 

4.

IE 제외한 주요 최신 브라우저 모두 지원.

 

5. MDN text-emphasis-position 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position

 

text-emphasis-position 구문

 

selector {text-emphasis-position: over|under|left|right|initial|inherit;}

 

---

[속성값]

 

over

(수평모드에서) 텍스트 위에 배치

 

under

(수평모드에서) 텍스트 아래에 배치

 

left

(수직모드에서) 텍스트 왼쪽에 배치

 

right

(수직모드에서) 텍스트 오른쪽에 배치

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

---

PS. 여러가지 사용 예제

 

/* 기본값 */

• text-emphasis-position: over right;

/* 키워드값 */

 

수평모드 수직모드

• text-emphasis-position: over left;
• text-emphasis-position: under right;
• text-emphasis-position: under left;

 

수직모드 수평모드

• text-emphasis-position: left over;
• text-emphasis-position: right under;
• text-emphasis-position: left under;

/* 전역값 사용 시 */

• text-emphasis-position: inherit;
• text-emphasis-position: initial;
• text-emphasis-position: revert;
• text-emphasis-position: revert-layer;
• text-emphasis-position: unset;