CSS 텍스트 세로 쓰기 방법

2023. 4. 4. 00:09

일반적으로 텍스트는 가로 방향으로 작성됩니다. 이는 전 세계 어딜 가든 대부분 통일되어있는 것입니다. 허나 이따금씩 세로로 작성되는 문서들이 있습니다. 보통 사극에 많이 나오죠. 네. 바로 그것입니다. 현재에서는 거의 쓰이지는 않으나 이따금씩 필요할때가 있습니다. 웹퍼블리싱 세계에서도 가끔씩 필요할때가 있습니다. 개인적으로는 친효스킨 두번째 버전을 만들 때 이 기능이 필요했습니다.

친효스킨 아트북 사이드바를 보시면 이렇게 텍스트가 세로로 입력되어 있는것을 확인할 수 있습니다. 보통 세로로 작성하는 방법은 부모 요소의 가로 사이즈를 텍스트 글자 하나가 들어갈 정도로 줄이면 되긴 합니다만, 만약 부모 요소의 가로 사이즈에 변동이 있는 경우에는 텍스트 정렬이 와르르 무너질 수 있습니다. 따라서 아예 처음부터 텍스트의 방향이 가로가 아닌 세로로 입력하는 CSS 스타일코드를 사용하는것이 좋습니다.

writing-mode

HTML에서 텍스트를 세로로 입력하는 방법은 CSS의 writing-mode라는 옵션을 사용하면 됩니다. writing-mode의 세부 옵션은 크게 3가지가 있습니다.

writing-mode : horizontal-tb;

writing-mode : vertical-rl;

writing-mode : vertical-lr;

첫번째의 horizontal-tb는 기본값입니다. horizontal의 의미는 다들 아시는 것처럼 수평입니다. 즉 가로죠. 끝에 붙는 tb는 TOP to BOTTOM입니다. 즉 위에서 아래로 텍스트가 나열된다는 것입니다. 지금 이 글처럼 말이지요. 도서관에 존재하는 수많은 대부분의 서적들 기본값이 바로 이겁니다. 그럼 이것도 있을 수 있겠죠?

horizontal-bt

그렇습니다. 아래에서 위로 작성되는 텍스트입니다. 하지만 거의 쓰이지는 않습니다. 그냥 알아만 둡시다.

vertical은 수직입니다. 이것이 우리가 원하는 세로 글쓰기인 것입니다. 끝에 붙는 rl은 Right to Left의 의미입니다. lr은 반대죠. Left to Right입니다. 자 그러면 이론은 다 알아봤으니 아래의 예시를 살펴봅시다.

미리보기

See the Pen CSS writing-mode / text-orientation by rgy0409 (@rgy0409) on CodePen.

<body>안에는 세 개의 <p>태그가 들어있습니다. 텍스트는 한글, 영어, 아라비안 숫자가 입력되어 있습니다. CSS를 살펴보시면 각 p태그마다 위에서 설명드린 writing-mode가 입력되어 있습니다. 예시 결과를 보시면 한글의 경우에는 세로 입력이 모두 동일한데 알파벳과 숫자는 뭔가 차이가 있는것을 알 수 있습니다. 두번째와 세번째가 그것입니다. 하나는 세로 배열이긴한데 글씨도 돌아가 있는 상태이고 마지막은 텍스트 또한 세로로 입력되어 있습니다. 한글은 글씨가 세로로 입력되어도 크게 어색하지 않은데 알파벳은 장난 없군요. 이 부분은 아래의 옵션으로 제어 가능합니다.