[반응형 웹] 미디어 쿼리 적용하기

지난번 포스팅에서는 가변 그리드/마진/패딩을 적용해서 화면의 크기에 따라서 가변적으로 컴포넌트의 크기가 변하도록 하는 작업을 진행하였다. 컴포넌트 간 포함 관계를 이용해서 % 단위로 길이를 계산하고 이를 통해 크기를 가변적으로 만들 수 있었다.

[반응형 웹] 가변 그리드, 마진, 패딩 적용하기

 

이번 포스팅에서는 미디어 쿼리(Media Query)를 사용한 적용기를 기록해보려고 한다.

 

미디어 쿼리(Media Query)

들어가기 전에 미디어 쿼리가 무엇인지에 대해서 공부한 내용을 정리해보려고 한다.

쿼리의 한국어 뜻은 "질의"이다. 물어본다는 뜻이다. 미디어 쿼리는 브라우저의 화면에 대해서 질문을 던지고 답을 받아온다. 답에는 여러 정보가 포함되어 있다. 화면이 표시되고 있는 미디어의 종류가 어떤 것인지, 미디어의 너비는 어떠한지, 미디어의 최소/최대 너비에 해당하는지 등등 작성하는 질의에 해당하는 답을 돌려준다. 원하는 조건에 대한 질의를 던지고, 이에 대한 답을 활용하여 원하는 화면 구성에 사용할 수 있다.

 

/* mediaQuery.css */
@media (미디어의 종류) (조건, and/,) (조건문) {
	실행 구문, css 코드
}

 

미디어 쿼리임을 알리기 위해 `@media`가 가장 앞에 붙는다. 이후에 오는 부분에는 어떤 미디어의 종류인지 지정하는 `미디어의 종류`(미디어 종류를 지정하지 않을 경우에는 모든 미디어에 해당하는 `all`이 기본 값으로 설정된다.), 여러 조건을 적용할 경우 사용할 수 있는 `조건 구분자(and와 ,_콤마)`, 그리고 쿼리에 대한 `조건문`으로 이루어져 있다. 중괄호 내에는 조건에 맞을 때 적용할 스타일 코드(css)가 들어간다.

미디어 쿼리 적용하기

마찬가지로 클론 코딩에 참고한 사이트는 원티드이다.

 

(위) 일반적인 GNB (아래) 화면이 작을 때의 GNB

 

그림의 위는 화면의 크기가 클 때의 화면이고, 아래는 화면이 작아졌을 때의 화면이다. 그림에서 확인할 수 있듯이 화면 크기에 따라서 표시되는 정보가 다르다. 로고 부분을 살펴보면 화면이 클 때는 wanted라는 로고가 표시되고 화면이 작을 때는 홈이 표시된다.

 

우선, 로고를 만들 컴포넌트를 작성한다. 컴포넌트에는 화면이 클 때 표시할 로고와 화면이 작을 때 표시할 홈이 기록되어 있다.

 

로고와 홈이 위치한 컴포넌트

 

작성하고 나면 화면에는 위 그림과 같이 표시된다. 이제 미디어 쿼리를 사용하여 화면의 크기에 따라서 표시하는 정보를 다르게 만들면 된다. 우선, 화면을 나누는 기준을 정하였다. 650px를 기준으로 큰 화면과 작은 화면을 나누었다. 650px 이상의 큰 화면에서는 Wanthing이라는 로고가 표시될 것이고, 650px 미만의 작은 화면에서는 홈이 표시될 것이다. 큰 화면에 표시될 Wanthing에는 desktop이라는 클래스 이름을, 작은 화면에 표시될 홈에는 mobile 클래스 이름을 지정해주었다.

 

미디어 쿼리 코드 작성

 

그림과 같이 미디어 쿼리 코드를 작성해주었다. 큰 화면에 해당하는 조건은 최소 너비(min-width)가 650px 일 때, 작은 화면에 해당하는 조건은 최대 너비(max-width가 649px 일 때이다. 각각의 경우 숨겨야 하는 요소의 display 속성에 none 값을 할당한다.

화면의 크기가 650px 이상인 경우에는 `@media (min-width: 650px)` 조건에 해당하는 스타일 코드가 적용되고 그렇지 않은 경우에는 다른 미디어 쿼리에 해당하는 스타일 코드가 적용된다.

 

변경된 화면

 

미디어 쿼리를 적용하고 나면 다음과 같이 페이지가 변경된다. 큰 화면에서는 홈이 사라졌고, 작은 화면에서는 Wanthing이 사라졌다.

정리

이처럼 미디어 쿼리는 페이지가 렌더링 될 화면에 대해서 질의를 던지고 해당 질의에 대한 답을 개발자가 사용할 수 있도록 해주는 구문이다. 여러 조건을 활용하여 다양한 크기에 대응하는 반응형 웹을 만들 수 있다.

 

추가적으로 이에 대해서 검색을 하던 도중 미디어 쿼리를 리액트 코드 내에서 사용할 수 있도록 해주는 `React-responsive`를 발견하였다. 요즘의 트렌드인지 styled-component도 그렇고 css 파일을 별도로 작성하지 않고 js 또는 tsx 파일 내에서 스타일까지 모두 지정하도록 코드를 작성하는 경우를 많이 찾을 수 있었다.