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 현상