이름이 지정된 영역

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

행 번호를 사용하여 항목을 배치하는 대신, grid-template-areas 속성을 사용하여 grid의 영역에 이름을 지정할 수 있습니다. 이 방법은 특히 headers, sidebars, footers와 같은 여러 섹션을 작업할 때 깔끔하고 읽기 쉬운 레이아웃을 만드는 데 유용합니다. 아래 예제를 확인해 보세요:

CSS Grid로 container를 정의하고 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가 더 넓은 공간에 걸쳐 확장됩니다.

그런 다음 다음과 같이 HTML 요소를 해당 이름에 맞춥니다:

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

챌린지

쉬움

아래 그림과 같은 다음 영역을 포함하는 기본 웹페이지용 CSS grid 레이아웃을 만드세요:

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

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

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

직접 해보기

<!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>