티스토리 뷰

Html,Css/Css

css : Grid Template Areas

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 15. 14:12

html 코드

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="grid">
      <div class="header"></div>
      <div class="content"></div>
      <div class="nav"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

css 코드

 

.grid {
  display: grid;
  grid-template-columns: 100px repeat(2, 200px) 100px;
  grid-template-rows: repeat(4, 200px);
  grid-template-areas:
    "header header header header"
    "content content content nav"
    "content content content nav"
    "footer footer footer footer";
}

.header {
  background-color: aqua;
  grid-area: header;
}

.content {
  background-color: brown;
  grid-area: content;
}

.nav {
  background-color: chocolate;
  grid-area: nav;
}

.footer {
  background-color: darkgreen;
  grid-area: footer;
}

CSS 를 배우면서 가장 놀랍게 다가온 기능이였다.

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Grid_template_areas

 

Grid template areas - CSS: Cascading Style Sheets | MDN

이전 가이드에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을

developer.mozilla.org

 

 

'Html,Css > Css' 카테고리의 다른 글

css : grid-template  (0) 2021.10.18
css :Grid Rows and Columns  (0) 2021.10.18
CSS) 검색창에 아이콘, 이모티콘 넣기  (0) 2021.05.27
css)overflow 에서 scroll 스크롤바 숨기기 없애기 방법 (스크롤 동작)  (0) 2021.05.26
CSS) Pseudo Selector(의사선택자)란  (0) 2021.05.21
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함