CSS - 3(grid)

이해용·2022년 3월 24일

grid 란?

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

grid의 뜻은 격자이며 간단하게 말해 css에서는 페이지를 정리하는데 사용합니다.

페이지를 정리하기 위해 grid를 사용하며 사용하는 tag는 div 입니다.

div tag

div tag란?
division 의 약자로 레이아웃을 나눌 때 사용합니다.

grid-template-columns - grid 속성의 가로 부분을 조정 할 수 있습니다.
grid-template-rows - grid 속성의 세로 부분을 조정 할 수 있습니다.

코드

  <style>
  #grid {
    border: 5px solid pink;
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  div {
    border: 5px solid gray;
  }
  </style>
<body>
  <div id="grid">
    <div>NAVIGATION</div>
    <div>ARTICLE</div>
  </div>
</body>

결과

fr 단위 - fraction(분수) unit. 1fr is for 1 part of the available space.

grid 사용하기

중복되는 내용을 제거 합니다.
필요한 부분에 id 값을 지정해주고 id에 css속성을 넣어줍니다.
(#grid, #grid ol, #grid #article)

코드

  <style>
    body {
      margin: 0;
    }
    a {
      color:black;      
      text-decoration: none;
    }    
    h1 {      
      font-size: 45px;
      text-align: center;      
      border-bottom: 1px solid gray;
      margin: 0;
      padding: 20px;
    }
    ol {
      border-right: 1px solid gray;
      width: 100px;
      margin: 0;
      padding: 20px;      
    }  
    #grid {
      display: grid;
      grid-template-columns: 150px 1fr;
    }  
    #grid ol {
      padding-left: 33px;
    }
    #grid #article {
      padding-left: 25px;
    }
  </style>  
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html" class="saw">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>  
  <div id="article">
  <h2>CSS</h2>
  (...생략)
</div>