Ch02 px를 %로 바꾸기 - 가변 그리드

가변 그리드가 공식이 있는 기술이구나... 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술
(가변 크기로 만들 박스의 width / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 width)x100 ㄴ> 패딩값 적용할땐 패딩값 빼기
inline-block : inline속성값처럼 요소들이 한줄로 보이고 block 태그에 적용할 수 있는 속성도 사용할 수 있는 속성값

em : 상대적 단위 , M의 너비를 1cm으로 표현한 것, =16px , 상속문제 발생
(가변 폰트를 적용할 글자 크깃값 / 적용할 요소를 감싸고 있는 요소의 글자 크깃값) =가변폰트값
rem 단위 : 상속문제 발생 x, 웹 문서 시작인 <html>태그를 기준
진정한 가변 폰트 - vw, vh, vmin, vmax 단위
1. vw (viewport width)단위 : 웹 브라우저의 너비를 100을 기준으로 하여 크기를 결정 (vw 단위를 적용할 글자 크깃값 x 브라우저의 너빗값) / 100
2. vh (viewport height)단위 : 웹 브라우저의 높이를 100을 기준으로 하여 크기 결정 (vh 단위를 적용할 글자 크깃값 x 브라우저의 높잇값 ) / 100
3. vmin (viewport minimum)단위 : 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 크기결정
4. vmax ( " max)단위 : 웹 브라우저의 너비와 높이 중 긴 쪽을 기준으로 하여 크기 결정 그 외에는 vw, vh단위랑 같음

개발