@media, 반응형 디자인(Responsive Design)

 사이트는 크게 반응형 사이트, 적응형 사이트 두 가지로 나뉜다.

요즘 트렌드는 반응형이다. 배달의 민족, 오늘의집, 직방(정말 조아하시는. ), 코드캠프 등이 있다. 

적응형 사이트의 대표적인 예는 네이버, 다음, 쿠팡, 페이스북, 옥션, 크몽 등이 있다.

화면에서 보여줘야할 내용이 너무 많으면 반응형으로 만드는 것도 힘들고 UX 좋지 않다. 

 

 무조건 반응형으로 만들어야 한다는 건 잘못된 생각이고, 들어가야 할 곳과 아닌 곳을 구분해서 디자인 한다.

웹을 기획하는 단계에서 반응형 기획과 디자인이 같이 들어가야 한다!

 

 반응형 웹을 만들기 위해서는 화면 구간을 나눠줘야 한다. 

보통 모바일 크기일 때, 태블릿 크기일 때, pc크기일 때로 나눈다. 이런 나뉘는 포인트를 breakPoint 라고 한다!

화면을 전환하는건 @media 라는 css 속성을 이용한다.

 

밑은 부트스트랩에서 제공하는 breakPoint다.

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

  @media (min-width: 768px) and (max-width: 991px) {
    width: 500px;
    height: 500px;
    background-color: #fbe6a8;
  } // 여기오면 아래꺼가 위에꺼 덮어쓰는 식

  @media (max-width: 768px) {
    width: 100px;
    height: 100px;
    background-color: #ffc5c4;
    display: none;
  }
`;

 

기본은 1000px, 1000px 이다가 768px~991px에 들어가면 아래꺼가 위에 속성을 덮어쓰는 식으로 변화가 일어난다.

 

🌺 breakPoint는 나중에 유지보수하기 쉽게 파일을 따로 빼서 사용한다. 

 

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

const Wrapper = styled.div`
  width: 62.5rem;
  height: 62.5rem;
  background-color: #a7cfc9;

  @media ${breakPoints.tablet} {
    width: 500px;
    height: 500px;
    background-color: #fbe6a8;
  } // 여기오면 아래꺼가 위에꺼 덮어쓰는 식

  @media ${breakPoints.mobile} {
    width: 100px;
    height: 100px;
    background-color: #ffc5c4;
    display: none;
  }
`;

const MWrapper = styled.button`
  display: none;

  @media ${breakPoints.mobile} {
    width: 300px;
    height: 100px;
    background-color: skyblue;
    display: block;
  }
`;
export default function ResponsiveDesignPage() {
  return (
    <div>
      <MWrapper>!~~모바일에서만 필요한 컴포넌트~~!</MWrapper>
      <Wrapper>상자</Wrapper>
    </div>
  );
}

media 폴더에 breakPoints 모아놓고, 그걸 import해서 쓴다! 

 

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