[CSS] 텍스트 세로 나열

writing-mode 를 이용해서 텍스트를 세로로 나열할 수 있습니다.

div {
	/* 가로 방향, 기본 값 */
	writing-mode: horizontal-tb;
	/* 세로 방향, 왼쪽에서 오른쪽으로 */
	writing-mode: vertical-lr;
	/* 세로 방향, 오른쪽에서 왼쪽으로 */
	writing-mode: vertical-rl;
}

.en {
	/* 영문일 경우, 해당 속성을 추가해주지 않으면 자동으로 각도가 조절됩니다. */
	text-orientation: upright;
}

See the Pen writing-mode by FE4902 (@fe4902) on CodePen.

 

해당 포스팅은 이 글을 참고하여 작성했습니다.