Writing Mode
writing-mode 속성은 텍스트의 가로 또는 세로 방향을 결정하는 속성으로, 문서의 쓰기 방향을 설정할 수 있습니다. 주로 동아시아 언어(중국어, 일본어, 한국어)나 세로쓰기 문서 레이아웃에서 사용되며, 웹 페이지나 애플리케이션에서 다양한 레이아웃을 구현할 때 유용합니다.
기본값과 설정 가능한 값
1. horizontal-tb (기본값)
-
텍스트가 왼쪽에서 오른쪽으로 수평 방향으로 쓰여집니다.
-
대부분의 서구권 언어(영어, 독일어, 프랑스어 등)에서 기본적으로 사용되는 방향입니다.
-
horizontal-tb는text의 가로쓰기를 뜻하며, 텍스트는 왼쪽에서 오른쪽으로, 그리고 위에서 아래로 흐릅니다.writing-mode: horizontal-tb;
2. vertical-rl
-
텍스트가 위에서 아래로 세로 방향으로 쓰여지며, 줄이 오른쪽에서 왼쪽으로 이동합니다.
-
주로 전통적인 중국어, 일본어 등의 세로쓰기 방식에서 사용됩니다.
writing-mode: vertical-rl;
3. vertical-lr
-
텍스트가 위에서 아래로 세로 방향으로 쓰여지며, 줄이 왼쪽에서 오른쪽으로 이동합니다.
-
동아시아 언어에서는 많이 사용되지 않지만, 세로쓰기 방식 중 하나입니다.
writing-mode: vertical-lr;
4. sideways-rl
-
텍스트가 수평이 아닌 세로로 배열되며, 오른쪽에서 왼쪽으로 쓰여집니다. 단, 각 문자의 배치 방향은 수평과 같고, 텍스트 블록이 90도 회전된 효과가 납니다.
writing-mode: sideways-rl;
5. sideways-lr
-
텍스트가 수평이 아닌 세로로 배열되며, 왼쪽에서 오른쪽으로 쓰여집니다. 이 역시 문자가 90도 회전된 효과가 나며, 텍스트 블록이 수직으로 쓰여집니다.
writing-mode: sideways-lr;
사용 목적
- 다국어 지원: 서로 다른 쓰기 방향을 가진 언어(예: 중국어의 세로쓰기, 영어의 가로쓰기)를 하나의 문서나 웹사이트에 함께 표시할 때 사용됩니다.
- 전통 문서 레이아웃: 일본어와 중국어의 전통적인 책이나 신문과 같은 레이아웃에서는 세로쓰기를 지원해야 할 필요가 있습니다.
- 디자인 요소: 특이한 레이아웃을 원하거나, 텍스트 블록을 회전하여 레이아웃에 변화를 줄 때 활용할 수 있습니다.
- 세로 형식 UI: 예를 들어, 간판이나 세로 배너와 같은 UI 요소에 텍스트를 세로로 표시하는 경우에 사용됩니다.
기타 CSS 속성들과의 조합
-
text-align: 텍스트 정렬을 수직 및 수평으로 조정하는 속성으로,writing-mode와 함께 사용할 때 텍스트의 전체적인 배치를 더욱 세밀하게 제어할 수 있습니다.text-align: center; -
line-height: 줄 간격을 조정하여writing-mode로 설정한 텍스트의 가독성을 높일 수 있습니다.line-height: 1.5; -
direction: 텍스트의 흐름 방향을 설정하며,writing-mode와 조합하여 텍스트의 읽기 방향을 결정합니다. 예를 들어, 아랍어와 같은 언어는 오른쪽에서 왼쪽으로 읽는 것이 일반적이므로direction: rtl;과 함께 사용할 수 있습니다.direction: rtl;
예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.vertical-text {
writing-mode: vertical-rl;
text-align: center;
border: 1px solid #000;
padding: 20px;
line-height: 1.5;
height: 200px;
}
</style>
<title>CSS Writing Mode Example</title>
</head>
<body>
<div class="vertical-text">
세로쓰기 예시 텍스트입니다.
</div>
</body>
</html>위 예시에서, writing-mode: vertical-rl;을 사용하여 텍스트가 세로로 쓰여지도록 설정했습니다. 이와 같은 방식으로 세로쓰기 레이아웃을 손쉽게 구현할 수 있습니다.
결론
writing-mode 속성은 다양한 텍스트 레이아웃과 다국어 지원이 필요한 상황에서 매우 유용한 CSS 속성입니다. 기본적으로는 가로쓰기 레이아웃이지만, 세로쓰기가 필요한 경우나 독특한 텍스트 배치가 필요한 디자인에서는 필수적인 역할을 합니다.