목차
text-orientation 예제 - 텍스트 방향 지정
text-orientation 정의
text-orientation 구문
text-orientation 예제 - 텍스트 방향 지정
<style>
div{
writing-mode: vertical-lr;
border: 1px solid black;
display: inline-block;
height: 300px;
width: 100px;
margin: 5px;
}
div.a {
text-orientation: mixed;
background:yellow;
}
div.b {
text-orientation: upright;
background:pink;
}
div.c {
text-orientation: sideways;
background:tomato;
}
</style>
<div class="a">
<h3>홈짱닷컴 Homzzang.com</h3>
<p>HTML CSS JS PHP SQL 강의</p>
</div>
<div class="b">
<h3>홈짱닷컴 Homzzang.com</h3>
<p>HTML CSS JS PHP SQL 강의</p>
</div>
<div class="c">
<h3>홈짱닷컴 Homzzang.com</h3>
<p>HTML CSS JS PHP SQL 강의</p>
</div>
결과보기
text-orientation 정의
writing-mode 속성값이 vertical로 지정된 경우, 문자 방향 지정.
1.
writing-mode 속성값이 'vertical'로 지정된 경우에만 작동.
2.
기본값: mixed
상속여부: O
애니가능: X
CSS버전: CSS3
JS구문: object .style.textOrientation="upright";
3.
IE 제외한 주요 최신 브라우저 모두 지원 .
4. MDN text-orientation 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
text-orientation 구문
selector {text-orientation: mixed|upright|sideways|sideways-right|use-glyph-orientation|initial|inherit;}
[속성값]
mixed
영문은 시계방향으로 90도 회전하고, 한글은 그대로 유지. (기본값)
upright
위쪽 향함. (회전 X)
sideways
영문/한글 모두 시계방향(=오른쪽)으로 90도 회전.
sideways-right
sideways와 같으나, 호환성 차원에서 속성명 유지.
use-glyph-orientation
SVG 요소에 사용하기 위해 텍스트는 더 이상 사용되지 않는 SVG 속성인 glyph-orientation-vertical 및 glyph-orientation-horizontal을 상속
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
주소 복사
랜덤 이동