[CSS] 텍스트 세로로 표시하기

텍스트를 세로로 표시하는 법을 알아보자

 

 

// 세로로 왼쪽 -> 오른쪽 
writing-mode: vertical-lr;

// 세로로 오른쪽 -> 왼쪽 
writing-mode: vertical-rl;

// 영어는 추가로 작성 
text-orientation: upright;

 

writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있다. 

 

한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시된다. 이를 해결하는 방법으로는 text-orientation 속성을 이용하면 된다.