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

11 * 4 = 44

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

오늘은 font 개별 속성에 대한 공부를 마쳤습니다.

font-family 속성을 공부하다보니 조만간 UI 작업할 때 자주 쓰이는 font 계열이나 종류에는 어떤 것이 있는지 궁금해졌어요.

조만간 font와 관련한 정보도 수집해서 블로그 글로 써보고 싶네요! 😎

 

오늘은 03. font-size / 04. line-height / 05. font-family 에 대하여 학습했습니다.

---

font-size

◾ 글자의 크기를 지정

◾ 속성 값 ⬇

 

값	의미	기본값
단위	px, em. cm 등 단위로 설정	16px
%	부모(상위) 요소의 비율로 지정	.
xx-small	가장 작은 크기	.
x-small	더 작은 크기	.
small	작은 크기	.
medium	중간 크기	medium
large	큰 크기	.
x-large	더 큰 크기	.
xx-large	가장 큰 크기	.
smaller	부모(상위) 요소보다 작은 크기	.
larger	부모(상위) 요소보다 큰 크기	.

 

line-height

◾ 줄 높이(행간) 지정

◾ 속성 값 ⬇

 

값	의미	기본값
normal	브라우저의 기본 정의를 사용	normal
숫자	요소 자체 글꼴 크기의 배수로 지정	.
단위	px, em, cm 등 단위로 지정	.
%	요소 자체 글꼴 크기의 비율로 지정	.

 

◽ 배수가 1.4~1.7일 때 가독성이 좋음

◽ 만약 font-size: 16px; line-height: 32px; 이라면 첫 번째 줄과 두 번째 줄의 행간은 16px이다.

  ➡ 첫 번째 줄이 전체 차지하는 높이가 32px이고 그 중앙에 16px짜리 텍스트가 들어있는 형태!

 

 

font-family

◾ 속성 값 ⬇

 

값	의미
글꼴 이름	글꼴(서체) 후보 목록 지정 ➡ 10개 적으면 10개 중 하나 사용됨 ➡ 만약 사용자 브라우저에 해당 글꼴이 모두 없으면 아래 글꼴 계열 이름을 지정함
serif	바탕체 계열
sans-serif	고딕체 계열
monospace	고정너비(가로폭이 동등한) 글꼴 계열
cursive	필기체 계열
fantasy	장식(재미있는 문자 표현 포함) 글꼴 계열

 

◽ 사용법

➡ font-family: [ 글꼴 후보 1, 글꼴 후보 2, ... ], 글꼴 계열;

(ex) { font-family: Arial, "Open Sans", "돋움", dotum, sans-serif; }

  ➡ 컬러박스 차례대로 "글꼴 후보" / "글꼴 계열"

  ⭐ 글꼴 계열은 필수로 입력!

---

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