1. font family
font family는 폰트 스타일을 지정하는 태그다.
#title { font-family: Georgia, "Times New Roman", Times, serif; }
브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용한다는 뜻.
만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용한다.
"Times New Roman"처럼 띄어쓰기가 되어있는 폰트 이름은 ""(쌍따옴표)를 사용해야한다.
font-family 값에는 보통 여러가지 폰트를 나열한다. 사용자가 어떤 브라우저를 사용할지 모르기 때문이다.
가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트!
2. font size
.main { font-size: 50px; }main 라는 클래스에 50px(픽셀)의 폰트크기를 한다.
폰트 크기 단위는 'px', 'em', 'pt'등 여러가지 있다.
html h1~h5 태그는 heading(제목)을 주로 작성하는 태그다. 1에서 5로 숫자가 커질수록 글씨크기가 점점 작아진다. 하지만 css에서 폰트크기를 바꿀 수 있다.
h1 { font-size: 30px; } h4 { font-size: 50px; }h1 태그에는 30px이고, h4태그에는 50px가 적용 되었기에, h4태그의 글씨가 더 커지게 된다.
3. font weight
.bold-font { font-weight: bold; }
font-weight 는 글씨 두께를 조절하는 속성(property) 이다.
font-weight는 normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있다.
숫자 400은 normal과 같다.
숫자 700은 bold와 같다.
이렇게 숫자로 두께를 세밀하게 조정해도 되지만, 보통은 두껍거나 or 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정한다.
4. font style
a { font-style: italic; }font-style이라는 property로 쉽게 글씨 스타일을 바꿀 수 있다.
italic이라는 값을 지정하면 이탤릭체로 변한다.
5. font color
.pink { color: pink; } .yellow { color: yellow; }
pink, yellow처럼 텍스트로 누구나 알아보기 쉬운 색깔을 지정할 수 있다.
하지만 진한핑크, 연한핑크, 초록색같은 노란색.. 등 더 세밀한 조정을 하기위해서 여러가지가 방법을 사용할 수 있다.
hex 색상코드: 여섯자리로 표현 - #eb4639
rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%) 등 방법이 있다.
