가변 그리드

화면 크기와 관계없이 자유롭게 늘어나거나 줄어들도록 고정값(px) 대신 퍼센트(%)로 제작하는 기술이다.

1. 가변 그리드

(가변 크기로 만들 박스의 가로 너비 / 부모 박스 가로 너비) * 100 = 가변 크기 값(단위: %)

예제1

나의 노트북 기준 브라우저 화면 최대 너비는 1887px다. #wrap의 너비를 1700px로 맞추고, 이 비율을 유지하고 싶다면 위의 공식에 따라 (1700 / 1887) * 100 = 90%으로 #wrap의 너비를 설정하면 된다. .container 역시 같다. 1600px 비율을 유지한다면, (1600 / 1700) * 100 = 94.11%를 도출할 수 있다. 샌드박스 뷰포트의 크기를 조절하면 비율이 유지된 채로 박스 크기가 변하는 것을 볼 수 있다.

2. 가변 마진

(가변 마진을 적용할 마진값 / 부모 박스 가로 너비) * 100 = 가변 마진 값(단위: %)

예제2

공식 적용은 가변 그리드와 비슷하다.

3. 가변 패딩

(가변 패딩을 적용할 패딩값 / 부모 박스 가로 너비) * 100 = 가변 패딩 값(단위: %)

예제3

공식 적용은 상기와 비슷하다.

비교를 위해 고정 패딩과 가변 패딩을 나란히 구성했다. 고정 패딩은 50px이고, 가변 패딩은 부모 박스 가로 너비 1700px에 대한 50px 비율로 2.94%를 설정했다. 고정 패딩의 경우 뷰포트 크기가 일정 크기 이하로 줄면 고정된 패딩을 유지하기 위해 변화가 없지만, 가변 패딩은 음절이 하나가 될 때까지 패딩을 유지하며 변화하는 것을 볼 수 있다.

---

참고
Do it! 반응형 웹 만들기