대망의 반응형 디자인!!!!

지금까지 작업한 포트폴리오는 완벽한 노반응형이라 반응형을 얼른 배우고 싶었는데
배우기 전의 내 눈과 귀를 다시 사고 싶다...
팀플 진행하면서 반응형을 제대로 도입해 볼 예정!

1. Responsive Design

반응형 웹 디자인(Responsive Design)이란 웹 디자인 기법 중 하나로, 하나의 웹사이트를 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.

반응형 웹디자인은 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응하게 된다.
이러한 특징을 가진 반응형 웹디자인은 하나의 소스로 구현이 가능하다.
(일반 웹디자인의 경우 PC, 태블릿, 스마트폰의 각 브라우저에 최적화시킨 소스를 개발하여 각 디바이스 별로 산출물이 생기기 때문에 제작 비용과 유지보수 비용이 추가로 발생한다.)

반응형 웹디자인을 위해서 미디어쿼리, 유동형 그리드, 반응형 레이아웃, 뷰포트 설정 등의 기법을 활용할 수 있다.

2. @media

Responsive Design을 구현하는 기법 중 하나인 미디어쿼리에 대해 살펴보자!

1) @media (미디어 쿼리)란?

미디어쿼리는 단말기 유형과 어떤 특성이나 수치에 따라 웹사이트나 앱의 스타일을 수정할 때 유용하다.
@media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있다.
@media는 최상위 코드나 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있다.

2) @media 활용하기

(1) MDN 코드

/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

(2) PC, 태블릿, 모바일 반응형 구현하기

[index.tsx]

import styled from "@emotion/styled";
import { breakPoints } from "../../src/commons/styles/media";

const Wrapper = styled.div`
  width: 1000px;
  height: 1000px;
  background-color: red;

  // 태블릿
  @media ${breakPoints.tablet} {
    width: 500px;
    height: 500px;
    background-color: green;
  }

  // 모바일
  @media ${breakPoints.mobile} {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
`;

const MWrapper = styled.div`
  display: none;

  @media ${breakPoints.mobile} {
    display: block;
    width: 30%; // 반응형 디자인에서 가로는 비율로 주기
    height: 18.75rem; // =300px
    background-color: orange;
  }
`;

export default function ResponsiveDesignPage() {
  return (
    <>
      <MWrapper>모바일에서만 필요함!</MWrapper>
      <Wrapper>상자</Wrapper>
    </>
  );
}

[media.ts]

export const breakPoints = {
  tablet: "(min-width: 768px) and (max-width: 991px)",
  mobile: "(max-width: 767px)",
};