쇼핑몰을 주제로 토이 프로젝트를 진행하면서 이번에는 모바일 기기에서도 자연스럽게 렌더링 되게끔 하는 것을 목표로 했다. 이번 프로젝트에서는 Emotion 라이브러리를 활용해 컴포넌트 스타일링을 하고 있었고, 일반적인 미디어 쿼리를 사용하는 방법과 동일했다.
미디어 쿼리를 프로젝트에 사용해 본 것은 처음이었는데 프로젝트 시작 전에는 많은 코드들이 추가될 것이라고 생각했다. 하지만 미디어 쿼리를 사용하는 것이 전체적인 큰 틀에 사용되기 때문에 생각보다 많은 코드가 추가되지는 않았다.
이렇게 프로젝트에 적용한 미디어 쿼리 코드들과 결과물을 기록해보려 한다.
1. CSS Media Query
CSS Media Query는 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 있는 방법을 제공해준다. 즉, 각기 다른 뷰포트를 가진 장치에서 다른 스타일링을 적용하는 데 사용하며, 이를 통해 반응형 웹을 구현할 수 있다.
* 출저 : MDN 공식문서 (https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries)
미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN
CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형
developer.mozilla.org
2. 코드
export const PageContainer = styled.section`
position: relative;
width: 100%;
margin-top: 30px;
padding: 20px 120px;
@media (max-width: 760px) {
padding: 10px 20px 20px 20px;
}
`;break point가 되는 가로 760px 이하의 화면에서는 미디어 쿼리 내에 작성된 스타일 코드들이 적용되는 것이다. 이런 코드들로 페이지들에 공통적으로 적용되는 컴포넌트들에 미디어 쿼리를 적용해주어 반응형 웹 사이트로 구현해볼 수 있었다.
나는 데스크탑을 우선하는 웹사이트 였기 때문에 max-width 를 사용했고, 그 반대의 경우라면 min-width가 사용될 것이다.
3. 결과물
4. 후기
처음으로 미디어 쿼리를 사용해보면서 프로젝트 전체에 적용시켜 보았는데, 모바일에서 실행한 결과가 보기에 불편하지는 않은 것 같아 다행이었다. 매 프로젝트마다 스타일링 방법을 바꿔서 공부해보고 있다.
이전에 Tailwind css 프레임워크를 사용해 반응형 웹을 구현했을 때는 더 간소한 코드로 구현할 수 있었지만, 코드가 좀 지저분해지는 느낌이 있었다.
Emotion에서는 코드가 깔끔하게 정리되면서, 미디어 쿼리를 일반적인 사용법과 동일하게 사용할 수 있어서 좋았다.
