[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 43회차 미션

1주일만 더 하면 50일 미션 완료!

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 43일차입니다!

오늘은 14번째 커리큘럼, 'CSS / 속성- 글꼴,문자'를 시작했어요. 단축속성 font와 그 개별속성들에 대하여 공부했습니다.

font 속성은 실무나 프로젝트를 하면서 쓰는 것만 썼는데 어떤 개별 속성과 특징이 있는지 제대로 알아봤습니다.

 

오늘은 01. font, font-style / 02. font-weight / 03. font-size 에 대하여 공부했습니다.

---

font

◾ 글자 관련 속성들을 지정 ➡ 다양한 개별 속성들을 아우르는 단축 속성

◾ 속성 값 ⬇

 

값	의미	기본값
font-style	글자 기울기 지정	normal
font-weight	글자 두께 지정	normal
font-size	글자 크기 지정	medium (16px)
line-height	줄 높이 지정	normal (Reset.css에서 1로 설정됨)
font-family	글꼴(서체) 지정	브라우저마다 다름

 

◾ 사용법

➡ font: 기울기 두께 크기 / 줄높이 글꼴;

(ex) font: italic bold 20px / 1.5 "Arial", sans-serif;

  ➡ "Arial"은 기본 글꼴을 말하며 만약 사용자의 디바이스에 "Arial" 글꼴이 없을 경우 sans-serif 계열 폰트가 대체하여 사용됨

  ◾ '/' 사용: 줄 높이에도 'px' 단위를 쓸 수 있기 때문에 구분하기 위하여 사용

  ◾ 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야 함

 

font-style

◾ 글자의 기울기 설정

◾ 속성 값 ⬇

 

값	의미	기본값
normal	스타일 없음	normal
italic	이탤릭체 (활자)	.
oblique	기울어진 글자	(잘 사용하지 않음)

 

font-weight

◾ 글자의 두께(가중치)를 지정

◾ 속성 값 ⬇

 

값	의미	기본값
normal	기본 글자 두께 (=400)	normal (400)
bold	글자 두껍게 (=700)	.
bolder	부모(상위) 요소보다 더 두껍게	.
lighter	부모(상위) 요소보다 더 얇게	.
숫자	100~900 (100 단위 숫자 9개), normal과 bold 이외의 두께를 제공하는 글꼴(서체)을 위한 설정	.

 

◾ 일반적인 두께의 이름: font-weight의 각 값은 일반적으로 다음과 같은 글꼴 이름으로 표현됨

 

100	Thin (Hairline)	600	Semi Bold (Demi Bold)
200	ExtraLight (Ultra light)	700	Bold
300	Light	800	Extra Bold (Ultra Bold)
400	Normal	900	Black (Heavy)
500	Medium

 

◾ 상대적 두께: border나 lighter을 사용할 경우, 부모(상위) 요소에게 상속받은 값에서 다음과 같이 계산됨

 

상속값	bolder	lighter
100 200 300	400	100
400 500	700	100
600 700	900	400
800 900	900	700

 

◾ 숫자 값과 두께의 불일치 경우 (폰트에 따라 다름)

➡ (ex) normal, bold만 지원하는 글꼴은 100~500을 normal, 600~900을 bold로 설정함

  1. 400 값이 없다면 500을 사용, 만약 500 값도 없다면 500 미만의 다른 두께를 사용

  2. 500 값이 없다면 400을 사용, 만약 400 값도 없다면 400 미만의 다른 두께를 사용

  3. 400 미만 값이 주어지면, 가장 가까운 숫자의 얇은 두께를 사용

  4. 500 초과 값이 주어지면, 가장 가까운 숫자의 두꺼운 두께를 사용

---

강의 링크: https://bit.ly/3m0t8GM