※CSS에서 레이아웃 페이지를 나눌 때에 주로   플렉스(Flex)와 그리드(Grid)를 많이 사용합니다.

flexbox는 한 방향 레이아웃 시스템(1차원), grid는 두 방향 레이아웃 시스템(2차원)으로 이번 시간은 그리드에 대해서 알아보려 합니다. 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨트롤 간의 관계를 정의하는 데 사용합니다.

테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. 이번 시간은 간단한 기본 구조와 속성에 대해 알아보고 다음시간에 아이템배치방법이나 축약어등을 다루어 보도록 하겠습니다.

목차

1. GRID의 기본구조

2. GRID의 속성

 

1. GRID의 기본구조

@그리드 선언

grid 레이아웃을 위한 html의 기본 구조는 container(부모)와 item(자식)으로 이루어져 있습니다.

flex와 마찬가지로 CSS에 display : grid; 를 선언 후 <body>에서 형태를 잡아야 합니다.

 

   @코드로 보기
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid; /*그리드 선언*/
            grid-template-columns: 200px 200px 200px;/*열 생성*/
            grid-template-rows: repeat(3, 100px); /*행 생성 repeat(생성개수, 크기) = 100px크기를 3개 생성*/
            background-color: #bbb;
        }
        .box:nth-child(even) {
            background-color: #eee; /*box클래스의 짝수(even) 자식들의 속성*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
</body>
</html>

 

 

 

2.  GRID의 속성

@Grid container 속성 (부모 속성)

  • grid-template-row : 행(Track)의 크기를 정의
  • grid-template-columns: 열(Track)의 크기를 정의
  • grid-template-areas : 영역 이름을 참조해 템플릿 생성
  • grid-template : grid-template-xxx의 단축 속성
  • row-gap(grid-row-gap) : 행과 행 사이의 간격(Line)을 정의
  • column-gap(grid-column-gap) : 열과 열 사이의 간격(Line)을 정의
  • gap(grid-gap) : xxx-gap의 단축 속성
  • grid : grid-template-xxx과 grid-auto-xxx의 단축 속성

@Grid item 속성 (자식 속성)

  • grid-row-start : 그리드 아이템(Item)의 행 시작 위치 지정
  • grid-row-end : 그리드 아이템의 행 끝 위치 지정
  • grid-row : grid-row-xxx의 단축 속성(행 시작/끝 위치)
  • grid-column-start : 그리드 아이템의 열 시작 위치 지정
  • grid-column-end : 그리드 아이템의 열 끝 위치 지정
  • grid-column : grid-column-xxx의 단축 속성(열 시작/끝 위치)
  • grid-area : 영역 이름을 설정하거나, grid-row와 grid-column의 단축 속성
  • align-self : 단일 그리드 아이템을 수직(열 축) 정렬
  • justify-self : 단일 그리드 아이템을 수평(행 축) 정렬
  • order : 그리드 아이템의 배치 순서를 지정
  • z-index : 그리드 아이템의 쌓이는 순서를 지정

@grid-template-xxx속성

  • grid-template-row
  • grid-template-columns
  • grid-template-areas
  • grid-template

@gap속성 : 간격조절 가능

  • row-gap(grid-row-gap) : 행과 행 사이의 간격(Line)을 정의
  • column-gap(grid-column-gap) : 열과 열 사이의 간격(Line)을 정의
  • gap(grid-gap) : xxx-gap의 단축 속성

@정렬속성 (justify-items / align-items)

  • align-content  : 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
  • justify-content : 그리드 콘텐츠를 수평(행 축) 정렬
  • align-items : 그리드 아이템(Items)들을 수직(열 축) 정렬
  • justify-items : 그리드 아이템들을 수평(행 축) 정렬

 

 

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

CSS에 자주 사용되는 속성(1)  (0) 2023.03.03
비주얼스튜디오 코드(Visual Studio Code)의 로그인 폼 만들기  (0) 2023.02.27
비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24
비주얼스튜디오 코드(Visual Studio Code)의 FONT와 TEXT  (0) 2023.02.23
비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자)  (0) 2023.02.22

+ Recent posts

티스토리툴바