• 고객센터
  • ★ 웹 무료강의

★ 웹 무료강의

고객센터공지사항자료실★ 웹 무료강의추천유튜브강의

모던DS 웹에이전시

웹 무료강의 | 프론트엔드 강의

CSS CSS Grid: 라인(Line)과 영역(Area) 배치 가이드

페이지 정보

profile_image
작성자 모던DS
조회 66회

본문

CSS Grid: 라인(Line)과 영역(Area) 배치 가이드


CSS 그리드는 가로와 세로를 동시에 제어하는 2차원 레이아웃 시스템입니다. 

아이템을 배치하는 방법은 크게 번호 기반의 라인 방식과 이름 기반의 영역 방식으로 나뉩니다.


1. 그리드 라인 (Grid Line) 방식

그리드 컨테이너 내부를 구분하는 가로와 세로 선의 번호를 참조하여 아이템의 위치를 지정하는 방식입니다.

  • 배치 원리: 아이템이 위치할 시작 선 번호와 끝 선 번호를 지정합니다.

  • 주요 속성: grid-column, grid-row

  • 특징: 세밀한 제어가 가능하지만, 레이아웃이 복잡해질수록 번호 계산이 어려워질 수 있습니다.


2. 그리드 템플릿 영역 (Grid Template Areas) 방식

전체 그리드 평면을 각각의 이름을 가진 구역(Area)으로 선언하고, 각 요소를 해당 이름의 구역에 할당하는 방식입니다.

  • 배치 원리

    1. 부모(Container): grid-template-areas 속성으로 전체 레이아웃의 구역 이름을 문자열로 미리 정의합니다.

    2. 자식(Item): 자신의 이름이 적힌 구역을 찾아가 해당 공간을 차지합니다.

  • 특징: 레이아웃 구조가 코드에 시각적으로 드러나 가독성이 뛰어나며 유지보수가 매우 쉽습니다.


3. 핵심 속성: grid-area

grid-area는 그리드 아이템에게 어느 구역에 위치할 것인지를 명령하는 속성입니다.

  • 이름으로 할당하는 방식: 부모가 정해놓은 영역 이름을 그대로 사용합니다. (예: grid-area: header;)

  • 라인 번호로 정의하는 방식: 이름이 없을 경우, 네 개의 라인 번호를 한 번에 적어 위치를 확정하는 단축 속성으로 쓰입니다.

  • 작성 순서: grid-area: 세로시작 / 가로시작 / 세로끝 / 가로끝;


4. 영역(Area) 배치 시 필수 규칙

  • 직사각형 원칙: 모든 영역은 반드시 가로와 세로가 직선인 직사각형이어야 합니다. ㄴ자나 T자 형태의 구역 설정은 불가능합니다.

  • 연속성: 동일한 영역 이름은 반드시 인접해 있어야 합니다. 떨어져 있는 두 곳에 같은 이름을 쓸 수 없습니다.

  • 빈 공간 처리: 영역 이름 대신 마침표(.)를 사용하면 해당 칸은 빈 공간으로 남습니다.


5. 실무 활용 및 비교

구분

그리드 라인 (Line)

그리드 영역 (Area)

제어 단위

좌표 및 경계선 번호

구역의 명칭 (이름)

코드 가독성

번호 계산 필요

배치 구조가 직관적으로 보임

반응형 대응

번호를 매번 새로 계산

이름 배치 순서만 바꾸면 완료

주요 용도

개별 요소의 세밀한 위치 조정

페이지 전체의 레이아웃 설계



요약

그리드 라인이 자를 가지고 정확한 번호로 칸을 나누는 방식이라면, 그리드 영역은 설계도에 각 방의 이름을 미리 써놓고 배치하는 방식입니다. 

현대적인 반응형 웹 설계에서는 영역 이름을 사용하는 방식이 유지보수와 협업 측면에서 유리하므로, 

전체 레이아웃은 영역으로 잡고 세부 조정은 라인을 활용하는 것이 실무적인 설계 방식입니다.


   <!DOCTYPE html>

  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid Layout</title>
    <style>    
      /* 그리드 레이아웃 지정하기  */
      .container{
        width:700px;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows:repeat(3, 100px);
        gap: 1rem;
      }
      .box{
        padding:15px;
        color:#fff;
        text-align:center;
      }  
      /* 그리드 라인을 사용해 배치하기 */
      .box1 {
        background-color:#3689ff;      
        grid-column: 1 / -1;  /* grid-column:1 / 4; */
        grid-row-start: 1;   /* grid-row: 1 / 2; */
      }
      .box2 {
        background-color:#00cf12;
        grid-row:2 / -1;  /* grid-row: 2 / 4; */        
        grid-column-start:1;   /* grid-column: 1 / 2; */
      }
      .box3 {
        background-color:#ff9019;
        grid-column:2 / -1;  /* grid-column: 2 / 4; */  
        grid-row-start: 2;   /* grid-row: 2 / 3; */
        }
      .box4 {
        background-color:#ffd000;
        grid-column-start:2;  /* grid-column: 2 / 3; */
        grid-row-start:3;  /* grid-row: 3 / 4; */
      }
      .box5 {
        background-color:#ff3f3f;
        grid-column: 3 / -1;  /* grid-column: 3 / 4; */
        grid-row: 3 / -1;  /* grid-row: 3 / 4; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
      <div class="box box4">box4</div>
      <div class="box box5">box5</div>
    </div>
  </body>
  </html>

   <!DOCTYPE html>

  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid Layout</title>
    <style>
      /* 그리드 레이아웃 지정하기 */
      .container {
        width:700px;
        display:grid;
        grid-template-rows:repeat(3, 100px);
        grid-template-areas:
          "box1 box1 box1"
          "box2 box3 box3"
          "box2 box4 box5";
        gap: 1rem;
      }

      .box{
        padding:15px;
        color:#fff;
        text-align:center;
      }  
      /* 그리드 라인을 사용해 배치하기 */
      .box1 {
        background-color:#3689ff;      
        grid-area: box1;
      }
      .box2 {
        background-color:#00cf12;
        grid-area: box2;
      }
      .box3 {
        background-color:#ff9019;
        grid-area: box3;
        }
      .box4 {
        background-color:#ffd000;
        grid-area: box4;
      }
      .box5 {
        background-color:#ff3f3f;
        grid-area: box5;
      }
     
      /* 템플릿 영역을 사용해 배치하기 */

    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
      <div class="box box4">box4</div>
      <div class="box box5">box5</div>
    </div>
  </body>
  </html>


77044a127a5c824a243bd5f24414c9f9_1772139720_2135.png