[text] CSS - text-emphasis-style 속성 - 텍스트 강조마크 모양 지정 (= text-emphasis-style속성 = 텍스트엠퍼시스스타일속성) ※ 글자 강조표시자 모양

1. text-emphasis-style 예제 - 텍스트 강조마크 모양 지정
2. text-emphasis-style 정의
3. text-emphasis-style 구문
4. text-emphasis-style 예제 - 텍스트 강조마크 애니 효과

text-emphasis-style 예제 - 텍스트 강조마크 모양 지정

 

<style>

p {font-size:50px}

p.hz1 {text-emphasis-style: filled;}

p.hz2 {text-emphasis-style: open;}

p.hz3 {text-emphasis-style: double-circle;}

p.hz4 {text-emphasis-style: "#";} 

</style>

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

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

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

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

 

결과보기

text-emphasis-style 정의

 

텍스트 강조마크의 모양 지정.

 

---

 

1.

텍스트 강조마크 크기는 글꼴 크기의 약 50%임.

 

2. cf.

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

 

3.

• 기본값: none
• 상속여부: O
• 애니가능: discrete (불연속: 특정값으로 갑자기 변경) 방식
• CSS버전: CSS3
• JS구문: object.style.textEmphasisStyle="triangle";

 

4.

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

 

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

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

 

text-emphasis-style 구문

 

selector {text-emphasis-style: none|filled|open|dot|circle|double-circle|triangle|sesame|string|color|initial|inherit;}

 

---

[속성값]

 

• none - 적용 X
• filled - 채워진 작은 원 모양 (※ filled circle 시, 좀 더 커짐.)
• open - 비워진 작은 원 모양 (※ open circle 시, 좀 더 커짐.)
• dot - 작은 채워진 원 모양
• circle - 큰 채워진 원 모양
• double-circle - 더블 원 모양
• triangle - 삼각형 모양
• sesame - 참깨 모양
• string - 지정 문자
• initial - 이 속성의 기본값 사용.
• inherit - 부모요소의 속성값 상속.

 

text-emphasis-style 예제 - 텍스트 강조마크 애니 효과

 

<style>

h1 {animation: emphasize 2s infinite;}

@keyframes emphasize {

  0% {text-emphasis: open circle; }

  50% {text-emphasis: double-circle; }

  100% {text-emphasis: filled circle; }

}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

 

결과보기