반응형 디자인

웹 페이지는 하나더라도 컴퓨터, 스마트폰, 태블릿 등 페이지를 보는 환경은 하나가 아니다. 그리고 각각의 기기는 화면 크기도 제각각이다. 이렇게 서로 다른 환경에도 화면 크기에 관계 없이 웹 페이지를 잘 보이게 하려면 반응형 디자인(responsive design)을 적용하는 것이 좋다.

상대 크기의 사용

반응형 디자인은 페이지가 보일 환경의 화면 크기를 고려하여 페이지의 내용의 크기나 위치를 조정한다. 이를 위해 값이 고정된 크기 단위인 픽셀(px)을 사용하기 보다는 상대적인 값을 제공할 수 있는 단위를 사용하는 것이 좋다.

Em, Rem

  • em은 상위 요소의 크기보다 몇배 큰지로 크기를 정한다.
  • rem은 최상위 요소(html)의 크기보다 몇배 큰지로 크기를 정한다. 'Root Em'을 줄인 것이다.
<!DOCTYPE html>
<html>
  <head>
    <title>상대 크기</title>
    <style>
      html { font-size: 16px; }

      h1.em { font-size: 2em; }

      div.em { font-size: 1.2em; }

      p.em { font-size: 0.8em; }

      h1.rem { font-size: 2rem; }

      div.rem { font-size: 1.2rem; }

      p.rem { font-size: 0.8rem; }
    </style>
  </head>
  <body>
    <h1 class="em">Em 제목 (32px)</h1>
    <div class="em">
      <p class="em">Em 본문 (15.36px)</p>
    </div>

    <h1 class="rem">Rem 제목 (32px)</h1>
    <div class="rem">
      <p class="rem">Rem 본문 (12.8px)</p>
    </div>
  </body>
</html>

위 예에서, 'Em 제목'과 'Rem 제목'의 font-size는 16 * 2 = 32px로 동일하다. 단 'Em 본문'의 font-size는 상위 요소인 div.emfont-size에 영향을 받으므로 16 * 1.2 * 0.8 = 15.36px가 된다. 'Rem 본문'의 font-size는 최상위 요소인 htmlfont-size에만 영향을 받으므로 16 * 0.8 = 12.8px 크기로 브라우저에 나타난다.

퍼센티지

텍스트가 아닌 HTML 요소들(주로 박스 모델)의 width, height, padding, border, margin 속성에는 퍼센티지를 적용할 수 있다.

퍼센티지가 적용된 widthheight는 상위 요소의 크기를 기준으로 값이 정해진다. 따라서 상위 요소의 크기가 정해져 있을 때 퍼센티지를 사용해야 의도하지 않은 크기로 브라우저에 나타나는 일을 줄일 수 있다. 예를 들어 box-sizing: border-box인 박스 모델의 width를 100%로 지정하는 경우, 박스 모델의 margin으로 인해 오버플로우가 발생할 수 있으므로, margin을 0으로 지정해 주는 것이 좋다.

paddingmargin도 퍼센티지로 크기를 지정할 수 있는데, 이때는 가로 크기와 세로 크기 모두 상위 요소의 너비(width)를 기준으로 한다. 상위 요소의 너비는 상대적으로 결정되는 편인 반면 높이는 하위 요소나 내용의 높이에 따라 변하는 일이 잦기 때문에 하위 요소의 상하 안팎 여백이 상위 요소의 높이에 기준하지 않고 너비에 따라 기준하게끔 정해진 게 아니겠느냐는 추측이 있었고, 코드카데미의 반응형 디자인 레슨에서는 이를 분명한 이유로 사용한다.

가변 크기 미디어

이미지나 동영상같은 미디어의 크기를 기기의 화면 크기를 고려하여 변하게 할 때, 미디어의 종횡비를 유지시켜야 한다.

.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}

.container img,
.container video {
  max-width: 100%;
  height: auto;
  display: block;
}

미디어 요소의 max-width를 100%로 지정하면 화면의 가로 크기에 따라 미디어의 너비가 조절되며, height: auto를 지정해 화면의 가로 크기가 변경됨에 따라 미디어의 너비가 변경될 때 미디어의 높이도 같이 변경됨으로써 미디어의 종횡비를 유지할 수 있게 된다.

미디어 요소의 상위 요소에 width를 설정하면 미디어의 너비는 상위 요소의 너비 안에서 변하게 된다. 위 코드에서는 상위 요소에 height, overflow: hidden을 설정했는데, 이 경우 미디어의 높이가 상위 요소의 높이를 초과할 경우 초과분이 사용자에게는 보이지 않을 것이다.

배경 이미지의 크기를 화면 크기에 따라 종횡비를 유지하면서 바뀌게 하고 싶을 경우, 이러한 CSS를 사용한다.

body {
  background-image: url("이미지 파일 위치");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

배경 이미지가 반복되지 않으며(background-repeat: no-repeat. 배경 이미지는 기본적으로 반복된다) 가운데에 위치하도록(background-position: center) 하는데, 여기에 background-size 속성의 값을 cover로 지정한다.

background-size에는 수치와 단위를 사용하여 값을 지정하는 것 외에도 값을 지정하는 방법이 두 가지 더 있는데, contain 혹은 cover를 값으로 사용하는 것이다. MDN에 따르면 contain으로 값을 지정하면 요소의 안에 이미지를 비율을 유지하면서 채우게 되며, cover로 값을 지정하면 이미지의 크기가 요소의 크기보다 클 경우 일부만 요소 안에 나타나게 된다. 따라서 배경으로 사용할 이미지의 종횡비가 요소의 종횡비와 다르다면 background-size: contain의 경우 이미지가 요소를 다 채우지 못하고 빈 공간을 노출시키게 된다. 한편 background-size: cover를 사용하면 이미지의 종횡비가 요소의 종횡비와 달라도 이미지의 크기가 요소의 크기보다 크다면 해당하는 부분만큼만 이미지가 보이기 때문에 빈 공간이 나타나지 않는다.

results matching ""

    No results matching ""