본문 바로가기

Html_CSS_JScript

글자를 세로로 쉽게 쓰는 방법

희망이란


희망이란
본래 있다고도 할 수 없고 없다고도 할 수 없다.
그것은 마치 땅 위의 길과 같은 것이다.
본래 땅 위에는 길이 없었다.
한 사람이 먼저 가고
걸어가는 사람이 많아지면
그것이 곧 길이 되는 것이다.


- 루쉰의《고향》중에서 -

다음과 같은 글을 세로로 표현해 보겠습니다.



희망이란


희망이란
본래 있다고도 할 수 없고 없다고도 할 수 없다.
그것은 마치 땅 위의 길과 같은 것이다.
본래 땅 위에는 길이 없었다.
한 사람이 먼저 가고
걸어가는 사람이 많아지면
그것이 곧 길이 되는 것이다.


- 루쉰의《고향》중에서 - 



위의 시를 보면 알 수 있듯이 글자가 새로로 씌여졌다.  글자를 새로로 쓰는 것은 의외로 간단하다. 하지만 인터넷 익스플로러 5.5 이상에서만 동작한다는 것을 알고 있어야 한다. 왜냐하면 글자를 세로로 쓸 수 있게 해주는 핵심 속성인 writing-mode가 새로운 CSS 속성이기 때문이다.

writing-mode는 다음과 같은 두 가지 값을 가질 수 있다.

  • lr-tb : 디폴트 값으로, left-right top-bottom의 약자이다. 즉, 왼쪽에서 오른쪽으로, 위에서 아래로 글자를 쓰고 보는 방식으로 우리들이 사용하는 방식이다.
  • tb-rl : top-bottom right-left의 약자이다. 즉, 위에서 아래로, 오른쪽에서 왼쪽으로 글자를 쓰고 보는 방식이다.

그리고, 여백 조절을 하고 싶다면 다음과 같이 padding-right 속성과 같은 여백 속성을 적절히 이용하는 것도 한 방법이다.