인기포스트

ABOUT ME

Today
Yesterday
Total
  • [CSS]css 레이아웃(4) - grid
    프로그래밍/HTML&CSS 2021. 12. 28. 08:30

    HTML의 레이아웃 배치시 다음과 같은 상황에서 사용된다.

    - 페이지를 여러 섹션으로 나눌 때
    - 콘텐츠를 문서 계층 구조의 관점으로 정의할 때

    글의 순서는 다음과 같다.

    1. Grid 기본 사용법
      1) columns 설정
      2) rows 설정
      +height: 100vh 설정
    2. Grid 활용 예시
      1) columns, rows 설정
      2) 배치하기
         - grid area 설정
         - grid-template-areas 설정

     

    1. Grid 기본 사용법

    ex) <h1> 태그의 콘텐츠1과 <em> 태그의 콘텐츠2의 레이아웃을 배치하길 원할 경우

    step1) grid를 사용할 콘텐츠들 <div> 태그로 묶어주기

    <div> 
  <h1>contents1</h1> 
  <em>contents2</em> 
</div>

     

    step2) <div> 태그 id나 class 생성하고 display:grid; 입력

    <style> 
  .grid{ 
    display:grid; 
  } 
</style> 

<div class="grid"> 
  <h1>contents1</h1> 
  <em>contents2</em> 
</div>
     

    1) columns 설정

    다음과 같이 레이아웃을 배치하고자 할 때 grid-template-columns:비율;

    <style> 
  .grid{ 
    display:grid; 
    grid-template-columns:1fr 1fr 1fr; 
  }
</style> 

<div class="grid"> 
  <div>contents1</div> 
  <div>contents2</div> 
  <div>contents3</div> 
</div>
     

    ※ 비율 설정
    1fr 1fr 1fr - 1:1:1 비율
    50px 2fr 1fr - 50px (전체-50px)2:1 비율
    50px 1fr 50px - 50px :1(양쪽 100px 제외한 모두):50px 비율

     

    2) rows 설정

    다음과 같이 레이아웃을 배치하고자 할 때  grid-template-rows:비율;

    <style> 
  .grid{ 
    display:grid; 
    grid-template-rows:1fr 1fr 1fr; 
  } 
</style> 

<div class="grid"> 
  <div>contents1</div> 
  <div>contents2</div> 
<div>contents3</div> </div>
     

    + height:100vh;

    grid-template-rows:비율; 설정하면 아래와 같다.

     

    ​여기에 height:100vh; 를 추가하면, 아래와 같이 전체화면을 사용할 수 있다

    <style>
 .grid{ 
   display: grid; 
   grid-template-rows:1fr 1fr 1fr; 
   height: 100vh; 
  } 
</style>

    ​

    스크롤바가 생기지 않게 하려면, <body>의 margin 값을 0으로 설정하면 된다.

    <style> 
  body{ 
   margin:0; 
  } 
</style>
     

    ​

    2. Grid 활용 예시

    아래와 같이 레이아웃을 배치하고자 한다. (columns  : 3 / rows : 4)


    1)     columns, rows 설정

    grid-template-columns:50px 1fr 1fr;
    grid-template-rows:20% 1fr 1fr 15%;

    <style> 
  .grid{ 
    display:grid; 
    grid-template-columns:50px 1fr 1fr; 
    grid-template-rows:20% 1fr 1fr 15%; 
    height:100vh; 
  } 
</style> 

<div class="grid"> 
  <h6>TITLE</h6> 
  <div>SECTOR1</div>
  <div>SECTOR2</div>
  <div>SECTOR3</div>
  <div>SECTOR4</div>
  <div>SECTOR5</div>
  <div>SECTOR6</div>
</div>

    ※ 비율 조정으로 다양한 레이아웃을 만들어 볼 수 있으니 직접 만들어보면서 ​각자 생각하는 레이아웃을 만들어보면 좋을 것 같다.

     

    2) 배치하기

    위에서 만들어둔 레이아웃에 아래와 같이 요소들을 배치해야한다.

    - grid area 설정

    각각의 콘텐츠에 class 생성하고 grid area를 설정해 준다.

    .class 이름 {
   grid area: 콘텐츠 이름
}
      .head{ 
    grid-area: TITLE; 
  } 

  .item1{ 
    grid-area: SECTOR1 
  } 

  .item2{ 
    grid-area: SECTOR2; 
  } 

  .item3{ 
    grid-area: SECTOR3; 
  } 

  .item4{ 
    grid-area: SECTOR4; 
  } 

  .item5{ 
    grid-area: SECTOR5; 
  } 

  .item6{ 
    grid-area: SECTOR6; 
  }

     

    - grid-template-areas 설정

    위에서부터 차례대로 레이아웃마다 배치되어야 될 요소들의 이름을 입력해 준다. (빈 칸은 "." 혹은 "none을 입력한다.)

    .grid{ 
  grid-template-areas: 
    "TITLE TITLE TITLE" 
    "SECTOR1 SECTOR2 SECTOR2" 
    "SECTOR1 SECTOR3 ." 
    "SECTOR4 SECTOR5 SECTOR6"; 
}
     

    ※ 각 영역이 잘보이도록 본문에서 다루지 않은 코드(gap)가 쓰였다. (아래 전체 코드에서 확인 가능하다.)

    마지막으로 덧붙이면, grid-template을 사용하면 한번에 rows, columns, areas 설정을 할 수있다.
    그러나 편리하라고 만든 단축 속성임에도 불구하고 코드 가독성이 좋지않아 개인적으로는 이후 수정시에도 어려움이 따를 것 같다는 생각이 들어 설명을 하지 않았다.
    (궁금한 분이 있다면 "grid-template 단축 속성"에 대해 검색하면 쉽게 찾을 수 있을 것이다.

    전체 코드

    <style> 
  .grid{ 
    display:grid; 
    grid-template-columns:30% 1fr 1fr; /*열 설정*/ 
    grid-template-rows:20% 1fr 1fr 15%; /*행 설정*/ 
    height:100vh; /* 전체화면 설정*/ 
    grid-template-areas: 
      "TITLE TITLE TITLE" 
      "SECTOR1 SECTOR2 SECTOR2" 
      "SECTOR1 SECTOR3 ." 
      "SECTOR4 SECTOR5 SECTOR6"; 
    gap:10px; /*grid 영역 사이 간격*/ 
  } 

  .head{ 
    grid-area: TITLE; 
  } 

  .item1{ 
    grid-area: SECTOR1 
  } 

  .item2{ 
    grid-area: SECTOR2; 
  } 

  .item3{ 
    grid-area: SECTOR3; 
  }
 
  .item4{ 
    grid-area: SECTOR4; 
  } 

  .item5{ 
    grid-area: SECTOR5; 
  }
 
  .item6{ 
    grid-area: SECTOR6; 
  } 

  .contents{ 
    border:5px solid red; 
  } /*시각적으로 잘 보이기 위해 빨간 테두리*/ 

  body{ 
    margin:0; 
  } /*전체화면 사용시 스크롤 없애기*/ 
</style> 

<body> 
  <div class="grid"> 
    <h1 class="contents head">TITLE</h1> 
    <div class="contents item1">SECTOR1</div> 
    <div class="contents item2">SECTOR2</div> 
    <div class="contents item3">SECTOR3</div> 
    <div class="contents item4">SECTOR4</div> 
    <div class="contents item5">SECTOR5</div> 
    <div class="contents item6">SECTOR6</div> 
  </div> 
</body>

     

    저작자표시 비영리 동일조건 (새창열림)

    '프로그래밍 > HTML&CSS' 카테고리의 다른 글

    [CSS]css 레이아웃(3)- flexbox  (0) 2021.12.27
    [CSS]css 레이아웃(2)- flexbox  (0) 2021.12.25
    [CSS]css 레이아웃(1) - position / float  (0) 2021.12.24
    [CSS]css 태그 - div / span  (0) 2021.12.23
    [CSS]css display 속성 - block, inline, block-inline  (0) 2021.12.22

    댓글

티스토리툴바