정의 및 사용 방법

writing-mode 속성은 텍스트 줄을 가로 또는 세로로 배치할지 여부와, 흐름이 진행되는 방향을 지정합니다.

이 속성을 사용하면 일반적인 가로로 표시하는 텍스트를 세로로 표시하는 모드로 변경할 수 있습니다.

기본 예제

아래의 예제에서는 writing-mode: vertical-lr를 사용해서 쓰기 모드와 텍스트가 모두 세로로 표시되는 제목이 있습니다.

실제 적용된 모습
CSS 
h1 {
    writing-mode: vertical-lr;
}
HTML 
<h1>세로로 표시되는 제목</h1>

형식 구문

CSS 
selector {
    writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
}

구문

CSS 
/* 키워드 값 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

/* 글로벌 값 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

형식 정의

writing-mode 속성의 형식 정의
초깃값 horizontal-tb
적용 요소 테이블 행 그룹, 테이블 열 그룹, 테이블 행, 테이블 열, Ruby 기본 컨테이너, Ruby 주석 컨테이너를 제외한 모든 요소
상속 예
애니메이션 아니오

값

writing-mode 속성의 값
horizontal-tb 초깃값임.
텍스트가 가로로 흐르고, 줄은 위에서 아래(Top to Bottom) 방향으로 쌓입니다.
vertical-rl 텍스트가 세로로 흐르고, 줄은 오른쪽에서 왼쪽(Right to Left) 방향으로 쌓입니다. 알파벳은 오른쪽으로 90도 회전해 눕지만 한국어, 중국어, 일본어 같은 동아시아 문자는 위아래 방향 그대로 표시됩니다.
vertical-lr 텍스트가 세로로 흐르고, 줄은 왼쪽에서 오른쪽(Left to Right) 방향으로 쌓입니다. 알파벳은 오른쪽으로 90도 회전해 눕지만 한국어, 중국어, 일본어 같은 동아시아 문자는 위아래 방향 그대로 표시됩니다.
sideways-rl 텍스트가 세로로 흐르고, 모든 문자가 오른쪽으로 90도 회전해 눕습니다. 줄은 오른쪽에서 왼쪽(Right to Left) 방향으로 쌓입니다.
sideways-lr 텍스트가 세로로 흐르고, 모든 문자가 왼쪽으로 90도 회전해 눕습니다. 줄은 왼쪽에서 오른쪽(Left to Right) 방향으로 쌓입니다.

vertical-rl과 vertical-lr 값 예제

다음의 데모 예제를 보면 vertical-rl과 vertical-lr 값에서 텍스트 줄의 흐름이 진행되는 방향에 대해 명확히 이해할 수 있습니다. 이때, 알파벳은 오른쪽으로 90도 회전해 눕지만 한국어, 중국어, 일본어 같은 동아시아 문자는 위아래 방향 그대로 표시됩니다.

예제에서는 제목과 단락을 포함하는 두 개의 블록 컨테이가 있습니다.

HTML 데모 
<div class="container">
    <h1>샘플 제목</h1>
    <p>텍스트를 세로로 표시하는 문단</p>
    <p>A paragraph displaying text vertically</p>
</div>

아래 CSS 데모 버튼을 클릭해서 제목과 단락을 감싸는 .container에 writing-mode 값으로 vertical-rl과 vertical-lr을 각각 적용해 보세요.

CSS 라이브 데모 데모 버튼을 클릭해 보세요!
텍스트 줄의 흐름이 진행되는 방향
  • vertical-rl의 경우 텍스트 줄의 흐름이 진행되는 방향은 오른쪽에서 왼쪽입니다.
  • vertical-lr의 경우 텍스트 줄의 흐름이 진행되는 방향은 왼쪽에서 오른쪽입니다.
텍스트 줄의 시작 방향
  • vertical-rl의 경우 텍스트 줄의 시작 방향은 오른쪽입니다. .container의 콘텐츠가 오른쪽 정렬됩니다.
  • vertical-lr의 경우 텍스트 줄의 시작 방향은 왼쪽입니다. .container의 콘텐츠가 왼쪽 정렬됩니다.
문자의 방향
  • vertical-rl과 vertical-lr 모두 알파벳은 오른쪽으로 90도 회전해 눕지만 한국어, 중국어, 일본어 같은 동아시아 문자는 위아래 방향 그대로 표시됩니다.

sideways-rl과 sideways-lr 값 예제

다음의 데모 예제를 보면 sideways-rl과 sideways-lr 값에서 텍스트 줄의 흐름이 진행되는 방향에 대해 명확히 이해할 수 있습니다. 이때, sideways-rl의 경우 모든 문자가 오른쪽으로 90도 회전해 눕고, sideways-lr의 경우 모든 문자가 왼쪽으로 90도 회전해 눕습니다.

HTML 데모 
<div class="container">
    <h1>샘플 제목</h1>
    <p>텍스트를 세로로 표시하는 문단</p>
    <p>A paragraph displaying text vertically</p>
</div>

아래 CSS 데모 버튼을 클릭해서 제목과 단락을 감싸는 .container에 writing-mode 값으로 sideways-rl과 sideways-lr을 각각 적용해 보세요.

CSS 라이브 데모 데모 버튼을 클릭해 보세요!
텍스트 줄의 흐름이 진행되는 방향
  • sideways-rl의 경우 텍스트 줄의 흐름이 진행되는 방향은 오른쪽에서 왼쪽입니다.
  • sideways-lr의 경우 텍스트 줄의 흐름이 진행되는 방향은 왼쪽에서 오른쪽입니다.
텍스트 줄의 시작 방향
  • sideways-rl의 경우 텍스트 줄의 시작 방향은 오른쪽입니다. .container의 콘텐츠가 오른쪽 정렬됩니다.
  • sideways-lr의 경우 텍스트 줄의 시작 방향은 왼쪽입니다. .container의 콘텐츠가 왼쪽 정렬됩니다.
문자의 방향
  • sideways-rl의 경우 모든 문자가 오른쪽으로 90도 회전해 눕습니다.
  • sideways-lr의 경우 모든 문자가 왼쪽으로 90도 회전해 눕습니다.

세로 쓰기 모드와 text-align 속성 같이 사용하기

writing-mode를 세로 쓰기로 설정하고 text-align 속성을 같이 사용할 때 text-align 속성의 값이 어떻게 적용되는지를 알아보겠습니다.

다음의 데모는 writing-mode가 vertical-lr으로 설정되어 있는 제목 요소에 text-align 속성을 같이 적용한 예제입니다.

CSS 라이브 데모 데모 버튼을 클릭해 보세요!

text-align 속성은 텍스트 등 인라인(Inline) 콘텐츠 가로 정렬을 설정하는 속성입니다.

위 데모 예시를 보면 text-align 속성으로 정렬을 지정하면 가로 정렬이 설정되는 것이 아니라 세로 정렬되는 것을 알 수 있습니다. text-align: left;의 경우 왼쪽 정렬이 아니라 위쪽 정렬이 되고, text-align: right;의 경우에는 아래쪽 정렬이 됩니다.

이 데모 예제에서도 알 수 있듯이 writing-mode가 세로로 표시하는 모드일 경우 블록 컨테이너의 표시 방향은 가로로 인라인(Inline) 콘텐츠 방향은 세로로 모두 바뀝니다.

브라우저 호환성

writing-mode 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
writing-mode 48 12 41 10.1
horizontal-tb 48 12 43 9
vertical-lr 48 12 43 9
vertical-rl 48 12 43 9
sideways-lr 132 132 43 18.4
sideways-rl 132 132 43 18.4
수직 방향 폼 컨트롤 124 124 120 17.4

명세서

writing-mode 속성의 명세서 사양
명세서 사양
writing-mode CSS Writing Modes Level 4
#block-flow

참고문헌

같이 보기