Options

  • font (family, style, variant, size)
  • color and background
  • alignment
  • line-height

font-family

  • text 스타일
  • 운영체제에서 지원되지 않는거는 대안을 제공할 수 있다.
    • Courier를 하고 싶지만 지원하지 않으면 다음 Impact 적용, 이것도 안되면 Arial
    • 모두 지원이 되지 않으면 browser default 적용
h1{
    font-family: Arial;
}
h1{
    font-family: Courier, Impact, Arial;
}

font-family 고려 사항

  • 일부 폰트는 유저에게 친숙하지 않다. 가능하면 sans-serif 를 사용해라

Custom fonts

  • “web-safe” 폰트로 @font-face를 사용
@font-face{
    font-family: mySpecialFont;
    src: url('Collen.ttf');
}
h1{
    font-family: mySpecialFont;
}

font-style

  • normal
  • italic
  • oblique

font-variant

  • normal
  • small-caps

font-size

  • options
    • xx-small, x-small, small, smaller
    • medium
    • larger, x-large, xx-large
    • use pixel

color and background-color

  • color attribute는 foreground의 color
  • background-color는 background의 color
h1, span{
    color: #0000FF;            /* Blue */
    background-color: #B3B3B3; /* Grey */
}
color 적용 결과

text-align

  • 심플하다
  • text-align
    • left
    • right
    • center
    • justify

line-height

  • font에 영향은 주지 않음
  • 텍스트 라인 사이에 공간
h1{
    line-height: 50%;
}
h1{
    line-height: 200%;
}

Review

  • 텍스트 스타일 옵션들은 압도적으로 보일 수 있다.
  • 작은 사이트로 연습해라
  • 큰 프로젝트는 종이에 먼저 디자인

공부 위치 – https://www.coursera.org/learn/introcss/lecture/kxPBK/01-04-styling-your-text