CSS 시리즈 - 8부: CSS 그리드

소개

CSS 그리드 레이아웃은 개발자에게 고급 레이아웃 패턴을 디자인할 수 있는 일련의 속성 및 속성 값을 제공합니다. 이 자습서에서는 그리드 레이아웃을 시작하는 방법을 보여주고 다양한 그리드 레이아웃 속성과 해당 기능을 소개합니다.

이 시리즈의 이전 부분을 놓친 경우 다음을 방문하십시오.

전제 조건

HTML에 대한 기본적인 이해
CSS 선택자 및 속성에 대한 기본적인 이해

CSS 그리드 레이아웃 이해

CSS 그리드 레이아웃을 사용하면 웹 개발자가 구성 요소가 브라우저에서 정렬되는 방식을 사용자 정의할 수 있습니다. 아래 그림에서 예제 레이아웃을 가져옵니다.



위의 그림에는 Header, Nav, Body 및 Footer의 네 가지 주요 디자인 구성 요소가 있습니다. CSS 그리드 레이아웃을 사용하여 이 모형과 일치하도록 html 요소를 배치할 수 있습니다.

여기에서 완제품을 참조할 수 있습니다.
Codepen Grid Tutorial Example

CSS 그리드 레이아웃 시작하기
간단히 말해서 디스플레이 속성 값이 그리드로 설정된 컨테이너에 4개의 주요 디자인 구성 요소를 포함합니다. 컨테이너 CSS 선언은 다음과 같습니다.

.grid-layout-container {
    display: grid;
}

그런 다음 각 개별 디자인 구성 요소에 그리드 영역 이름을 지정합니다. 따라서 스타일 시트는 다음과 같이 표시됩니다.

.header {
    grid-area: header;
}

.nav {
    grid-area: nav;
}

.body {
    grid-area: body;
}

.footer {
    grid-area: footer;
}

grid-area 속성을 사용하여 네 가지 주요 디자인 구성 요소에 이름을 지정했습니다. 이제 "grid-layout-container"클래스를 사용하여 컨테이너 내부에서 이러한 그리드 영역을 이름으로 참조하고 조작할 수 있습니다.

여기에서 CSS 그리드 레이아웃이 강력해집니다. CSS 그리드 레이아웃과 관련된 미리 정의된 속성을 사용하여 열과 행의 수, 높이와 너비, 위치를 설정할 수 있습니다. 위의 사진에 표시된 레이아웃을 달성하는 방법은 다음과 같습니다.

.grid-layout-container {
  display: grid;
  width: 10rem;
  height: 10rem;
  grid-template-columns: 35% 6.5rem;
  grid-template-rows: 1.25fr 5.5em 1fr;
  grid-template-areas:
    "header header"
    "nav body"
    "footer footer";
}

위의 코드에서 grid-template-columns 속성에 할당된 두 개의 값이 있음을 알 수 있습니다. 이렇게 하면 할당된 너비 값으로 두 개의 열을 렌더링하도록 브라우저에 지시합니다. 이러한 너비는 분수(fr) 및 자동을 포함하여 모든 CSS 단위일 수 있습니다.

grid-template-rows 속성 값은 3개의 행을 렌더링하도록 브라우저에 지시하는 3개의 값을 나열합니다.

브라우저는 개별 디자인 구성 요소의 그리드 영역 이름을 grid-template-areas 속성에 할당할 때까지 해당 열과 행에서 무엇을 렌더링할지 알 수 없습니다. grid-template-areas 속성을 사용하여 이 작업을 수행합니다. 속성 값은 네 가지 주요 디자인 구성 요소 그리드 영역 속성 값 이름을 사용하여 미리 정의된 그리드 또는 행과 열 내에서 이러한 디자인 구성 요소 위치를 할당합니다.

그리드 레이아웃이 작동하는 방식에 대한 느낌을 얻으려면 위의 Codepen 예제를 연구하고 조작하십시오.

CSS 그리드 레이아웃은 페이지 레이아웃, 구성 요소 레이아웃, 양식 레이아웃 또는 상상할 수 있는 다른 사용 사례에 사용할 수 있습니다.

결론

위의 예는 그리드 레이아웃의 전체 기능을 다루지 않으므로 가능한 사용 사례를 발견한 후에는 직접 조사해야 합니다.