AAtomic CSS

writing-mode

텍스트의 흐름 방향을 설정합니다. wmvr은 일본어/중국어 세로쓰기, wmvl은 세로 라벨 등에 사용합니다.

클래스 목록

클래스CSS설명
wmhtbwriting-mode: horizontal-tb가로쓰기, 위에서 아래로 (기본값)
wmvrwriting-mode: vertical-rl세로쓰기, 오른쪽에서 왼쪽으로
wmvlwriting-mode: vertical-lr세로쓰기, 왼쪽에서 오른쪽으로

시각적 비교

각 writing-mode가 텍스트 흐름에 어떤 영향을 주는지 비교합니다.

Horizontal TB (기본값) — wmhtb

텍스트가 흐르는 방향을 확인하세요. Writing mode test.

텍스트가 가로로 흐르고 위에서 아래로 진행

Vertical RL — wmvr

텍스트가 흐르는 방향을 확인하세요. Writing mode test.

텍스트가 세로로 흐르고 오른쪽에서 왼쪽으로 진행

Vertical LR — wmvl

텍스트가 흐르는 방향을 확인하세요. Writing mode test.

텍스트가 세로로 흐르고 왼쪽에서 오른쪽으로 진행

클래스별 상세

wmhtbwriting-mode: horizontal-tb

기본값입니다. 텍스트가 가로로 흐르고, 블록이 위에서 아래로 쌓입니다. 대부분의 언어에서 사용하는 표준 방향입니다.

<!-- 기본 가로쓰기 -->
<div class="wmhtb">
  일반적인 가로 텍스트 흐름입니다.
  대부분의 언어에서 기본값입니다.
</div>

wmvrwriting-mode: vertical-rl

텍스트가 세로로 흐르고, 줄이 오른쪽에서 왼쪽으로 진행합니다. 전통 일본어/중국어 세로쓰기에 사용합니다.

<!-- 전통 일본어 세로쓰기 -->
<div class="wmvr h20rem p2rem bg18181B br8px" lang="ja">
  日本語の縦書きテスト。
  右から左へ行が進みます。
</div>

<!-- 세로 제목 -->
<div class="df gap2rem">
  <h2 class="wmvr fs2rem fw700 cFAFAFA">세로 제목</h2>
  <p>본문 내용이 옆에 배치됩니다.</p>
</div>

wmvlwriting-mode: vertical-lr

텍스트가 세로로 흐르고, 줄이 왼쪽에서 오른쪽으로 진행합니다. 세로 라벨, 사이드 텍스트 등 디자인 요소에 활용합니다.

<!-- 세로 라벨 -->
<div class="df aic gap16px">
  <span class="wmvl fs12px cA1A1AA ttu ls0-05em">Label</span>
  <div class="fg1 bg18181B p2rem br8px">
    콘텐츠 영역
  </div>
</div>

<!-- 차트 Y축 라벨 -->
<div class="df aic">
  <span class="wmvl fs14px c71717A">매출 (억원)</span>
  <div class="fg1 h20rem bg18181B br8px ml8px"></div>
</div>

팁 & 주의사항

width와 height가 바뀜

세로 writing-mode에서는 논리적 축이 바뀝니다. width가 블록 크기(높이 역할), height가 인라인 크기(너비 역할)가 됩니다.

세로 라벨 패턴

wmvl은 차트의 Y축 라벨, 탭의 세로 텍스트 등 디자인 요소에 유용합니다. transform: rotate보다 자연스럽습니다.

wmvr vs wmvl 차이

wmvr은 줄이 오른쪽에서 왼쪽으로 진행(전통 세로쓰기), wmvl은 줄이 왼쪽에서 오른쪽으로 진행합니다.

directiontext-orientation