Responsive Design

웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자는 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다.

@media

미디어 쿼리는 CSS3에서 도입된 CSS 기술입니다.

@media특정 조건이 참인 경우에만 규칙을 사용하여 CSS 속성 블록을 포함합니다.

/* 브라우저 창이 600px 이하이면 배경색이 연한 파란색이 됩니다.*/

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

대부분 모바일(768px), 태블릿(992px),pc(1920px) 로 중단점을 나눠서 작업하게 됩니다.

@media (min-width: 768px) and (max-width: 991px) {
  body {
    /*tablet Size*/
  }
}

이런식으로 768px ~ 992px 안에서만 작업도 가능합니다.

• min-width: 최소한의 크기
• max-width: 최대 크기

찾아보니 많은 글들이 mobileFirst라고 해서 제일 작은 UI부터 시작해서 만들으라는 글들이 많더라구요 저는 매번 pc부터 작업하고 태블릿...모바일로 작업을 했어서 아직 익숙치가 않습니다!!

next.js에서도 반응형을 같이 하고 있는데
common.js 를 만든 후

export const styleSet = {
  colors: {
    white: "#fff",
    black: "#000",
    darkgray: "#777",
    gray: "#ccc",
    red: "#ff4d4f",
    tp: "transparent",
    lightGray: "#eee",
    primary: "#f46a22",
    subcolor1: "#FF772E",
    aftercolor: "#de5107",
    point1: "#009C96",
    point2: "#13E8E0",
  },
  font: {
    L: "NanumSquareRoundL",
    B: "NanumSquareRoundB",
    EB: "NanumSquareRoundEB",
  },
  fontSize: {
    s1: "3rem",
    s2: "2.5rem",
    s3: "2rem",
    s4: "1.8rem",
    s5: "1.6rem",
    s6: "1.4rem",
    s7: "1.2rem",
    s8: "1rem",
    s9: "0.9rem",
    s10: "0.8rem",
  },
  breakePoints: {
    mobile: "(max-width: 767px)",
  },
};

이런식으로 쓰게 될 color,font-weigth or font-family, font-size와 함께 breackPoints 라고 mobile @media
를 넣었는데요 이렇게 사용하게 될 경우 css파일에서 styleSet을 불러와 사용만 하면 됩니다.

아래처럼 사용하게 될 경우 어떤것이 변경되더라도 styleSet 파일에서 변경만하면 전역적으로 변경이되니 편합니다!

export const H1 = styled.h1`
  font-size: ${styleSet.fontSize.s1};
  font-family: ${styleSet.font.B};
  text-align: center;
  padding-block: 50px;

  @media ${styleSet.breakePoints.mobile} {
    padding-block: 10px;
    text-align: left;
  }
`;

저는 위에처럼 컴포넌트 하나하나 media를 주었지만
다른 방법도 있다면 댓글로 알려주세요!!