[CSS3] 타이포그래피(font-size)

---

알고있으면 좋은 CSS3 Tip✨

---

font-size

• 글자 크기를 지정하며 상대단위, 절대단위를 사용할 수 있다.

부모 요소 기준으로 사이즈 변경 할 때  [%, em]
브라우저 기준으로 사이즈 변경 할 때  [vw, vh, rem]

 

px

• 고정 된 값을 사용하기에 반응형에서는 직접 화면 크기에 맞게 수정해줘야 한다.

 

em

• 부모 태그의 영향을 받는 상대적인 크기이다. (사용을 권장하지 않는다.)

16 x 6 = 96 ⇒ #baseball의 font-size:96px;
96 x 1.5 = ⇒ #team의 font-size:144px;

 

rem

• 1rem → 16px (기존 폰트 사이즈를 정하지 않는다면 default 값은 16px)
• html 태그에 적용된 font-size의 영향을 받는다.
• html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽다.

16 x 6 = 96 ⇒ #baseball의 font-size:96px;
16 x 1.5 = 24 ⇒ #team의 font-size:24px;

 

vw (viewport weight) & vh (viewport height)

• 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻이다.
• vh 와 vw 는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환
반면에 % 는 창이 중심이 아니며, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환

100vh, 100vw 가 전체 화면의 기준
1vw = 실제 너비값의 1/100  ->  즉 50vw = 실제 너비값의 50/100 이므로 1/2 반을 차지한다.
1vh = 실제 높이값의 1/100  ->  즉 50vh = 실제 높이값의 50/100 이므로 1/2 반을 차지한다.