CSS - 가변 그리드, 가변 폰트

가변 그리드는 반응형 웹 페이지를 만들기 위해 꼭 필요한 요소입니다.

고정 그리드는 그 크기가 고정되어 있어서 해상도에 따라 보여지는 화면이 줄어들더라도 요소의 크기는 그대로이기 때문에 일부는 화면에 가려 스크롤 해야 보이는 경우가 생깁니다.

PC에 최적화되어 있어도 태블릿이나 모바일 사용자도 고려해야 하므로 스크롤 하지 않고도 한 화면에 내용이 모두 들어오도록 해야 합니다.

가변 그리드를 사용하려면 먼저 고정된 값을 가변으로 바꿔주는데,  px 를 % 로 바꿔주기만 하면 됩니다.

하지만 px 를 % 로 바꾸어도 반응형 웹이 만들어지는 것은 아닙니다. 화면 비율에 따라 가변적으로 반응하기는 하지만 환경에 따라 구조가 변경되지 않기 때문입니다.

그래서 구조를 변경할 뷰포트와 미디어 쿼리를 함께 사용합니다.

가변 그리드 공식

너비를 계산하는 공식은 이렇습니다.

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

300px 인 노란 박스가 있고 이 박스를 감싸고 있는 박스의 크기가 960px 이라면 31.25% 가 됩니다.

(300 / 960) X 100 = 31.25(%)
/* (31.25% X 960) / 100 = 300(px) */

여기서 소수점 이하 자리가 많다면 한두 자리로 표시하세요. 그리고 오차 값을 고려하여 실제 계산한 값보다 약간 작게 지정해 주는 것이 좋습니다

가변 마진과 패딩 공식

반응형 웹사이트에서 모든 요소가 가변이어야 합니다. 가변 그리드와 마찬가지로 px를 %로 바꿔주기만 하면 됩니다. 공식은 비슷합니다.

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

노란 박스의 패딩값이 56px 이고 이 박스를 감싸고 있는 박스의 크기가 960px 이면 5.83%가 됩니다.

(56 / 960) X 100 = 5.833333333333333‬(%)
/* (5.833333333333333‬% X 960) / 100 = 55.9999999999999(px) */

가변 멀티미디어 공식

기존의 웹사이트에서는 아무런 문제가 없었지만 브라우저의 너비에 맞게 이미지나 영상의 요소도 가변적으로 만들 필요가 있습니다.

예를 들어 PC에서는 이미지가 40% 의 크기여야 하고, 모바일에서는 100% 가 되어야 한다면, 미디어 쿼리를 고려하는 것이 좋습니다.

(적용할 멀티미디어 값 / 박스를 감싸고 있는 박스의 가로너비) X 100 = 가변 멀티미디어 값(%)

가변 폰트

px 단위는 해상도에 따라 픽셀 크기가 상대적으로 달라집니다. 그래서 해상도에 맞게 글자 크기를 나타내려면 가변 폰트를 사용해야 합니다. 참고로 브라우저 기본값은 16px 입니다.

다음 표를 사용할 수 있습니다.

단 위	설 명
em	요소를 감싸고 있는 부모 요소의 글자 크기를 기준으로 하는 단위
rem (root em)	HTML 요소(최상위 요소)의 글자 크기를 기준으로 하는 단위
vw (viewport width)	브라우저의 너비(가로)를 기준으로 하는 단위
vh (viewport height)	브라우저의 폭(세로)을 기준으로 하는 단위
vmin (viewport minimum)	브라우저의 너비와 폭 중에서 더 작은 값을 기준으로 하는 단위 (IE9 에서는 vmin 대신 vm 으로 지원함)
vmax (viewport maximum)	브라우저의 너비와 폭 중에서 더 큰 값을 기준으로 하는 단위 (IE11, Edge13, Edge14 에서는 지원하지 않음)

em, rem 공식

em 단위 공식은 이렇습니다.

(적용할 글자 크기 값 / 요소를 감싸고 있는 부모 요소의 글자 크기 값) = 가변 크기 값(em)

여기서 적용하고자 하는 크기 값이 20px 이고, 부모 요소의 글자 크기 값을 18px 라 한다면 가변 크기 값은 1.11em 이 됩니다.

body { font-size: 18px }
body h1 { font-size: 20px; }
/* 20(px) / 18(px) = 1.111111111111(em) */

하나 더 예를 들어봅시다. 적용할 가변 크기 값은 20px 이고, 부모 요소에 설정한 크기 값이 없으면 브라우저 기본값을 사용하므로 가변 크기 값은 1.25em 이 되겠습니다.

h1 { font-size: 20px; }
/* 20(px) / 16(px) = 1.25(em) */

역으로 한번 해보도록 합시다. % 값을 em 으로 바꾸면 다음 값은 10px 가 됩니다.

body { font-size: 62.5% }
/* 16(px) X 62.5(%) = 10(px) */

h1 을 감싸고 있는 요소가 BODY 이고, BODY 글자 크기가 10px 이므로 h1 의 2.4em 은 24px 가 됩니다.

h1 { font-size: 2.4em; }
/* 10(px) X 2.4(em) = 24(px) */
/* 24(px) / 10(px) = 2.4(em) */

ul 를 감싸고 있는 요소가 BODY 이고, BODY 글자 크기가 10px 이므로 ul 의 0.9em 은  9px가 됩니다. 그리고 li 를 감싸고 있는 요소가 ul 이고 ul 의 글자 크기는 9px 이므로 li 의 1.6em 은 14.4px 가 됩니다.

ul { font-size: 0.9em; } 
/* 10(px) X 0.9(em) = 9(px) */ 
/* 9(px) / 10(px) = 0.9(em) */


ul li { font-szie: 1.6em; } 
/* 9(px) X 1.6(em) = 14.4(px) */
/* 14.4(px) / 9(px) = 1.6(em) */

em 단위는 부모 요소에 글자 크기가 지정되어 있을 경우 자식 요소에게 글자 크기가 상속됩니다. 반면에 rem 단위는 최상위 요소인 HTML 요소를 기준으로 합니다.

html { font-size: 62.5% }
/* 16(px) X 62.5(%) = 10(px) */
/* (10px / 16px) X 100 = 62.5(%) */

h1 { font-size: 2.4em; }
/* 10(px) X 2.4(em) = 24(px) */
/* 24(px) / 10(px) = 2.4(em) */

ul { font-size: 0.9em; } 
/* 10(px) X 0.9(em) = 9(px) */ 
/* 9(px) / 10(px) = 0.9(em) */


ul li { font-szie: 1.6em; } 
/* 10(px) X 1.6(em) = 16(px) */
/* 16(px) / 10(px) = 1.6(em) */

가변 폰트는 폰트에서만 적용하지 않습니다. 예를 들어 가변 그리드에서 사용할 수 있겠지요.

.container {
  width: 70rem;
}
/* 16(px) X 70(rem) = 1120(px) */
/* 1120(px) / 16(px) = 70(rem) */

최상위 요소(HTML)의 글자 크기를 지정하지 않았으므로 브라우저 기본값 16px 를 적용하여 계산한 값이 1,120px 가 됩니다.

vw, vh, vmin, vmax 공식

공식은 이렇습니다.

(적용할 글자 크기 값 X 브라우저의 너비 값) / 100 = 크기 값(px)

vw 요소는 너비 값의 100분의 1 단위입니다. 예를 들어 브라우저 너비 값이 1028px 이면 2vw 는 위 공식을 적용하여 20.56px 가 됩니다.

div { font-size: 2vw; }
/* (2vw X 1028px) / 100 = 20.56(px) */
/* (20.56px X 100) / 1028(px) = 2(vw) */

브라우저 너비가 1280px 이고, 5vw 를 설정하면 64px 가 나옵니다.

div { font-size: 5vw; }
/* (5vw X 1280px) / 100 = 64(px) */
/* (64px X 100) / 1280(px) = 5(vw) */