CSS에서 Styling Your Text

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 */
}

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