Notice
Recent Posts
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
관리 메뉴

공부기록용

CSS 기초 06(grid속성 grid-template-columns/rows, grid-gap) 본문

📚강의록📚/유노코딩)CSS

CSS 기초 06(grid속성 grid-template-columns/rows, grid-gap)

과부하가즈아 2023. 8. 2. 20:03

🔴grid-template-columns

🔴grid-template-rows

🔴grid-gap

grid-template-columns

grid container의 트랙 중 열(column) 트랙 내 item들의 크기를 지정할 수 있는 속성이다.(트랙이란 행 또는 열을 의미)

grid-template-rows

grid container의 트랙 중 행(row) 트랙 내 item들의 크기를 지정할 수 있는 속성이다.

grid-gap(gap)

grid item 사이의 간격을 지정하는 속성이다. 행에서의 간격과 열에서의 간격을 똑같이 지정할 수도 있고, 각자 따로 지정할 수도 있다. 

row-gap과 column-gap의 단축속성이다. 

⭐내용복습⭐

<!-- index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" />
    <title>그리드 레이아웃</title>
</head>
<body>
    <ul class="container">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
</body>
</html>
/*style.css*/
*{
  box-sizing: border-box;
}
body{
  margin: 0;
}
ul{
  padding: 0;
  list-style-type: none;
  border: 5px solid teal;
}

li{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: beige;
  border: 5px solid tomato;
  border-radius: 8px;
}

가로로 정렬된 이유
> 기본적으로 li 요소는 블록 레벨 요소이다. 적용한 CSS 속성 display: flex;는 li 요소들을 Flexbox 레이아웃으로 바꾸기 때문에 가로로 쌓이게 된다.
> display: flex;를 사용하면 li 요소들은 Flexbox 컨테이너가 되며, 기본적으로 수평 방향으로 배열된다. Flexbox는 기본적으로 아이템들을 행 방향으로 정렬한다.

 

ul{
  padding: 0;
  list-style-type: none;
  border: 5px solid teal;
}

li{
  justify-content: center;
  align-items: center;
  background-color: beige;
  border: 5px solid tomato;
  border-radius: 8px;
}​

> ul / li모두 block레벨 요소

ul에 display속성을 추가하면서 ul은 flex container이 되었고, flex container의 주축인 가로 방향(왼->오)으로 flex item들인 li가 배치되었다.

display: flex;
ul{
  display: flex;
  padding: 0;
  list-style-type: none;
  border: 5px solid teal;
}​
ul이 아닌 li에 바로 display: flex 속성을 지정한다면,
li{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: beige;
  border: 5px solid tomato;
  border-radius: 8px;
}

/*
display: flex; 속성이 없으면 
justify-content와 align-items 속성은 동작하지 않는다.
*/
> display: flex;를 사용하면서 li 요소들은 Flexbox 컨테이너가 되며, 기본적으로 수평 방향으로 배열되게 되고, flexbox는 기본적으로 아이템들을 행 방향으로 정렬한다.

⭐내용실습⭐

.container{
  display: grid;
}

> ul을 grid container로 지정을 해주고

 

.container{
  display: grid;
  height: 500px;
}

> 높이(height)를 지정해주면

> grid item들에 높이가 모두 적용되는 것을 볼 수 있다. 

grid-template-columns

.container{
  display: grid;
  height: 500px;
  
  /* 열의 갯수와 크기 */
  grid-template-columns: 100px 100px

}

> 100px의 크기를 가진 2개의 열을 만들겠다

.container{
  display: grid;
  height: 500px;

  /* 열의 갯수와 크기 */
  grid-template-columns: 100px 300px 100px
 
}

> 갯수도, 사이즈도 원하는데로!

.container{
  display: grid;
  height: 500px;

  /* 열의 갯수와 크기 */
  grid-template-columns: 10% 30% 60%;
 
}

> %으로도 가능하다. 

.container{
  display: grid;
  height: 500px;

  /* 열의 갯수와 크기 */
  grid-template-columns: 100px 1fr 2fr 1fr;
}

> fr로 지정한 수들만큼 남은 범위를 나누어 차지하는 것

grid-template-rows

.container{
  display: grid;
  height: 500px;

  grid-template-rows: 200px 200px; 
}

.container{
  display: grid;
  height: 500px;

  grid-template-rows: 200px 1fr 1fr 1fr 1fr;
}

.container{
  display: grid;
  height: 500px;

  grid-template-columns: 100px 1fr;
  grid-template-rows: 200px 1fr 1fr 1fr 1fr;
}

> 2열 5행이 되어야 하지만 부족하므로 빈 공간으로 둔다. 

grid-gap

.container{
  display: grid;
  height: 500px;

  grid-template-columns: 100px 1fr;
  grid-template-rows: 200px 1fr 1fr;
  gap: 10px
}

/*grid-gap으로도 해도 됨!*/

 

.container{
  display: grid;
  height: 500px;

  grid-template-columns: 100px 1fr;
  grid-template-rows: 200px 1fr 1fr;
  grid-gap: 20px 10px
}

> gap의 값을 두개로 다르게 줄 수도 있고 순서는 행 열 순이다. 

'📚강의록📚 > 유노코딩)CSS' 카테고리의 다른 글

CSS 기초 06(grid속성 grid-column, row)  (0) 2023.08.03
CSS 기초 06(grid속성 grid-template-columns/rows, grid-gap응용)  (0) 2023.08.03
CSS 기초 06(grid란)  (0) 2023.08.02
CSS 기초 05(flex속성 order)  (0) 2023.08.02
CSS 기초 05(flex속성 flex-basis / flex)  (0) 2023.08.01
'📚강의록📚/유노코딩)CSS' Related Articles more
Comments