6. Font Style

1. Font Style

이번엔 Font Style를 확인해보도록 합시다.

1. font family

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

위 코드를 한번 봐볼까요?

 

앞에서 배웠듯 #은 id의 요소를 바꿀때 사용하였습니다.

 

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

 

브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용하겠다는 뜻입니다.

만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times,

 

그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.

 

"Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데,

폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.

 

가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트입니다.

 

폰트가 지정되지 않으면 브라우저에서 기본적으로 적당한 폰트를 자동으로 지정해줍니다.

2. font size

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

big-size-font 라는 클래스에 50px(픽셀)의 폰트크기를 지정해주었습니다.

폰트 크기 단위는 'px', 'em', 'pt'등 여러가지 있습니다.

 

h1의 폰트 크기도 바꿀수 있습니다.

h1 {
  font-size: 30px;
}

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

h4 tag가 big-size-font인데 h1 tag보다 커졌습니다!

 

3. font-weight

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

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

font-weight는 normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있습니다.

 

숫자 400과 normal은 같은 두께입니다.

숫자 700과 bold는 같은 두께입니다.

4. font style

font style
a {
  font-style: italic;
}

font-style이라는 property로 쉽게 글씨 스타일을 바꿀 수 있습니다.

italic이라는 값을 지정하면 이탤릭체로 변하게 됩니다.

5. color

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

color라는 property는 글씨 색깔을 변경해줍니다.

 

pink, yellow처럼 텍스트로 누구나 알아보기 쉬운 색깔을 지정할 수 있습니다.

blue, red, deepskyblue 등 다양한 텍스트 색상이 있습니다.

 

hex 색상코드: 여섯자리로 표현 - #eb4639

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

 

hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)

 

등 여러가지로 표현할 수 있습니다.

 

구글에서 "color picker"라고 치거나

"color picker hex color"등의 키워드로 검색하면,

내가 원하는 색상을 뽑아주는 여러 앱들이 있습니다.