생각 작업실 The atelier of thinking

17. <CSS> 그리드 레이아웃 (Grid Layout) 본문

웹(Web) 이야기

17. <CSS> 그리드 레이아웃 (Grid Layout)

knowledge-seeker 2024. 2. 22. 22:11

웹페이지를 만드는 여러가지 목적이 있겠지만, 효율적인 정보 전달은 가장 큰 목적 중에 하나일 것입니다. 이러한 정보 전달을 위해 필요한 작업 중에 하나가 레이아웃 입니다. layout의 사전적 의미는 구성, 배치 등으로 해석할 수 있습니다. 웹페이지를 잘 구성하고 배치하게 되면 내용을 전달하는 데 훨씬 효과가 커질 것입니다.

앞서 시맨틱 태그와display, float 등을 이용하여 레이아웃을 작성해봤습니다.
이번 회차에는 웹페이지를 위한 강력한 레이아웃 시스템을 제공하는 기술인 CSS Grid Layout에 대하여 알아보겠습니다.
이를 사용하면 복잡한 레이아웃을 효과적으로 구성할 수 있으며, 행과 열의 구조를 통해 요소를 배치할 수 있습니다.

 

1. HTML 구문

grid layout 이란 큰 틀 안에 box 6개를 만들어 어떻게 배치하는지 알아보겠습니다.


HTML 구문은 아래와 같이 만들어봤습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid layout</title>    
</head>
<body>

    <div class="gridlayout">
        <div class="box box1"> box 1</div>
        <div class="box box2"> box 2</div>
        <div class="box box3"> box 3</div>
        <div class="box box4"> box 4</div>
        <div class="box box5"> box 5</div>
        <div class="box box6"> box 6</div>
    </div>
    
</body>
</html>

 

2. CSS 구문

 

(1) display : grid

display는 요소를 어떻게 표시할지를 지정합니다.
grid 값은 그리드 컨테이너를 만듭니다. 이 속성을 적용한 요소는 그 내부의 자식 요소들을 그리드 아이템으로 만듭니다.

 

 <style>
  .box {
         height: 40px;
         text-align: center;
         margin-bottom: 5px;
        }
  .gridlayout {
        display: grid;
        }
  .box1 {
         background-color: orange;
        }
  .box2 {
        background-color: maroon;
        }
  .box3 {
        background-color: goldenrod;
       }
  .box4 {
       background-color: blue;
        }
  .box5 {
         background-color: blueviolet;
        }
  .box6 {
         background-color: greenyellow;
        }
 </style>

 

 

(2) grid-template-columns

열의 크기 및 구조를 정의합니다. 각 속성은 크기를 나타내는 키워드(auto, 1fr 등)나 길이 단위(px, % 등)를 사용할 수 있습니다.

 .gridlayout {
            display: grid;
            grid-template-columns: 100px 500px 100px;
        }

 

 .gridlayout {
            display: grid;
            grid-template-columns:1fr 3fr 1fr;
        }

 

(3) grid-template-rows

행의 크기 및 구조를 정의합니다. 각 속성은 크기를 나타내는 키워드(auto, 1fr 등)나 길이 단위(px, % 등)를 사용할 수 있습니다.

grid-gap
그리드 아이템 간의 간격을 설정합니다. grid-row-gap 및 grid-column-gap으로 행과 열의 간격을 따로 설정할 수도 있습니다.

.gridlayout {
            display: grid;
            grid-template-columns:1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-gap : 5px;            
        }

 

display : grid, grid-template-columns, grid-template-rows 등으로 기본적인 그리드 레이아웃을 구성할 수 있습니다.

Grid 레이아웃은 다양한 레이아웃 요구 사항을 해결하는 데 매우 강력하며, Flexbox와 함께 사용하여 더욱 복잡한 레이아웃을 만들 수 있습니다. 이를 통해 반응형 디자인과 같은 다양한 디자인 요구 사항에 유연하게 대응할 수 있습니다.

'웹(Web) 이야기' 카테고리의 다른 글

19. <CSS> Flexbox  (1) 2024.02.25
18. <CSS> Grid Layout 예제  (1) 2024.02.24
16. <CSS> 레이아웃 - float, display  (0) 2024.02.21
15. <CSS> 레이아웃(Layout)  (0) 2024.02.20
14. <CSS> 박스모델  (1) 2024.02.19
'웹(Web) 이야기' Related Articles more