CSS의 writing-mode 속성은 텍스트 줄을 가로 방향으로 배치할지, 아니면 세로 방향으로 배치할지를 결정하는 속성입니다. 일반적인 영어나 한국어 문서는 가로쓰기가 기본이지만, 일본어처럼 전통적으로 세로쓰기를 사용하는 언어나 디자인적 효과가 필요한 경우 이 속성이 매우 유용합니다.
writing-mode 속성 값
writing-mode 속성은 다음과 같은 값을 사용합니다.
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
- horizontal-tb : 기본값. 텍스트가 가로 방향으로 흐르고, 줄은 위에서 아래로 쌓입니다.
- vertical-rl : 텍스트가 세로 방향으로 흐르고, 줄은 오른쪽에서 왼쪽으로 쌓입니다.
- vertical-lr : 텍스트가 세로 방향으로 흐르고, 줄은 왼쪽에서 오른쪽으로 쌓입니다.
예제 1 – 세로쓰기(vertical-rl) 적용하기
다음 예제는 p 요소에 writing-mode: vertical-rl;을 적용하여 텍스트를 세로로 표시하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is demo text.</p>
</body>
</html>실행 결과
위 결과를 보면 본문 텍스트가 위에서 아래로 읽히는 세로쓰기 형태로 배치된 것을 확인할 수 있습니다.
예제 2 – 여러 쓰기 모드 비교하기
이번에는 두 개의 단락에 서로 다른 writing-mode 값을 적용해 차이를 비교해 보겠습니다. 첫 번째 단락에는 vertical-rl(세로쓰기)을, 두 번째 단락에는 horizontal-tb(가로쓰기)를 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
word-spacing: 1cm;
color: blue;
writing-mode: vertical-rl;
}
p.demo2 {
word-spacing: 40px;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>실행 결과
실행 결과를 살펴보면, 첫 번째 단락(demo1)은 파란색 글자와 함께 세로 방향으로 텍스트가 배치되고, 두 번째 단락(demo2)은 일반적인 가로 방향으로 배치됩니다. word-spacing 속성을 함께 사용하면 글자 사이 간격도 조절할 수 있어 세로쓰기 레이아웃에서 가독성을 높이는 데 도움이 됩니다.
정리
writing-mode 속성은 텍스트의 흐름 방향을 제어하는 강력한 CSS 도구입니다. horizontal-tb, vertical-rl, vertical-lr 세 가지 값을 상황에 맞게 활용하면 동아시아권 언어 표현부터 세로형 배너, 잡지 스타일 레이아웃까지 다양한 디자인을 구현할 수 있습니다.