반응형 웹디자인의 조건 글꼴 크기

반응형 웹디자인을 적용하려면 제일 먼저 글꼴 크기를 정해줘야 한다.

예전에 방탄웹에서는 키워드를 사용하는 방법을 말했다.

이유는 키워드는 어떤 브라우져에서 봐도 동일하나는 결론이였죠.

하지만 이제는 환경이 좀 변했습니다.

바로 반응형이죠.

브라우져의 크기, 보는 기기의 크기에 따라 웹페이지가 변해야 한다는 점입니다.

그 조건에 가장먼저 적용해야 하는 것이 바로 글꼴의 크기 입니다.

글꼴의 크기에 따라서 컨텐츠의 크기도 달라지고, 여백도 달라집니다.

즉 모든 것이 달라지기 때문에 레이아웃이 변합니다.

기존의 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 로 변경해야 한다.

demun(대문블로그)