[text] CSS - text-orientation 속성 - 블락방향 수직모드에서 문자방향 지정 (= 텍스트방향 지정 = text-orientation속성 = 텍스트오리엔테이션속성)

1. text-orientation 예제 - 텍스트 방향 지정
2. text-orientation 정의
3. 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

부모요소의 속성값 상속.