가변 그리드

가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀 설정 값이 아닌 퍼센트(%) 설정 값 또는 가변 그리드 단위로 제작하는 기술이다.
가변 그리드 마다 계산하는 공식이 존재하고 공식이 모두 다르다.

가변 그리드의 단위

• 가변 그리드의 단위들
  vw
  vh
  vmin
  vmax
  em
  rem
  %

• vw : 웹 넓이를 100을 기준으로 크기를 결정함.
• vh : 웹 높이를 100을 기준으로 크기를 결정함.
• vmin : 높이와 너비중 짧은쪽을 100을기준으로하여 크기 결정.
• vmax : 높이와 너비중 긴쪽을 100을기준으로 하여 크기 결정.
• em : 부모의 font-size를 상속 받음. (1em = 부모 font-size)

  	>> 부모 font-size가 설정되지 않았다면, 1em = 16px

• rem : 부모의 font-size를 상속 받지 않고 최상위(html)의 font-size를 기준으로 한다.
• % : 부모 요소를 기준으로 비율을 표현한다.

가변 그리드 공식

• 가변 box 공식

  (가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) X 100 = 가변 크기의 % 값

• 가변 margin 공식

  (가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 마진 % 값

• 가변 padding 공식

  (가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 패딩 % 값

• 가변 font 공식

  vw : (글자값 x 브라우저 너비값) ÷ 100
  vh : (글자값 x 브라우저 높이값) ÷ 100

유튜브 영상 가변 그리드

jquery의 fitvids함수를 쓰면 된다.

* fitvids 사용법
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="source/jquery.fitvids.js"></script>
	<script>
    	$("#wrap").fitVids();
    </script>

이미지 가변 그리드

이미지 width 나 heigth 값을 가변 그리드의 단위를 사용하고, max-width 나 max-height 속성을 준다.

max와 min

min-width : 화면 크기가 줄어들어도 지정한 가로크기 이하로는 줄어들지 않음.
max-width : 화면 크기가 커져도 지정한 가로크기 이상으로는 커지지 않음.
min-height : 화면 크기가 줄어들어도 지정한 세로크기 이하로는 줄어들지 않음.
max-heigth : 화면 크기가 커져도 지정한 세로크기 이상으로는 커지지 않음.