텍스트를 세로로 타이핑하는 방법으로 쉬운 방법인 CSS에 존재하는 writing-mode 속성을 소개하겠습니다.
코드
/* 세로로 왼쪽 -> 오른쪽 */
writing-mode: vertical-lr;
/* 세로로 오른쪽 -> 왼쪽 */
writing-mode: vertical-rl;
/* 영어는 추가로 사용해야함 */
text-orientation: upright;CSS의 writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있습니다.
- vertical-lr - 왼쪽에서 오른쪽
- vertical-rl - 오른쪽에서 왼쪽
하지만 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시됩니다. 이를 해결하는 방법으로는 text-orientation 속성을 이용하는 방법이 있습니다.
예제 코드
도움받은 자료
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions
텍스트 표시 방향 제어하기 - Web 개발 학습하기 | MDN
CSS 학습에서 지금까지 경험한 많은 속성과 값은 화면의 크기와 연결되어 있습니다. 예를 들어, 박스의 위, 오른쪽, 아래쪽 및 왼쪽에 테두리를 만듭니다. 이러한 실제 측정 기준은 가로로 표시되
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
writing-mode - CSS: Cascading Style Sheets | MDN
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).
developer.mozilla.org