writing-mode 속성

writing-mode 속성은 페이지의 텍스트 방향을 세로 또는 가로로 설정합니다. 값은 horizontal-tb (가로, 왼쪽에서 오른쪽, 위에서 아래), vertical-rl (세로, 위에서 아래, 오른쪽에서 왼쪽), vertical-lr (세로, 위에서 아래, 왼쪽에서 오른쪽)이 될 수 있습니다.

문법

css선택자 {
  writing-mode: horizontal-tb 또는 vertical-rl 또는 vertical-lr;
}

예시

텍스트 방향을 가로(왼쪽에서 오른쪽, 위에서 아래)로 설정해 봅시다:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: horizontal-tb;
  font-size: 2em;
  margin-top: 0;
}

Результат:

예시

이번에는 방향을 세로(위에서 아래, 오른쪽에서 왼쪽)로 변경해 봅시다:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-rl;
  font-size: 2em;
  margin-top: 0;
}

Результат:

예시

텍스트 방향을 세로(위에서 아래, 왼쪽에서 오른쪽)로 설정해 봅시다:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-lr;
  font-size: 2em;
  margin-top: 0;
}

Результат:

관련 항목