가변 그리드

 

가변 그리드 : px를 %로 바꿔주는 형식

 

가변 그리드 공식

 

(가변 크기로 만들 박스의 가로 너비 / 앞의 박스를 감싸고 있는 박스의 가로 너비) *100

 

가변 마진  & 가변 패딩

 

* 가변 그리드 공식을 똑같이 적용하면 된다.

 

가변 폰트

 

가변 폰트를 적용할 글자 크기 / 적용할 요소를 감싸고 있는 요소의 글자 크기

 

- 폰트 단위

• em : 대문자 M의 너비를 표현한 것, 16px
• rem : 최상위 태그 기준 , 상속문제 발생 X
• vw : 웹 브라우저의 너비를 100으로 기준하여 크기를 결정 
• vh : 웹 브라우저의 높이를 100으로 기준하여 크기를 결정
  • vw/vh를 px로 변환 = (vw 단위를 적용할 글자 크기 * 브라우저의 너빗값) /100
• vmin : 웹 브라우저의 너비와 높이중 짧은 쪽을 기준으로 크기를 결정
• vmax : 웹 브라우저의 너비와 높이중 큰 쪽을 기준으로 크기를 결정