220817 TIL

CoderS·2022년 8월 17일

TIL DAY 205

오늘 배운 일

✔️ CSS Layout

🧰 Grid [part VII]

시작하기 앞서, 먼저 연습할 코드를 보여주자면...

index.html

<body>
  <div class="grid">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="nav">nav</div>
    <div class="footer">footer</div>
  </div>
</body>

style.css

.grid {
  color: white;
  display: grid;
  gap: 5px;
  height: 50vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
}

.content {
  background-color: #3498db;
}

.nav {
  background-color: #8e44ad;
}

.footer {
  background-color: #f39c12;
}

전에랑 비슷한 형태로 돌아가서...

저번과 마찬가지로, cell 들의 방향을 stretch, center, bottom 바꾸는 것에 대해서 알아볼 것 이다.

그런데 다른점은 개별적으로 움직이는 것에 대한 포커스이다.

각자 다르게 정렬하고 싶으면, 자식 요소한테 직접 코드를 적어준다...

.header {
  background-color: #2ecc71;
  align-self: end;
}

header 박스한테 align-self 를 해서 end 라고 혼자 주었는데,

결과는...

header 혼자 수직 밑으로 줄어든 것 이다.

이게 child 에만 적용된 프로퍼티이다!

align-items 와 justify-items 해준거는 모두 content 에 적용을 해준거다.

그리고 header 한테 가로로 중앙으로 줄어들게 할려면, 이렇게 적어준다.

.header {
  background-color: #2ecc71;
  align-self: end;
  justify-self: center;
}

그리고 저번처럼 align, justify 두 번 쓰는게 아니라, 코드 한 번만 작성하는 방법도 있다.

바로...

place-self: 수직 수평;

.header {
  background-color: #2ecc71;
  place-self: end center;
}

똑같이 적용된다.

의심을 품을수 있으니, 다르게 수정해보면...

.header {
  background-color: #2ecc71;
  place-self: start end;
}

place-self 는 justify-self 와 align-self 를 합친거다.

그리고 대망의 grid 의 마지막 프로퍼티에 대해 알아보자!

그 전에, 우리의 html 코드를 조금 수정해보면...

index.html

<body>
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
    <div class="item">17</div>
    <div class="item">18</div>
    <div class="item">19</div>
    <div class="item">20</div>
  </div>
</body>

class item 이라는 20개의 div 태그들이 차례대로 숫자 1부터 20까지 갖고 있다.
그리고 css 도 수정해주자!

style.css

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.item:nth-child(odd) {
  background-color: #2ecc71;
}

.item:nth-child(even) {
  background-color: #3498db;
}

결과는...

우리는 grid-template-colums 에서 4개의 columns 가 있고,
grid-template-rows 도 마찬가지로 4개가 있다.

우리는 더 많은 요소들을 가지고 있지만, row 는 충분하지 않는다.

실제로 서버에서 얼마나 많은 데이터를 받을 수 있을지 몰라 이러한 일이 발생할 것 이다.

그럼 요소를 50개로 늘리면 어떻게 될까?

index.html

<body>
  <div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
    <div class="item">17</div>
    <div class="item">18</div>
    <div class="item">19</div>
    <div class="item">20</div>
    <div class="item">21</div>
    <div class="item">22</div>
    <div class="item">23</div>
    <div class="item">24</div>
    <div class="item">25</div>
    <div class="item">26</div>
    <div class="item">27</div>
    <div class="item">28</div>
    <div class="item">29</div>
    <div class="item">30</div>
    <div class="item">31</div>
    <div class="item">32</div>
    <div class="item">33</div>
    <div class="item">34</div>
    <div class="item">35</div>
    <div class="item">36</div>
    <div class="item">37</div>
    <div class="item">38</div>
    <div class="item">39</div>
    <div class="item">40</div>
    <div class="item">41</div>
    <div class="item">42</div>
    <div class="item">43</div>
    <div class="item">44</div>
    <div class="item">45</div>
    <div class="item">46</div>
    <div class="item">47</div>
    <div class="item">48</div>
    <div class="item">49</div>
    <div class="item">50</div>
  </div>
</body>

결과를 보면 column 의 높이는 같지만, row 들이 사라졌다!

그 이유는 4개의 row 만 있다고 지정해주어서 그렇다.

어림잡아서 정해주는 것보다 이 때, 사용해주는게 grid-auto-rows 라는 프로퍼티다.

위의 프로퍼티가 의미하는 바는 만약에 더 많은 content 가 있지만, 따로 row 를 지정해주지 않아도 기본값을 자동으로 줘서 row 를 생성해준다.

코드를 똑같이 작성해주고,

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-auto-rows: 100px;
}

결과를 보면...

문제를 해결해버렸다.

만약 grid-auto-rows 한테 다른 길이를 제공하면 어떨까?

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-auto-rows: 350px;
}

4번째 rows 까지는 100px 길이였는데, 그 다음에는 자동으로 350px 로 늘어났다.

다 똑같이 100px 로 설정하고 싶으면 그냥 쉽게...

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-auto-rows: 100px;
}

template-rows 를 지워주고, auto-rows 만 적어주면 된다.

이 방법은 얼마나 많은 element 를 받을지 모를 때, 사용하는게 좋은 예시다.

그럼 다음으로 grid-auto-colums 를 하기전에, 먼제 grid-auto-flow 에 대해 알아보자!

다시 css 코드를 돌려보면...

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.item:nth-child(odd) {
  background-color: #2ecc71;
}

.item:nth-child(even) {
  background-color: #3498db;
}

css 는 사이즈가 없는 여분의 div 를 넣고 있다.

그리고 새로운 row 들을 생성했다. (자동적으로)

만약 새로운 column 들을 만들고 싶으면, grid-auto-flow 랑 같이 바꿔야 한다.

말로 설명하기 어려우니 코드로 설명해보겠다.

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-auto-flow: column;
}

grid-auto-flow 를 column 으로 설정하면 우리가 설정한 rows 보다 element 들이 더 많을 때, 더 많은 div 를 만드는 것 보다 더 많은 column 을 만들어낸다.

지금 보다시피, 우리 박스들의 순서가 바뀌었다!

그러니까, 그 전에는 가로로 순차적으로 정렬되었다면, 이번에는 세로로 위에서부터 밑으로 숫자가 지정되었다.

약간, flex 의 flex-direction 과 비슷한 점이다.

그럼 row 로 하면...

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-auto-flow: row;
}

다시 flow 를 column 으로 설정해주자.

그러니까 flow 가 column 이면, 설정한 것보다 더 많은 element 를 가질때 마다 그럴때는 grid-auto-columns 를 써준다.

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-auto-flow: column;
  grid-auto-columns: 100px;
}