🖥️반응형 웹이란?

반응형 웹이란 하나의 템플릿(Template)로 Mobile, Tablet, PC 등 모든 기기에 대응할 수 있는 웹을 말합니다. 이는 기종별 min-width 기준으로 중단점(Breakpoints)을 설정해 반응형 웹을 구현할 수 있습니다.

Media Query

  // X-Small devices (portrait phones, less than 576px)

  // Small devices (landscape phones, 576px and up)
  @media (min-width: 576px) { ... }
  // Medium devices (tablets, 768px and up)
  @media (min-width: 768px) { ... }
  // Large devices (desktops, 992px and up)
  @media (min-width: 992px) { ... }
  // X-Large devices (large desktops, 1200px and up)
  @media (min-width: 1200px) { ... }
  // XX-Large devices (larger desktops, 1400px and up)
  @media (min-width: 1400px) { ... }

컨테이너와 반응형 작업

컨테이너는 가장 기본적인 레이아웃 요소입니다. 컨테이너로 레이아웃을 구성하면 웹페이지에서 콘텐츠를 감싸는 컨테이너가 브라우저의 크기에 따라 유동적으로 조절되면서 콘텐츠의 너비를 중단점으로 제한할 수 있게 됩니다.

Next Step

반응형 적용을 위해 중단점(Breakpoint)와 컨테이너(Contianer) 초기 작업을 한 후 각 페이지에 공통으로 들어가는 Layout을 생성해 적용시키는 과정을 소개합니다.