목차
text-emphasis-position 예제 - 텍스트 강조마크 위치
text-emphasis-position 정의
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.
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;
주소 복사
랜덤 이동