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

반응형 웹 설계 - 그리드 뷰(Grid-View)

그리드 뷰 ?

많은 웹 페이지가 그리드 뷰 기반으로 만들어져 있습니다. 그리드 뷰란 column(열)으로 나누어져 있는 웹 페이지 뷰를 의미합니다.
웹 페이지를 설계할 때, 그리드 뷰를 사용하면 HTML 요소를 배치하는 데 매우 도움이 됩니다.
반응형 그리드 뷰는 보통 12개의 column을 가지고 있고, 100%의 width를 가지며, 브라우저 창의 크기가 재조정됨에 따라, 축소되거나 확장됩니다.

 

반응형 그리드 뷰 만들기

첫 번째로, padding 및 border 속성이 각 요소의 전체 width, height에 포함되도록 모든 HTML 요소의 box-sizing 속성을 border-box로 설정해줍니다.

const AppContainer = styled.div`
  &,
  & * {
    box-sizing: border-box;
  }
`;

저는 모든 컴포넌트를 감싸는 AppContainer라는 styled component를 선언 후, 위와 같이 작성하여 모든 요소에 box-sizing: border-box를 설정했습니다.
아래 예시는 두 개의 column을 갖는 아주 간단한 반응형 웹 페이지를 작성한 코드입니다.

// Header 컴포넌트
const HeaderContainer = styled.header`
  padding: 1rem;
  border: 1px solid red;
`;

// Menu 컴포넌트
const ListWrapper = styled.div`
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid red;
`;

// Main 컴포넌트
const Main = styled.div`
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
`;

 

두 개의 column으로 구성된 간단한 반응형 레이아웃

 

이제 12개의 column으로 구성된 반응형 그리드 뷰를 만들기 위해, 각 column의 width를 계산해줘야 합니다.
100%를 12로 나누면 8.33%이기 때문에 column 하나 당 width는 8.33%가 됩니다.

styled-components에서 props를 전달받아, 그 props를 기반으로 스타일을 지정해 줄 수 있기 때문에,
column 수를 props로 전달받은 뒤 width를 계산하여 설정해주는 코드를 작성했습니다.

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

  return <Col span={props.span}>{props.children}</Col>;
};

Row 안의 Column은 모두 float: left 속성을 가지므로 페이지의 흐름에서 벗어나, 다른 요소들은 마치 Column이 존재하지 않는 것처럼 배치될 것입니다. 이를 방지하기 위해 Row에는 흐름(flow)을 clear 하는 스타일을 추가합니다.

//Row 컴포넌트
export default props => {
  const Row = styled.div`
    &::after {
      content: "";
      clear: both;
      display: table;
    }
  `;
  return <Row>{props.children}</Row>;
};

Row, Column 컴포넌트로 다른 컴포넌트를 감싸서 원하는 만큼의 span을 props로 전달 한 뒤, 스타일을 좀 더 추가하면 아래와 같이 좀 더 깔끔한 레이아웃이 됩니다.

 

12개의 column으로 구성된 웹 페이지 레이아웃 (menu 3, main 9)

 

현재 상태에서는 브라우저 창의 크기가 일정 크기 이하로 작아지는 경우, 웹 페이지의 UI가 보기 좋지 않아 집니다.
다음 글에서 이를 media query를 사용해 이 문제를 해결하는 방법에 대해 알아보겠습니다.

 

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

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