[CSS] writing-mode / text-orientation : 텍스트 세로 쓰기 모드

 

 

📌 writing-mode

: 텍스트 정렬 방향을 지정한다.

 

 

 

horizontal-tb

: 가로 정렬

- 초기값 (기본값)

 

 

 

vertical-rl

: 세로 정렬

- 블록 컨테이너의 표시 방향: 왼쪽 ⬅ 오른쪽

 

 

 

 

vertical-lr

: 세로 정렬

- 블록 컨테이너의 표시 방향: 왼쪽 ➡ 오른쪽

 

 

---

 

📌 text-orientation

: 한 줄에 있는 텍스트의 방향을 설정한다. 

• 세로 쓰기 모드(writing-mode)인 경우에 효과가 있으며 수직 방향의 제목을 달때 유용하다.

 

 

mixed

: 우측 방향으로 세로 정렬 + 영어는 정방향

 

 

sideways

: 우측 방향으로 세로 정렬

 

 

 

upright

: 세로 정렬 

 

---

 

출처

CSS writing-mode 속성 – 텍스트 세로 쓰기 모드 설정 - 코딩에브리바디

 

 

text-orientation::CSS 레퍼런스