가변 단위

다양한 화면에 반응적으로 동작을 하기 위해서는 고정적인 pixel 단위 보다 가변적인 단위를 사용하는 것을 권장합니다.

픽셀은 한계가 있다! - 가변 그리드

가변 그리드(Fluid Grid)는 가변과 그리드를 혼합한 용어 입니다. 웹사이트를 제작함 때 화면의 크기에 관계없이 자유롭게 늪어나거나 줄어들 수 있도록 픽셀 대신 퍼센트(%) 로 제작하는 기술입니다.

하지만, px를 %로 바꾸어도 반응형 웹이 완성되지 않습니다. 이는 비율로 제작하면 가변적으로 작동하기는 하지만 기기나 환경에 따라 구조를 바꾸지는 못하기 때문입니다. 그래서 화면을 제어할 뷰포트와 화면의 크기나 환경을 감지하여 구조를 바꿔줄 미디어 쿼리가 필요 합니다.

퍼센트로 크기 지정

모든 디지털 화면은 픽셀 단위로 되어 있습니다. 픽셀은 화면의 화소 한개를 의미하며, 화면의 절대적인 크기가 됩니다.
유연한 화면을 구현하기 위해서는 고정적인 px단위 보다 가변적인 % 단위로 사용하는 것이 좋습니다.

크기를 퍼센트로 사용하기 위해서는 기준점이 있어야 합니다. 보통 기준점은 상위 부모 요소를 의미합니다. 그리고 가변으로 적용되는 사이즈는 자식 요소가 됩니다. 이를 계산해 보면 다음과 같습니다.

(자식요소 크기픽셀 / 부요 요소 픽셀크기 ) * 100

이렇게 하면 부모의 크기가 변할때 마다, 자식의 요소도 비율적으로 크기가 자동 변동 됩니다.

마진과 패딩 가변값으로 지정

웹페이지는 박스모델을 기본으로 하여 레이아웃이 구성되어 집니다. 각각의 요소들간에는 마진과 패딩을 통하여 간격을 가지게 되는데 이곳에서도 고정적인 pxiel 값 대신에 가변적인 값을 적용하는 것이 좋습니다.

마진이란 어떠한 물체와 물체 사이의 빈 공간을 말합니다
패딩(두께)이란 면과 면 사이가 물체나 공간 등으로 채워져 있는 것을 말하며. 속 또는 충전재라고도 합니댜

퍼센트로 지정

margin과 padding의 값도 퍼센트를 이용하여 지정할 수 있습니다.

calc 합수 이용하기

CSS3부터 함수라는 개념이 등장하였습니다. 복잡한 연산이냐 반복적인 작업들을 함수를 통하여 할 수 있는데, calac는 계산을 수행합니다.

header {
    width: calac(100%-100px);
}

화면 최대 100% 사이즈에서 100px많큼 작은 크기로 가로폭을 지정해 달라는 의미 입니다.

가변 폰트 크기를 이용

화면의 레이아웃의 크기는 글꼴의 크기와 비례하여 설계하는 것이 안정적입니다.

em 단위

em은 현재 요소에 적용되어 있는 폰트 사이즈 입니다. em은 영어 대문자 M의 너비를 1em으로 합니다.

이를 이용하여 요소의 값을 em의 몇배 형태로 지정할 수 있습니다.

header {
    padding: 1.5em;
}

rem 단위

em 단위는 자신의 부모박스에 글자 크기가 지정되어 있을 경우 자식 박스에게 글자 크기가 상속됩니다. 이러한 문제점을 해결하기 위해서 rem 단위가 추가 되었습니다.

rem 단위는 최상위, 즉 웹 문서의 시작인 <html></html> 태그를 기준으로 하기 때문에 상속 문제가 발생하지 않아 유용하게 시용함수 있는 단위 중 하나 입니 다.

유용한 가변단위

CSS3의 새로운 가변 단위인 vw, vh, vmin, vmax 단위를 알아보겠습니다.

vw(viewport width) 단위 (vw 단위를 적용할 글자 크갓값 x 브라우저의 너빗값) / 100 = 크깃값
vh(viewport height) 단위 (vh 단위를 적용할 굴자 크깃값 X 브라우저의 높잇값) / 100 = 크깃값
vmin(viewport minimum) 단위 웹 브라우저의 너비와높이 중 짧은쪽을 기준으로하여 크기를 결정하는 단위입니다.
vmax(viewport maximum) 단위 웹 브라우저의 너비와 높이중 큰쪽을 기준으로하여 크기를 결정하는 단위 입니다.