# Styling Text ## 텍스트 * `color` * `font` * `font-family` : 둘 이상의 단어가 있는 글꼴 이름은 따옴표로 묶어야합니다 * Arial | Courier New | Georgia | Times New Roman | Trebuchet MS | Verdana * serif | sans-serif | monospace | cursive | fantasy * `font-size` * `font-style` : normal | italic | oblique * `font-weight` : normal | bold | lighter | bolder | 100~900 * `text-transform` : none | uppercase | lowercase | capitalize | full-width * `text-decoration` : none | underline | overline | line-through * `text-decoration-line`, `text-decoration-style`, `text-decoration-color` * `text-shadow` : 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다. ```CSS p { font-family: "Trebuchet MS", Verdana, sans-serif; } ``` ```CSS p { text-shadow: 4px 4px 5px red; } ``` * font-variant * font-variant-alternates, font-variants-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position * font-size-adjust * font-stretch * font-kerning * font-feature-settings * text-underline-position * text-rendering ## 텍스트 레이아웃 * `text-align` : left | right | center | justify * `line-height` : 일반적으로 단위 없는 값을 사용합니다. ```CSS p { line-height: 1.5; } ``` * text-indent * text-overflow * white-space * word-break * direction * hypens * line-break * text-align-last * text-orientation * word-wrap ## 웹 폰트 ```CSS @font-face { font-family: "myFont"; src: url("myFont.woff2"); } html { font-family: "myFont", "Bitstream Vera Serif", serif; } ``` ## 글 쓰기 방향 * `writing-mode` : horizontal-tb | vertical-rl | vertical-lr 쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.