CSS로 세로 텍스트 구현하기 – text-orientation과 writing-mode 활용법

CSS에서 text-orientation: upright과 writing-mode: vertical-rl 속성을 함께 지정하면, 영어 알파벳 같은 가로 문자까지 눕히지 않고 그대로 세운 상태로 세로 방향 텍스트를 표시할 수 있습니다.

일반적으로 세로 쓰기 모드에서는 라틴 문자가 시계 방향으로 90도 회전되지만, text-orientation: upright을 적용하면 각 글자가 바로 선 상태로 유지됩니다. 이는 일본어·중국어처럼 세로쓰기가 자연스러운 언어 환경에서 영문을 함께 표시할 때 특히 유용합니다.

문법(Syntax)

CSS의 writing-mode와 text-orientation 속성의 기본 문법은 다음과 같습니다.

Selector {
    writing-mode: /*값*/
    text-orientation: /*값*/
}

예제 1 – 단일 요소에 세로 텍스트 적용

다음 예제는 제목 요소에 두 속성을 적용하여 세로 텍스트를 출력하는 기본적인 방법을 보여줍니다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            h4 {
                text-orientation: upright;
                writing-mode: vertical-rl;
                line-height: 3;
                box-shadow: inset 0 0 3px khaki;
            }
        </style>
    </head>
    <body>
        <h4>Sed nec tortor</h4>
    </body>
</html>

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS로 세로 텍스트 구현하기 – text-orientation과 writing-mode 활용법

예제 2 – 여러 세로 텍스트 열 나란히 배치하기

이번 예제는 플렉스박스(Flexbox) 레이아웃과 함께 사용하여, 여러 개의 문단 요소를 세로 텍스트 열 형태로 나란히 정렬하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                display: flex;
                flex: 1;
            }
            p {
                text-orientation: upright;
                writing-mode: vertical-rl;
                line-height: 3;
                box-shadow: inset 0 0 13px orange;
            }
        </style>
    </head>
    <body>
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
        <p>Four</p>
    </body>
</html>

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS로 세로 텍스트 구현하기 – text-orientation과 writing-mode 활용법

핵심 정리

writing-mode: vertical-rl은 텍스트의 흐름을 위에서 아래로, 줄바꿈은 오른쪽에서 왼쪽으로 변경하는 속성입니다. 여기에 text-orientation: upright을 더하면 회전 없이 글자 하나하나가 바로 서 있는 형태로 표시되므로, 세로형 사이드바 메뉴, 책표지 디자인, 전통적인 동아시아식 조판 등 다양한 UI에서 활용할 수 있습니다.