출처 : http://demun.tistory.com/2212
반응형 웹디자인을 적용하려면 제일 먼저 글꼴 크기를 정해줘야 한다.
예전에 방탄웹에서는 키워드를 사용하는 방법을 말했다.
이유는 키워드는 어떤 브라우져에서 봐도 동일하나는 결론이였죠.
하지만 이제는 환경이 좀 변했습니다.
바로 반응형이죠.
브라우져의 크기, 보는 기기의 크기에 따라 웹페이지가 변해야 한다는 점입니다.
그 조건에 가장먼저 적용해야 하는 것이 바로 글꼴의 크기 입니다.
글꼴의 크기에 따라서 컨텐츠의 크기도 달라지고, 여백도 달라집니다.
즉 모든 것이 달라지기 때문에 레이아웃이 변합니다.
기존의 px 로 되어 있는 크기를 em 으로 변환해야 합니다.
그런 어떤식으로 변환해야 올바른 것일까??
특별히 다른 값을 명시하지 않는 한 모든 최신 브라우져는 디폴트 폰트 크기로 16px 를 사용합니다.
따라서 최초에 body 태그에 다음의 어떤 규칙을 적용해도 동일한 결과를 가져옵니다.
font-size: 100%; font-size: 16px; font-size: 1em;
예를들어 스타일시트에서 제일 먼저 정하는 블로그 타이틀에 대해서 살펴보겠습니다.
h1 { font-size: 69px; }
이걸 em 으로 변환하면 아래의 공식을 따릅니다.
타킷(target) ÷ 컨텍스트(context) = 결과(result)
그러니 69 ÷ 16 = 4.3125 이 됩니다. 이처럼 스타일을 변경하면 아래처럼 되겠죠.
h1 { font-size: 4.3125em; /* 69 ÷ 16 */ }
만약에 h1 하위에 span 요소가 있다고 가정합니다.
h1 span { font-size: 38px; }
그럼 변환하면 아래처럼 됩니다.
h1 span { font-size: .550724638em; /* 38 ÷ 69 */ }
span 요소의 글꼴크기(38px)가 부모 요소(69px)와 연관되어 있다는 사실을 알 수 있습니다.
왜냐면 em 은 상대적크기이기 때문입니다.
부모요소의 크기를 100% 잡고 상대적 크기를 정하기 때문입니다. 이점 놓치면 안됩니다.
또한 line-height: 도 같습니다.
이렇듯 반응형 웹디자인을 적용하려면 첫번째 글꼴 크기를 상대적 크기인 em 로 변경해야 한다.
'Development > HTML' 카테고리의 다른 글
웹표준가이드(2) / 일반문법 (0) | 2013.05.29 |
---|---|
웹표준가이드(1) / 올바른 DOCTYPE 사용 (0) | 2013.05.29 |
반응형 웹디자인의 조건 너비 width (0) | 2013.05.28 |
IE8 이하에 HTML5 적용 (0) | 2012.07.25 |
Visual Studio 2010 HTML 유효성 검사 (2) | 2012.07.09 |
댓글