문제 상황
가끔씩 일반적인 가로 방향이 아니라, 세로 방향으로 글자를 보여주고 싶을 때가 있다.
한 글자씩 br태그로 나눠서 작성할까? 한 글자씩 p태그로 만들어줄까?
더 간단한 방법이 있다. 한번 알아보자!
해결 방법
코드부터 설명하자면 아래와 같다.
writing-mode: vertical-rl;
text-orientation: upright;간단하게 예시를 만들어보자.
<body>
<h1 class="sero">시작부터<br />끝까지.</h1>
<br />
<h1 class="sero">Start<br />End.</h1>
</body>writing-mode
이 속성은 글자를 세로로 만드는 기능을 가지고 있다.
어떤 속성값을 입력해줘야할까?
// 오른쪽 위부터 시작, 왼쪽 아래로 끝
writing-mode: vertical-rl;
// 왼쪽 위부터 시작, 오른쪽 아래로 끝
writing-mode: vertical-lr;vertical로 시작하는 값들 중 글자가 이어지는 방향을 본인이 원하는 방향으로 설정해주면된다.
전자를 사용하면 아래와 같다.
후자를 사용하면 아래와 같다.
이제 차이를 알겠다!
그런데...한글은 멀쩡하게 세로로 적혀서 나오는데, 영어는 왜 저러지?
놀랍게도 영어는 90도 돌아간 형태로 나온다.
영어를 한글처럼 멀쩡하게 돌려서 사용하려면 어떻게 해야할까?
text-orientation
이 속성의 upright값은 90도로 꺾여서 나오는 글자를 위 예시처럼 반듯하게 나오게 해준다.
이제 영어도 반듯하게 적을 수 있게되었다.
참고 자료
나를 믿는 사람들을, 실망시키지 않도록