세상에 가장 흐린 먹물도 가장 좋은 기억력보다 낫다.

가변 그리드 공식 이해하기

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

가변마진

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

가변 패딩

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

가변 폰트크기

( vw, vh, vmin, vmax 단위를 적용할 글자 크깃값 x 브라우저의 너빗값 ) / 100 = 크깃값

ex) 해상도 너비가 1920 일때 font-size:5vw; 일 때 브라우저에서는 96px 크기 이다.

멀티미디어 요소 가변적으로 만들기

비율에 상관없이 가변적인 멀티미디어 요소 만들기

기존의 웹사이트에서는 아무런 문제가 없었지만 브라우저의 비율에 따라 웹사이트의 구조가 늘어나거나 줄어드는 가변형 레이아웃에서 브라우저 너비에 맞게 이미지나 기타 멀티미디어 요소들도 가변적으로 작동하게 만들어 줘야 함.

img,video{

width:100%;

max-width:100%;

}

속성을 보도록 하겠습니다.

max-width:100%;를 안써도 되지만 굳이 쓰는 이유는 안정성을 위해서 사용합니다.

[반응형 웹 디자인]가변