css-examples/Writerside/topics/Styling-Text.md

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 : 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 순서대로 지정합니다. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

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 : 일반적으로 단위 없는 값을 사용합니다.

p {
  line-height: 1.5;
}

그 외 속성들

• text-indent
• text-overflow
• white-space
• word-break
• direction
• hypens
• line-break
• text-align-last
• text-orientation
• word-wrap
• word-spacing
• letter-spacing

웹 폰트

@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) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.