[웹 최적화] 미디어쿼리 최소화 하기

... 들어가며

현대에서 웹 서핑을 할 때 사용하는 도구는 모두 제 각각이다.
누구는 휴대폰, 누구는 태블릿, 누구는 노트북을 사용한다.

문제는 기기마다 띄워야 하는 웹 페이지의 해상도, 즉 ViewPort가 모두 다른데 웹페이지 하나를 띄우기 위해서 Html1, Html2, Html3 다수의 파일을 만들자니 너무 비효율적이었고 이 때문에 나온 것이 바로 "반응형 웹페이지"이다.

 

반응형 웹

반응형 웹이란 뷰포트의 크기에 따라 서로 다른 레이아웃으로 보여지는 것을 의미한다.
핸드폰, 태블릿, 노트북 등 다양한 기기의 화면 크기에 따라 웹 사이트가 자동으로 조정되어 해당 기기에서 최적화된 레이아웃을 보여주는 것이다.

이 반응형 웹을 만들 때 자주 사용하는 기법이 바로 미디어 쿼리이다.

 

🤔 미디어 쿼리 그게 뭔데??

미디어 쿼리는 CSS3 명세에서 처음으로 등장한 기능으로, CSS3 이전에는 각 기기별로 별개의 웹사이트를 제작하는 경우가 많았으나, 해당 기능으로 인해 사용자의 화면 크기, 해상도, 방향 등을 감지하여 stylesheet를 동적으로 변경할 수 있게 해주는 하나의 코드 기법이다.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

하지만 이러한 미디어 쿼리도 너무 자주 사용하게 될 경우 브라우저에게 부담이 될 수 있는데 이유는 미디어 쿼리의 로드시기가 브라우저가 렌더링을 모두 마친 후이기 때문에 혹여나 지연이 될 경우 해당 웹 사이트의 사용자 경험이 현저히 저하될 수 있다.

사용자 경험이 저하된다라.. 말로만 들었는데 벌써 위험한 느낌이 든다!
고로 우리는 위에 문제점을 해결할 수 있는 다른 대안들을 반드시 알아야 한다.

 

🔥 미디어쿼리를 최소화해보자

1. 상대 길이 단위 사용하기
CSS의 상대길이를 기준하는 단위를 사용하면 반응형 웹 제작시 굳이 media-query를 사용할 필요가 없어진다. 대표적 가변 단위로는 rem, em, vh, vw가 존재한다.

rem : 최상위 엘리먼트(html)의 폰트 사이즈를 기준한다. html의 font-size가 10px라 가정한다면 2rem은 20px이다.
em : 부모 요소의 폰트 사이즈를 기준한다.
vh : viewport-height의 약자이다. 1vh는 뷰 포트 최대 높이의 1%를 의미한다.
vw : viewport-weight의 약자이다.1vw는 뷰포트 최대 너비의 1%를 의미한다.

 

2.Grid의 경우 화면 크기에 따라 레이아웃이 자동으로 조정이 되기 때문에 불필요한 미디어쿼리를 줄이는데 효과적이다. Flexbox 또한 마찬가지인데 이 경우에는 각 요소에 direction이 잘 맞는지 확인해주어야 한다.

 

3.미디어쿼리 그룹화

미디워쿼리를 기기별로 하나씩 지정해주기보다 그룹화 시켜 한번에 작성하자.
아래는 코드 예시이다.

@media (min-width : 765px) and (max-width:1024px){/*스타일지정*/}