[반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴

 

 

[반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴

 

오늘은 반응형 웹사이트에서 자주 등장하는 개념 정리를 해 보려고 합니다.

 

반응형 웹사이트란,

 

브라우저나 기기 환경에 따라 레이아웃이 유동적으로 변하는 것을 말하지요.

 

그래서 자주 등장하는 단어가 아래 두 가지입니다.

 

Fluid Grids (유동적인 그리드)
Fluid Images (유동적인 이미지)

 

 

먼저 그리드란?

 

그리드란 우리말로 격자라고 하는데,

 

웹페이지를 수직 수평선으로 분할하는 레이아웃 요소입니다. 

 

수직, 수평선은 사용자에게 보이지 않을 수도 있습니다.

 

아래 이미지는 부트스트랩 그리드 예시임.

 

제 블로그 역시 헤더, 본문, 사이드바, 푸터 등 전형적인 레이아웃 입니다.

 

http://getbootstrap.com/examples/grid/

유동적인 그리드 

 

예전에는 그리드를 만들 때 px 같은 절대 단위를 사용했습니다

 

화면 비율에 따라 유동적인 그리드를 만들려면, 상대적인 % 값으로 바꿀 필요가 있습니다.

 

 

고정형 단위를 백분율(%)값으로 바꾸는 법은?

  

구하려는 요소의 값을 가장 큰 요소의 값(브라우저 창이나, wrapper)으로 나눔.

 

예를 들어 아래와 같은 레이아웃이 있다고 가정하면,

 

wrapper  1040 px, contents 780px, sidebar 200px, margin 60px

 

contents의 백분율을 구하려면? 1040px / 780px

 

margin의 백분율을 구하려면 ? 1040px / 60px

 

 

☞ wrapper  100%, contents 75% sidebar 19% margin 5%

 

 

 

유동적인 이미지

 

화면 크기에 따라, 이미지도 조절이 되게 하려면 위와 마찬가지로 백분율 값을 사용할 수 있습니다.

 

원래 이미지 크기를 유지하려면

 

img{max-width: 100%:}

 

라고 설정하면 됩니다.

 

다만 이미지보다 부모 요소 너비가 작을 경우, 부모 요소의 너비대로 

 

이미지가 표시됩니다. 이미지 width가 300px 인데 부모 div width가 100px 일 경우, 후자로 표시.

 

max-width: 100%을 적용하면, 높이는 자동적으로 계산되어, 원래 비율을 유지함.

 

 

 

img.html

 

 

 

크기 조절이 가능한 글꼴

 

글꼴 역시 고정형 단위인 px를 자주 사용하고 있지만, 반응형 웹사이트에서 글꼴 역시 크기 조절이 가능하게 하려면

 

상대 단위로 바꿀 필요가 있습니다.

 

대표적으로  em, rem 단위 사용법을 알아보겠습니다.

 

*em과 rem은 현재 글꼴 크기에 상대적인 값을 말함. 2em 이란 현재 글꼴 크기의 2배라는 뜻.

 

*rem은 root em의 약자로, root 요소란 html(최상위) 요소를 말함.

 

* %(백분율)은 부모에 상대적인 값. em과 비슷함.

 

css 길이 단위

 

글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)

 

 

주의할 점!

 

상대적인 단위 em과 % 값은  부모로부터 물려받은 font-size 값으로 계산합니다.

 

따라서 중첩 구조로 되어 있을 경우, 글꼴이 일관적이지 않을 수 있습니다.

 

em 단위 계산법

 

body{font-size: 62.5%;}  /* 브라우저 기본값이 16px이므로, 16 x 62.5% = 10px  */

h1{font-size: 2.4em;}  /* 10 x 2.4 = 24px  */
li{font-size: 1.6em;} /* 10 x 1.6 = 16px  */

li li{font-size: 1.6em;}  /* 16 x 1.6 = 25.6px */

 

em 단위는 부모로부터 상속받은 font-size를 참조하여 계산하므로, li 안의 li는 값이 달라지게 됨.

 

rem 단위는 html 요소의 font-size를 참조하므로, li 안의 중첩된 li도 같은 값을 가짐.

 

rem 단위 계산법

 

html{font-size: 62.5%;} 

h1 {font-size: 2.4rem;} /* 10 x 2.4 = 24px */
li{font-size: 1.6em;} /* 10 x 1.6 = 16px  */

li li{font-size: 1.6em;}  /* 10 x 1.6 = 16px */

 

em vs rem

 

첨부파일 다운받아 비교해 보세요~

 

em.html

 

rem.html

 

하지만 rem 브라우저 지원이 ie9부터 이므로, 하위 브라우저와의 호환이 필요합니다.

 

 

-이미지 출처 : http://www.w3schools.com/cssref/css_units.asp-

 

 

해결책은?

 

픽셀값으로 먼저 지정하고 rem을 지정하기.

 

rem 단위를 지원하는 브라우저는 rem을 사용하고

 

그렇지 않은 브라우저는 픽셀 값으로 계산합니다.

 

예.

 

h1
{
font-size: 32px;
font-size: 2rem;
}

 

반응형 이미지(SVG)에 대한 글도 필요한데, 아직 설명할 수준이 못 되어 나중에 추가적인 글을 써 보도록 할게요.

 

 

참조:  https://github.com/chuckcarpenter/REM-unit-polyfill

http://www.graphics.com/article-old/brief-history-grids
http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design

http://www.sitepoint.com/css3-rem-units/