반응형 디자인

세상에는 다양한 모니터들이 있다.

보편적으로는 16:9 FHD인 1920x1080, QHD, 4K들도 있다.

16:9뿐만 아니라 컴덕들은 21:9 32:9까지사용하기도 한다.

그리고 모니터가 아니라 태블릿, 스마트폰으로도 웹을 보기도 한다.

각 화면마다 사이즈가 다른데, 픽셀을 고정해서 디자인하면 어떻게 될까?

이런식으로 몇 글자는 삐져나오고 못생긴 디자인이 될 것이다.

이를 해결하기 위해 화면의 크기마다 css 속성을 다르게 주어 표시할 수 있는 기능이 있다.

바로 미디어 쿼리이다. 이를 사용하는 방법을 알아보자.

미디어 쿼리

body {
  background-color: black;
}

위 코드는 body를 검정색으로 하는 것이다.

항상 화면의 크기에 관계없이 검정색으로 표시된다.

하지만 아래의 코드를 추가한다.

/* 600px 이하의 너비에서만 적용되는 스타일 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

화면을 줄이고 늘리고를 반복하면 어느순간 검정색과 하늘색을 왔다갔다할 때가 있을 것이다.

바로 그 경계선은 max-width: 600px에 의해 이루어진 결과이다.

위의 예시를 통해 우리는 알 수 있다. 화면의 가로너비를 기준으로 css 스타일을 다르게 지정할 수 있다는 것을.

이제 이를 적용하는 예시를 알아보자.

화면의 너비마다 다른 크기로 표시하기

@media screen and (max-width: 600px) {
  body {
  	font-size: 7px;
  }
}

@media screen and (min-width: 600px) and (max-width: 1000px) {
  body {
  	font-size: 9px;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1440px) {
  body {
  	font-size: 12px;
  }
}

@media screen and (min-width: 1440px) {
  body {
  	font-size: 16px;
  }
}

각 경계값을 나누어 폰트의 크기를 조정해서 보여주도록 할 수 있다.

이는 font-size에만 국한되는 것이 아니라, border, padding, margin 등등 모든 px을 사용하는 곳에서 하나하나 조정할 수가 있다.

그런데 하나의 문제점이 발생한다.

아니 그러면... 하나의 클래스를 위해 기껏 열심히 6~7줄이 되는 스타일 코드를 만들었는데 이거를 4~5배 가량 복붙해서 다시 하나하나 리사이징 해야돼?

이를 해결하는 방법 또한 존재한다.

바로 rem이다.

rem

css에서는 em이라는 것이 존재한다.

부모 태그의 font-size와의 몇배의 크기인지를 나타내는 것이다.

<parent>
  <child>
    hello
  </child>
</parent>

이렇게 있고 css 코드는 아래와 같다고 하자.

parent {
	font-size: 16px;
}

child {
font-size: 1em;
}

부모 태그는 16px이므로 child는 부모의 딱 1배인 16px이 된다.

만약 2px이라면 32px로 2배수가 될 것이다.

그런데 이렇게 부모와 자식의 배수관계로 하면 dom 특성상 수많은 깊이의 트리구조로 이루어져 있는데, em을 계속 엮고 엮고 섞이면 헷갈리게 된다.

그래서 절대적인 최상위 root의 font-size와의 배수 관계를 나타내는 rem이 존재한다.

:root {
  font-size: 16px;
}

참고로 css에서 :root와 html은 같은말로 봐도 무방하다.

그리고 루트의 font-size는 16px이 기본값이다. 사실 위 코드는 없으나 마나인 코드.

아무튼, 저 :root의 font-size 와의 배수관계를 나타내는 것이 rem이다.

그래서 parent는 16px로 하고싶고 child를 12px로 하고 싶다면,

root가 16px이므로 parent = 16px = 1rem, child = 12px = 0.75rem으로 대응할 수 있다.

루트에서의 미디어 쿼리 적용

중복방지를 위해 root에서의 폰트 크기를 조절하면 된다.

@media screen and (max-width: 768px) {
  :root {
    font-size: 10px;
  }
}

@media  screen and (min-width: 768px) and( max-width: 1024px) { 
  :root {
    font-size: 12px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1440px) {
  :root {
    font-size: 14px;
  }
}

@media screen and (min-width: 1440px) {
  :root {
    font-size: 16px;
  }
}

위와 같은 방법으로 root의 폰트 크기를 화면 크기마다 조정한다.

그리고 나머지 모든 css 스타일코드에서는 미디어 쿼리없이 rem을 사용해서 크기를 지정한다.

이 방법을 통해 코드의 중복성을 최소화 할 수 있으며, 보다 쉽게 반응형 디자인에 가까워질 수 있을 것이다.