CSS - 5. font style

1. font family

font-family는 폰트 스타일을 지정하는 속성이다.

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

Georgia, "Times New Roman", Times, serif 라는건, 브라우저가 Georgia라는 폰트를 지원해주면 Georgia폰트로 적용하겠다는 뜻이다. 만약 Georgia 폰트가 지원되지 않으면, "Times new Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻이다. "Times new Roman"에만 ""(쌍따옴표)로 감싸져 있는 건, 폰트 이름에 띄어쓰기가 되어있으면 ""를 사용해야 한다.

font-family 값에는 보통 여러가지 폰트를 나열한다. 그 이유는 사용자가 어떤 브라우저를 사용할지 모르기 때문에 최대한 여러 폰트를 나열하는 것이다. 가장 뒤에 위치한 serif 같은 폰트는 모든 브라우저에 지원하는 폰트이다. 만약 폰트가 지정되지 않으면 브라우저에서 기본적으로 적당한 폰트를 자동으로 지정해준다.

 

---

2. font size

.big-size-font {
  font-size: 50px;
}

big-size-font 라는 클래스에 50px(픽셀)의 폰트 크기를 지정해주었다. 폰트 크기 단위는 'px', 'em', 'pt' 등 다양하다. 주로 'px'가 쓰인다.

앞에 게시했던 글 중에서 h1~h5 태그는 heading(제목)을 주로 작성하는 태그라 하였다. 1에서 5로 숫자가 커질수록 글씨 크기가 점점 작아진다고 했는데, css에서 폰트 크기를 바꿀 수 있다.

h1 {
  font-size: 30px;
}

h4 {
  font-size: 50px;
}

h1이 h4보다 커야하지만 위와 같이 설정할 경우 h4가 더 커지게 된다. 여기서 알 수 있는 것은 브라우저에서는 가장 먼저 태그를 확인하고 그에 맞는 기본(default) 스타일을 적용하는데, 해당 태그나 class, id에 css값이 있다면 해당 스타일을 더 우선순위로 적용하게 된다는 걸 알 수 있다.

 

---

3. font weight

.bold-font {
  font-weight: bold;
}

font-weight는 글씨 두께를 조절하는 property이다. 

font-weight는 normal, bold, 100, 200,... 900 등의 값이 지정될 수 있다. 숫자 400과 normal은 같은 두께이다. 700과 bold도 같은 두께이다. 이렇게 숫자로 두께를 세밀하게 조정해도 되지만, 보통은 두껍거나 또는 아니거나 두 가지 경우면 되므로 간편하게 bold값을 지정한다.

 

---

4. font style

a {
  font-style: italic;
}

font-style이라는 property로 쉽게 글씨 스타일을 바꿀 수 있다. italic이라는 값을 지정하면 이탤릭체로 변하게 된다.

 

---

5. color

.pink {
  color: pink;
}
.yellow {
  color: yellow;
}

color라는 property는 글씨 색깔을 변경해준다. pink, yellow처럼 텍스트로 누구나 알아보기 쉬운 색깔을 지정할 수 있다. blue, red, deepskyblue 등 다양한 텍스트 색상이 있다. 더 세밀한 조정을 하기 위해서는 색상 표현법(바로 아래)을 알아야 한다.

hex 색상코드: 여섯 자리로 표현 (예. #eb4639)

rgb값: 빨강, 초록, 파랑으로 표현 (예. rgb(235, 70, 57))

hsl: 색상, 채도, 명도로 표현 (예. hsl(4, 82%, 57%) 

등 여러 가지로 표현할 수 있다. (바로 아래 표현을 해보자면)

h1 {
 color: #eb4639;
}
h1 {
 color: rgb(235, 70, 57);
}
h1 {
 color: hsl(4, 82%, 57%);
}

위 세 가지는 모두 같은 색이다. 구글에서 'color picker'라고 치거나 'color picker hex color'등의 키워드로 검색하면, 내가 원하는 색상을 뽑아주는 여러 앱들이 존재한다. 만약 hex 표현에서 rgb 표현으로 바꾸고 싶다면 'color hex to rgb'라는 키워드로 검색해서 찾아보면 된다.