6-2. 반응형 웹 폰트
■ 뷰포트
반응형 웹에서는 제일 먼저 뷰포트를 설정하여야 합니다.
<meta name="viewport" content="width=device-width, inital-scale=1.0">
'width=device-width'는 웹 페이지의 너비를 접속 기기의 뷰포트 너비와 일치시켜서 화면에 표시하라고 웹 브라우저에게 알려주는 것입니다.
■ 폰트 크기 단위 : em
em 단위에서는 영문자 M의 너비를 1em으로 계산하여 이에 대한 상대적인 크기로 글자 크기를 표현합니다.
1em은 픽셀 값으로 변환하면 16px이 된다. 2em은 16px x 2 = 32px이 된다. 또한 0.5 em은 8px의 값을 가집니다.
< !DOCTYPE html>
< html>
< head>
< meta charset=" utf-8" >
< meta name=" viewport" content=" width=device-width, inital-scale=1.0" >
< style>
{ font-size: 1.25em; }
{ font-size: 1.5em; }
{ font-size: 1.75em; }
< /style>
< /head>
< body>
< h3 class=" title1" > 안녕하세요.< /h3>
< h3 class=" title2" > 안녕하세요.< /h3>
< h3 class=" title3" > 안녕하세요.< /h3>
< /body>
< /html>
ex6-1.html의 실행 결과
새 창에서 보기
em은 16px를 기준으로 한 상대적인 글자 크기를 나타내는 데
em이 사용된 요소의 하위 요소에서는 부모 요소의 em을 상속 받아 글자 크기가 정해집니다.
< style>
{ font-size: 1em; }
{ font-size: 2em; }
{ font-size: 2em; }
{ font-size: 2em; }
< /style>
< body>
< div id=" a" >
< span> 반갑습니다.< /span>
< /div>
< div id=" b" >
< span> 반갑습니다.< /span>
< /div>
< /body>
ex6-2.html의 실행 결과
새 창에서 보기
■ 폰트 크기 단위 : rem
rem 단위에서는 em 단위에서와 달리 상속의 개념이 존재하지 않습니다. 브라우저의 기본 크기인 16px을 1rem으로
한 상대적인 크기를 나타냅니다. 2em은 16px의 두 배인
32px, 3em은 16px의 3배인 48 px을 의미한다. 그리고 0.5em은 16px의 1/2인 8px을 나타냅니다.
< style>
{ font-size: 1rem; }
{ font-size: 2rem; }
{ font-size: 2rem; }
{ font-size: 2rem; }
< /style>
< body>
< div id=" a" >
< span> 반갑습니다.< /span>
< /div>
< div id=" b" >
< span> 반갑습니다.< /span>
< /div>
< /body>
ex6-3.html의 실행 결과
새 창에서 보기
