writing-mode
속성 사용법
writing-mode
속성은
텍스트 줄을 가로 또는 세로로 배치할지 여부와 블록 컨테이너의 흐름이 되는 방향을 지정합니다.
CSS에서 쓰기 모드는 텍스트가 가로 또는 세로로 표시되는지 여부를 나타내는데,
writing-mode
속성을 사용하면 일반적인 가로로 표시하는 텍스트를 세로로 표시하는 모드로 변경할 수 있습니다.
아래의 예시에 writing-mode: vertical-lr;
를 사용해서 세로로 표시되는 제목이 있습니다.
h1 {
writing-mode: vertical-lr;
}
<h1>세로로 표시되는 제목</h1>
writing-mode
속성의 형식은 다음과 같습니다.
형식 구문
selector {
writing-mode: /* value */
}
형식 정의
초깃값 | horizontal-tb |
---|---|
적용 요소 | 테이블 행 그룹, 테이블 열 그룹, 테이블 행, 테이블 열, Ruby 기본 컨테이너, Ruby 주석 컨테이너를 제외한 모든 요소 |
상속 | 예 |
애니메이션 | 아니오 |
값
horizontal-tb |
초깃값임.
블록 컨테이너의 표시 방향은 위에서 아래 입니다. 텍스트는 가로로 표시됩니다. |
---|---|
vertical-rl |
블록 컨테이너의 표시 방향은 오른쪽에서 왼쪽입니다. 텍스트는 세로로 표시됩니다. |
vertical-lr |
블록 컨테이너의 표시 방향은 왼쪽에서 오른쪽입니다. 텍스트는 세로로 표시됩니다. |
구문
writing-mode
속성 값 예시
/* 키워드 값 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
/* 글로벌 값 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;
vertical-rl
과 vertical-lr
값 예제
다음의 데모 예제를 보면 텍스트를 세로로 표시하는 모드의 블록 컨테이너 표시 방향에 대해 더 명확히 이해할 수 있습니다.
예제에서는 제목과 단락을 포함하는 두 개의 블록 컨테이가 있습니다.
<div class="container">
<h1>샘플 제목</h1>
<p>텍스트를 세로로 표시하는 문단</p>
</div>
아래 CSS 데모 버튼을 클릭해서 제목과 단락을 감싸는 .container
에 writing-mode
값으로 vertical-rl
과 vertical-lr
을 각각 적용해 보세요.
텍스트를 세로로 표시하는 문단
블록 컨테이너의 표시 방향
vertical-lr
의 경우 블록 컨테이너의 표시 방향은 왼쪽에서 오른쪽입니다.vertical-rl
의 경우 블록 컨테이너의 표시 방향은 오른쪽에서 왼쪽입니다.
블록 컨테이너의 시작 방향
vertical-lr
의 경우 블록 컨테이너의 시작 방향은 왼쪽입니다..container
의 콘텐츠가 왼쪽 정렬됩니다.vertical-rl
의 경우 블록 컨테이너의 시작 방향은 오른쪽입니다..container
의 콘텐츠가 오른쪽 정렬됩니다.
writing-mode
와 text-align
속성 같이 사용하기
writing-mode
와 text-align
속성 같이 사용할 때 text-align
속성의 값이 어떻게 적용되는지를 알아보겠습니다.
다음의 데모는 writing-mode
가 vertical-lr
으로 설정되어 있는 제목 요소에 text-align
속성의 값을 적용한 예제입니다.
텍스트를 세로로 표시하는 문단
text-align
속성은 텍스트 등 인라인(Inline) 콘텐츠 가로 정렬을 설정하는 속성입니다.
위 데모 예시를 보면 text-align
속성으로 정렬을 지정하면 가로 정렬이 설정되는 것이 아니라 세로 정렬되는 것을 알 수 있습니다. text-align: left;
의 경우 왼쪽 정렬이 아니라 위쪽 정렬이 되고, text-align: right;
의 경우에는 아래쪽 정렬이 됩니다.
이 데모 예제에서도 알 수 있듯이 writing-mode
가 세로로 표시하는 모드일 경우 블록 컨테이너의 표시 방향은 가로로 인라인(Inline) 콘텐츠 방향은 세로로 모두 바뀝니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
writing-mode
|
48 | 12 | 41 | 10.1 |
명세서
명세서 사양 | |
---|---|
writing-mode
|
CSS Writing Modes Level 4 #block-flow |