CSS 미디어 쿼리 (반응형 페이지)

프로젝트를 배포 후 접속했을 때 모든 기능이 의도한대로 동작하게 되면 상당한 뿌듯함을 느꼈다. 추가로 컴퓨터가 아닌 iOS, Android 스마트폰에서 접속했을 때 보기 좋은 반응형 페이지를 작성하게 되면 뿌듯함이 더해졌다.

부스트캠프에서 처음 프로젝트를 수행할 때는 반응형에 대한 이해도 모자랐고 어떻게 구현해야 할 지 몰라 width와 height 속성에 vw, vh를 사용하는 식으로 반응형 페이지 구현을 시도했다. 그러던 중 미디어 쿼리에 대해 접할 수 있었고, 이 기능을 사용하면 vw, vh 속성만을 사용하는 것보다 훨씬 깔끔하게 반응형 페이지를 만들 수 있을 것 같았다.

미디어 쿼리 사용법

미디어 쿼리를 적용하는 방법은 어렵지 않다. 먼저, 데스크탑 브라우저에 적용되는 CSS 코드를 우선 작성할 것인지, 스마트폰 CSS 코드를 우선할 것인지를 정한다.

데스크탑을 우선할 경우 아래와 같이 미디어 쿼리에 max-width 조건을 넣어 CSS를 작성하면 된다.

.class-example {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .class-example {
    flex-direction: column-reverse;
    align-items: center;
  }
}

반대로 스마트폰을 우선할 경우 min-width 조건을 넣어 CSS를 작성한다.

.class-example {
  display: flex;
  justify-content: center;
  flex-direction: column-reverse;
  align-items: center;
}

@media screen and (min-width: 769px) {
  .class-example {
    flex-direction: row;
  }
}

태블릿을 위한 반응형 페이지까지 고려할 경우, 미디어 쿼리 조건에 769px ~ 1200px(width 조건은 고정 값이 아니고 상황에 따라 변경할 수 있다.)와 같은 조건을 추가하여 구현하면 된다.

스마트폰 반응형 페이지 구현 시 주의할 점

JavaScript, TypeScript에서 작성한 비즈니스 로직이 스마트폰 운영 체제 또는 브라우저에 따라 크롬 등의 PC 브라우저와 똑같이 작동하지 않을 수 있다. 그 예시 중 하나가 iOS safari 브라우저에서의 Date 객체이다.

// React 코드 예시
import { useState } from 'react';
import arrow from '../images/arrow.svg';

const App = () => {
  const [date, setDate] = useState(new Date());
  
  const changeDate = (e) => {
	let newDate = new Date(2022, 3, 13);
    setDate(newDate);
  };
  
  return (
    <div>
      <div>{`${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`}</div>
      <img src={arrow} onClick={changeDate} />
    </div>
  );
};

웹 페이지에 Date 객체를 사용하여 날짜를 표시하는 기능을 구현했는데, 데스크탑 크롬과 안드로이드 인터넷 브라우저에서는 정상 작동하였는데, iOS safari 브라우저에서는 NaN년 NaN월 NaN일 형식으로 날짜가 렌더링이 되었다. safari 브라우저는 Date 객체를 사용할 때 new Date(year, month, day, hour, min, sec) 또는 safari가 지원하는 형식으로 사용해야만 해서 let newDate = new Date(2022, 3, 13); 줄의 코드에서 invalid date 오류가 뜨게 되는 것이었다. 위와 같이 형식을 맞춰주거나 moment.js 등의 라이브러리를 사용해서 해결해야 함을 인식하고 있어야 한다.

참고 자료

[MDN] 미디어 쿼리 초보자 안내서
반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries)
safari 에서 new Date() 사용시 Invalid Date 현상