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
Leave A Comment