[16강] 반응형 | 반응형 웹 폰트

■ 뷰포트

반응형 웹에서는 제일 먼저 뷰포트를 설정하여야 합니다.
뷰포트(Viewport)는 컴퓨터나 스마트 폰의 브라우저 화면 크기를 말하는데, 메뉴바와 탭 영역을 제외한 영역을 의미합니다.

<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의 값을 가집니다.

em 폰트
ex1-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<style>
.title1 {  font-size: 1.25em;  }
.title2 {  font-size: 1.5em;  }
.title3 {  font-size: 1.75em;  }
</style>
</head>
<body>
<h3 class="title1">안녕하세요.</h3>
<h3 class="title2">안녕하세요.</h3>
<h3 class="title3">안녕하세요.</h3>
</body>
</html>
ex1-1.html의 실행 결과

em은 16px를 기준으로 한 상대적인 글자 크기를 나타내는 데 em이 사용된 요소의 하위 요소에서는 부모 요소의 em을 상속 받아 글자 크기가 정해집니다.

em 단위의 상속
ex1-2.html
<style>
#a {  font-size: 1em;  }
#a span {  font-size: 2em;  }
#b {  font-size: 2em;  }
#b span {  font-size: 2em;  }
</style>
<body>
<div id="a">
안녕하세요.<span>반갑습니다.</span>
</div>
<div id="b">
안녕하세요.<span>반갑습니다.</span>
</div>
</body>
ex1-2.html의 실행 결과
■ 폰트 크기 단위 : rem

rem 단위에서는 em 단위에서와 달리 상속의 개념이 존재하지 않습니다. 브라우저의 기본 크기인 16px을 1rem으로 한 상대적인 크기를 나타냅니다. 2em은 16px의 두 배인 32px, 3em은 16px의 3배인 48 px을 의미한다. 그리고 0.5em은 16px의 1/2인 8px을 나타냅니다.

rem 단위의 사용 예
ex1-3.html
<style>
#a {  font-size: 1rem;  }
#a span {  font-size: 2rem;  }
#b {  font-size: 2rem;  }
#b span {  font-size: 2rem;  }
</style>
<body>
<div id="a">
안녕하세요.<span>반갑습니다.</span>
</div>
<div id="b">
안녕하세요.<span>반갑습니다.</span>
</div>
</body>
ex1-3.html의 실행 결과
■ 박스 크기 단위 : vw/vh
  • 1vw = viewport 너비의 1% (500px 너비 => 1vw = 5px)
  • 1vh = viewport 높이의 1% (1000px 높이 => 1vh = 10px)
vw/vh 단위의 사용 예
ex1-10.html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vw / vh 예제</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }
    .box {
      width: 50vw;
      height: 50vh;
      background-color: skyblue;
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2vw;
      color: #fff;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div class="box">50vw × 50vh</div>
</body>
</html>
ex1-10.html의 실행 결과