CSS - Typography

Typography  설정

 

타이포그래피

- 활자의 서체나 글자 배치 등의 구성 및 표현.

= 텍스트를 예쁘게 디자인.

 

정보(information)의 가독성을 위해서.

 

📌 font-size

= 글자 크기

px	절대 단위
em	상대 단위	실제로 적용된 폰트 사이즈 (부모의 font-size) 의 N배
rem		html 태그 기준 N배

보통은 px을 많이 사용함.

 

 

 

📌 line-height

= 줄 간격

 

마찬가지로 px, em, rem 단위 사용.

여기서는 em을 많이 사용함. (해당 폰트사이즈의 N배만큼)

 

(그냥 1.5라고 적는것이 관례. 1.5em 이라고 쓰지 X)

 

 

line-height가 얼마가 되든간에

font-size에 해당하는 부분은 정 중앙에 위치하게 된다!

 

 

 

📌 letter-spacing                            

= 자간 간격

 

px과 em 단위 사용 가능.

(주로 em사용함)  

예> letter-spacing :  -0.03em

 

(-는 간격 좁히고, +는 간격 늘이고)

 

 

 

 

📌 font-family            

= 폰트 서체

 

보통은 여러개의 폰트를 ,로 이어서 작성함.

 

예> font-family: "A", "B", sans-serif

(A없다면 B적용하고, B없다면 아무런 sans-serif계열 써줘.)

 

serif	sans-serif
삐침 기호가 有	삐침 기호 無 굵기 일정하게 감

 

 

cr: New England Reprographics

 

 

 

 

📌 font-weight

 

= 폰트 굵기.

 

100	Thin
300	Light
400	Regular
500	Medium
700	Bold
900	Black

 

 

무조건 100단위로 ( 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 )

 

 

 

📌 color

      

hex	#0066ff
rgb	rgb(0,102,255)
rgba	rgba(0,102,255,1)      // 투명도(a, 알파)

** rgba 에서 alpha(a값)은 0은 완전 투명 / 1은 불투명한 것.

(소수점 단위로 0.5 와 같이 작성함.)

 

 

 

---

ref lecture.

 

• https://edu.goorm.io/learn/lecture/20583