[위클리 페이퍼 2주차] font-size 변경시 스타일링 방법

-왜? 다양한 사람들이 다양한 디바이스를 가지고 웹을 이용한다. 그렇기에 어떤 디바이스에서도 문제없이 정상적으로 작동할수 있게 만들어야 한다.

1. 상대적인 단위 사용(em, rem)
em: 부모 요소의 폰트 크기를 기준으로 설정
rem: 최상위 HTML 요소의 폰트 크기를 기준으로 설정


html { 
	font-size: 16px;}

.box {
	width: 10rem; //HTML 폰트 크기의 10배로 지정 }
    
   


2. 미디어 쿼리 활용
폰트 크기가 변경되었을 때 레이아웃이나 요소 크기를 다르게 설정하고 싶다면 미디어 쿼리 사용

@media screen and (min-width: 600px) {
.box {
  font-size: 1.2rem;
  	}}


해석)화면 너비가 600px 이상일 때, .box의 요소 폰트 크기를 1.2 rem으로 설정한다.
	600px 미만일 때는 쿼리 내부의 스타일 적용이 아닌 기본 폰트 크기가 적용된다.
    
    
 3.Flexbox 또는 css grid 레이아웃 사용

(1) flexbox는 1차원 레이아웃 시스템으로, 가로 or 세로로 배치하는 데 적합하다.
(2) css grid는 2차원 레이아웃 시스템으로, 행과 열을 배치하는 데 적합하다
	복잡한 레이아웃에서 더욱 강력한 제어를 할수 있다.