세로쓰기 모드 writing-mode, 글자 타이핑 효과
2022. 3. 18. 12:44ㆍStudy/Publishing
CSS 쓰기 모드는 텍스트가 가로 또는 세로로 표시되는지 여부를 나타냅니다. writing-mode (en-US) 속성을 사용하면 쓰기 모드에서 다른 쓰기 모드로 전환할 수 있습니다. 이를 위해 세로 쓰기 모드를 사용하는 언어로 작업할 필요는 없습니다 — 창의적 목적으로 레이아웃 일부의 쓰기 모드를 변경할 수도 있습니다.
아래 예에서는 writing-mode: vertical-rl 를 사용하여 표시되는 제목이 있습니다. 이제 텍스트가 세로로 나타납니다. 세로 텍스트는 그래픽 디자인에서 일반적이며, 웹 디자인에서 보다 흥미로운 모양과 느낌을 추가할 수 있습니다.
Syntax
/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: unset;
horizontal-tb
콘텐츠를 수평적으로(왼쪽→오른쪽) 나열 후,
글자를 수직적으로(위→아래).
vertical-rl
콘텐츠를 수직적으로 (위→아래) 나열 후,
글자를 수평적으로(오른쪽→왼쪽) 써감.
※ 한글은 그대로 있고, 영문은 오른쪽으로 누움.
vertical-lr
콘텐츠를 수직적으로 (위→아래) 나열 후,
글자를 수평적으로 (왼쪽→오른쪽) 써감.
※ 한글은 그대로 있고, 영문은 오른쪽으로 누움.
세로쓰기 모드를 이용한 글자 타이핑 효과 예제
참고:)
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
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions
텍스트 표시 방향 제어하기 - Web 개발 학습하기 | MDN
CSS 학습에서 지금까지 경험한 많은 속성과 값은 화면의 크기와 연결되어 있습니다. 예를 들어, 박스의 위, 오른쪽, 아래쪽 및 왼쪽에 테두리를 만듭니다. 이러한 실제 측정 기준은 가로로 표시되
developer.mozilla.org
'Study > Publishing' 카테고리의 다른 글
| HTML include (0) | 2022.05.03 |
|---|---|
| input 태그의 pattern 속성과 정규표현식 (0) | 2022.05.02 |
| CSS 전처리기 SASS SCSS (0) | 2022.01.24 |
| 단위 em, rem, vw, vh, vmin, vmax (0) | 2022.01.12 |
| CSS3 grid (0) | 2022.01.11 |
