반응형 웹 - 3. 미디어 쿼리 (feat. React, styled-components)

반응형 웹 설계 - 미디어 쿼리(Media Queries)

미디어 쿼리란 무엇인가?

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

미디어 쿼리는 특정 조건이 true인 경우에만 CSS 속성 블록을 적용하도록 @media 규칙을 사용합니다.

아래 코드는 브라우저 창의 width가 600px 이하인 경우, body의 배경색을 lightblue로 적용하겠다는 의미를 갖습니다.

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

 

Breakpoint 추가하기

이 전 글에서 Row와 Column을 가진 웹 페이지를 작성했습니다. 브라우저 크기에 따라 화면을 보여주지만, 아주 작은 화면에서는 레이아웃이 보기 좋지 않게 됩니다.

미디어 쿼리는 이런 문제에 도움이 될 수 있습니다. 특정 부분에 breakpoint를 추가하여 각 breakpoint 마다 다른 스타일이 적용되도록 만들 수 있습니다.

미디어 쿼리를 사용하여 768px에서 breakpoint를 추가하도록 하겠습니다.

스크린 폭이 768px보다 작으면 모든 Column들의 width를 100%로 만드는 코드입니다.

const Col = styled.div`
  float: left;
  width: ${props => (props.span ? (props.span / 12) * 100 : "8.33")}%;
  padding: 1rem;

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
`;

브라우저 창의 크기에 따라 Layout이 변하는 것을 확인할 수 있습니다.
(Aside 컴포넌트와 Footer 컴포넌트를 추가하였습니다.)

 

Mobile First 설계

Mobile First는 데스크톱이나 다른 모든 기기에 대한 웹 페이지 설계 전에, 모바일을 고려한다는 의미입니다. (이는 작은 기기에서의 페이지 표시를 빠르게 만들어 줍니다.)

이를 위해 Column 컴포넌트의 스타일을 수정해야 합니다.

스크린 폭이 768px보다 작을 때 스타일을 정의하는 대신, 768px보다 클 때 스타일을 정의해서 적용되도록 합니다.

const Col = styled.div`
  float: left;
  width: 100%;
  padding: 1rem;

  @media only screen and (min-width: 768px) {
    width: ${props => (props.span ? (props.span / 12) * 100 : "8.33")}%;
  }
`;

 

또 다른 Breakpoint

다른 Breakpoint를 추가하여 데스크톱, 태블릿, 스마트폰에 따라 각각 다른 레이아웃을 보여주도록 유도할 수 있습니다.
다양한 스크린 사이즈에 대응할 수 있도록 만들겠습니다.
이제 Column 컴포넌트에서 받던 span props를 제거하고, 각 사이즈마다의 span을 props로 받아옵니다.

• 768px 이하: xs를 span으로 적용
• 992px 이하: sm을 span으로 적용
• 1200px 이하: md를 span으로 적용
• 1200px 이상: lg를 span으로 적용

//Column 컴포넌트
const calcWidthPercent = span => {
  if (!span) return;

  const width = (span / 12) * 100;
  return width;
};

const BREAK_POINT_MOBILE = 768;
const BREAK_POINT_TABLET = 992;
const BREAK_POINT_PC = 1200;

const Col = styled.div`
  float: left;
  width: ${({ xs }) => (xs ? `${calcWidthPercent(xs)}%` : `100%`)};
  padding: 1rem;

  @media only screen and (min-width: ${BREAK_POINT_MOBILE}px) {
    width: ${({ sm }) => sm && `${calcWidthPercent(sm)}%`};
  }
  @media only screen and (min-width: ${BREAK_POINT_TABLET}px) {
    width: ${({ md }) => md && `${calcWidthPercent(md)}%`};
  }
  @media only screen and (min-width: ${BREAK_POINT_PC}px) {
    width: ${({ lg }) => lg && `${calcWidthPercent(lg)}%`};
  }
`;

//App component
return (
  <AppContainer>
    <Header />
    <Row>
      <Column xs={12} sm={3} md={3} lg={3}>
        <Menu />
      </Column>
      <Column xs={12} sm={9} md={6} lg={6}>
        <Main />
      </Column>
      <Column xs={12} sm={12} md={3} lg={3}>
        <Aside />
      </Column>
      <Column xs={12} sm={12} md={12} lg={12}>
        <Footer />
      </Column>
    </Row>
  </AppContainer>
);

위 코드를 적용한 후 동작모습은 아래와 같습니다.

 

Typical Device Breakpoints

높이와 폭이 다른 수 많은 스크린과 기기가 있어 각 장치에 대해 정확한 브레이크 포인트를 만들기는 어렵습니다.
W3Schools.com에서는 이를 단순하게 하기 위해 5개의 그룹으로 나누어 제시합니다.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /* ... */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* ... */
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* ... */
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* ... */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* ... */
}

 

Orientation: Portrait(세로) / Landscape(가로)

미디어 쿼리는 브라우저의 방향에 따라 페이지의 레이아웃을 변경하는 것 또한 가능합니다.

브라우저 창의 폭이 높이보다 넓을 때만 적용되는 CSS 속성 집합을 가질 수 있으며, 이를 "Landscape" 방향이라고 합니다.

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

 

 

미디어 쿼리를 사용하면 이 글에서 시도한 레이아웃 변경 뿐만 아니라, 요소 숨기기, 폰트 크기 변경 등 스타일 관련 모든 동작이 가능합니다.

CSS @media Rule에 대해 더 자세히 알고싶다면 W3Schools @media를 참고하시면 좋을 것 같습니다.

 

반응형 웹 - 1. 뷰포트 (feat. React, styled-components)

반응형 웹 - 2. 그리드 뷰 (feat. React, styled-components)

 

마무리

예전부터 반응형 웹에 대해 생각하면 마치 정답이 없는 문제인 것처럼 답답한 느낌이었는데

이번에 반응형 웹에 대해 알아보고, 직접 실습을 진행해보면서 개념과 구현하는 방법에 대해 친숙해졌습니다.

많은 분들에게 도움이 되었으면 좋겠습니다.

 

 

끝까지 읽어주셔서 감사합니다.