Grid Areas

사용 가능

9.1 grid-template-areas 속성

CSS Grid Layout은 이름 있는 영역 (grid areas)을 사용하여 복잡한 레이아웃을 만드는 데 큰 가능성을 제공합니다. 속성 grid-template-areas는 그리드에 사용할 수 있는 영역들을 설정할 수 있게 해주며, 요소를 쉽게 배치할 수 있게 해줘요. 이 속성은 개발자가 레이아웃을 시각적으로 조직하고 유지보수를 쉽게 할 수 있게 합니다.

grid-template-areas의 기본 개념

  1. 영역 정의:
    • 속성 grid-template-areas를 통해 그리드의 다양한 영역에 이름을 지정할 수 있어요
    • 각 영역 이름은 직사각형 셀 그룹을 나타냅니다
  2. 이름 있는 영역 사용:
    • 설정된 영역은 각 요소의 grid-area 속성을 설정하여 요소 배치에 사용할 수 있어요

grid-template-areas의 문법:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer"
}

Grid 요소 문법:

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

설명:

  • grid-template-areas의 각 줄은 그리드의 한 줄을 나타냅니다
  • 각 줄의 각 단어는 셀 또는 셀 그룹을 나타냅니다
  • 빈 셀에는 점 (.)을 사용할 수 있습니다

9.2 grid-template-areas 사용 예제

전체 구현 예제:

CSS
.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-gap: 10px;
}

.header {
  grid-area: header;
  background-color: #2ecc71;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #3498db;
  padding: 20px;
  text-align: center;
}

.main {
  grid-area: main;
  background-color: #9b59b6;
  padding: 20px;
  text-align: center;
}

.footer {
  grid-area: footer;
  background-color: #e74c3c;
  padding: 20px;
  text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Areas 예제</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="grid-container">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main Content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

코드 설명:

  • .grid-container: display: grid를 사용하여 Grid 컨테이너를 정의하고 grid-template-areas로 레이아웃을 설정합니다. 여기서 레이아웃은 세 줄로 구성되며, 첫 번째 줄은 헤더, 두 번째 줄은 사이드바와 메인 콘텐츠, 세 번째 줄은 푸터입니다
  • .header, .sidebar, .main, .footer: 다양한 그리드 영역에 대한 스타일을 정의하고 grid-template-areas에서 이름과 연결하기 위해 grid-area 속성을 사용합니다

9.3 빈 영역 관리

grid-template-areas는 빈 공간을 나타내기 위해 점 (.)을 사용하여 영역을 비워둘 수 있도록 해줍니다.

전체 구현 예제:

CSS
.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    ". main ."
    "footer footer footer";
  grid-gap: 10px;
}

.header {
  grid-area: header;
  background-color: #2ecc71;
  padding: 20px;
  text-align: center;
}

.main {
  grid-area: main;
  background-color: #9b59b6;
  padding: 20px;
  text-align: center;
}

.footer {
  grid-area: footer;
  background-color: #e74c3c;
  padding: 20px;
  text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>빈 영역 Grid Areas</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="grid-container">
      <div class="header">Header</div>
      <div class="main">Main Content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

코드 설명:

  • .grid-container: 헤더, 메인 콘텐츠, 푸터의 세 영역을 가진 Grid 컨테이너를 생성합니다. 중간 줄은 메인 콘텐츠 양쪽에 빈 영역을 포함합니다
  • .header, .main, .footer: 영역에 대한 스타일을 정의하고 grid-template-areas의 영역 이름과 연결합니다
1
과제
Frontend SELF KO,  레벨 28레슨 3
잠금
빈 영역
빈 영역
1
과제
Frontend SELF KO,  레벨 28레슨 3
잠금
Grid-area 위치 지정
Grid-area 위치 지정
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다