#03 CSS font 속성

 

font-family

• 서체를 지정하는 속성
• 서체 이름에 공백이 포함된 경우 따옴표로 묶어 지정해야 한다.
• 쉼표로 구분하여 여러 개의 서체를 지정할 수 있다.
• 첫 번째 서체가 우선순위를 갖지만 지정한 서체를 지원하지 않으면 그다음에 지정한 서체로 대체된다.
  (영문과 한글의 서체를 다르게 하고 싶을 경우 한글을 지원하지 않는 영문 서체 먼저 지정하면 된다)
• 마지막 서체는 일반 서체로 지정하는 것이 권장된다.
  (지정한 서체 전부를 지원하지 않는 경우 브라우저가 유사한 서체를 선택하도록 해야 하기 때문에)

 

- 일반 서체 종류

• serif : 글자의 가장자리에 꺽쇠가 있는 서체 (명조체)
• sans-serif : 심플하고 깔끔한 서체 (고딕체)
• monospace : 글자의 너비가 동일한 서체
• cursive : 필기체
• fantasy : 장식이 많은 화려한 서체

selector {
  font-family: Georgia, '마루 부리', serif;
}

---

 

---

font-size

• 글자 크기를 지정하는 속성 (default = 16px)

 

- 크기 단위

• px : 가장 많이 사용하는 단위로 글자의 높이값을 나타낸다.
• em : 부모 요소 font-size의 배수를 나타낸다.
• rem : 루트 요소(html) font-size의 배수를 나타낸다.
• n% : 부모 요소 font-size의 퍼센트를 나타낸다.

html{font-size: 16px;}
.parent {font-size: 30px;}

/* 30px * 1.5 */
.em_child {font-size: 1.5em;}
/* 16px * 1.5 */
.rem_child {font-size: 1.5rem;}
/* 30px * 50% */
.percent_child {font-size: 50%;}

---

 

---

color

• 글자 색상을 지정하는 속성

 

- 색상 값 종류

• 일반 색상명 ex) red
• HEX코드 ex) #097c25
• RGB ex) rgb(100, 0, 255)

selector {color: red;}
selector {color: #097c25;}
selector {color: rgb(100, 0, 255);}

---

 

---

font-weight

• 글자의 굵기를 조절하는 속성
• 굵기가 다양하지 않은 폰트의 경우 해당 사이즈가 없으면 근사치로 적용된다.

 

- 속성 값

• 100, 200, 300, 400, 500, 600, 700, 800, 900 : 숫자가 클수록 굵다
• normal : 기본 폰트 사이즈 (400)
• bold : 굵은 폰트 사이즈 (700)

selector {font-weight: 100;}
selector {font-weight: normal;}
selector {font-weight: bold;}
selector {font-weight: 900;}

---

 

---

line-height

• 줄의 높이를 지정하는 속성으로 행간을 조절할 수 있다.
• line-height가 font-size보다 클 경우 글자를 중간에 배치해주며, 크기 차이만큼 행간이 삽입된다.

 

- 크기 단위

• px : 줄의 높이값
• number : 현재 font-size의 배수를 나타낸다.
• n% : 현재 font-size의 퍼센트를 나타낸다.

/* 현재 font-size: 16px */
selector {line-height: 30px;}
selector {line-height: 2.5;}
selector {line-height: 150%}

---

(줄의 구분을 위해 테두리선을 추가했다)

---

font-style

• 글자의 스타일을 지정하는 속성

 

- 속성 값

• normal : 기본
• italic : 이탤릭체

selector {font-style: normal;}
selector {font-style: italic;}

---

 

---

font-variant

• 영문의 대소문자에 대한 스타일을 지정하는 속성

 

- 속성 값

• normal : 기본
• small-caps : 소문자를 작은 대문자 형태로 바꿔준다.

selector {font-variant: normal;}
selector {font-variant: small-caps;}

---

 

---

★ font 속성 축약형

• 한 번에 여러 가지 font 속성 적용이 가능하며, 순서대로 작성해야 한다.
• 필요 없는 속성은 생략이 가능하지만 font-size와 font-family는 꼭 지정해야 한다.
• font-size와 line-height를 함께 지정할 때는 사이에 / 를 넣어줘야 한다.

font : font-style font-variant font-weight font-size/line-height font-family;

 

selector {font: small-caps bold 30px/1.2 나눔스퀘어;}

---