이름이 지정된 영역

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 33번째.

라인 번호를 사용하여 아이템을 배치하는 대신, grid-template-areas 속성을 사용하여 그리드의 각 부분에 이름을 지정할 수 있습니다. 이 방법은 깔끔하고 가독성 좋은 레이아웃을 만드는 데 유용하며, 특히 헤더, 사이드바, 푸터와 같은 여러 섹션을 다룰 때 더욱 효과적입니다. 아래 예시를 확인해 보세요:

CSS Grid를 사용하여 컨테이너를 정의하고 grid-template-areas를 사용하여 이름이 지정된 레이아웃을 만듭니다:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

텍스트의 각 줄은 행이 되고, 줄의 각 단어는 그리드의 일부가 됩니다. 단어를 반복하면 해당 영역이 더 넓은 공간으로 확장됩니다.

그런 다음, 다음과 같이 HTML 요소를 해당 이름에 일치시킵니다:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

아래 그림과 같이 다음과 같은 영역을 가진 기본 웹페이지용 CSS 그리드 레이아웃을 만드세요:

.container 선택자에 다음 속성들을 설정하세요:

display를 grid로
grid-template-columns를 1fr 3fr로
grid-template-rows를 auto 1fr auto로
grid-template-areas를 다음과 같이 설정하세요:
"header header"
"profile main"
"footer footer"

각 요소를 해당 영역에 할당하세요. 예를 들어, .header의 경우 grid-area를 header로 설정합니다.

치트 시트

grid-template-areas를 사용하여 이름이 지정된 그리드 레이아웃을 만듭니다:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

텍스트의 각 줄은 행을 만들고, 줄의 각 단어는 그리드의 일부가 됩니다. 단어를 반복하면 해당 영역이 더 넓은 공간으로 확장됩니다.

grid-area를 사용하여 요소를 그리드 영역에 할당합니다:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.