css : grid 복습, flex,grid game

Grid

grid-template-columns

몇 컬럼을 만들것인지, 각 컬럼의 넓비를 어떻게 할것인지 정함

        grid-template-columns: 200px 500px 200px;
        grid-template-columns: 1fr 2.5fr 1fr;
        grid-template-columns: 25% 50% 25%;
        grid-template-columns: repeat(3, 1fr);

grid-template-rows

grid는 default가 로우이기 때문에 각 로우의 높이를 정한다.

        grid-template-rows: 200px 500px 200px;
        grid-template-rows: 1fr 2.5fr 1fr;
        grid-template-rows: 25% 50% 25%;
        grid-template-rows: repeat(3, 1fr);

grid-tempate-areas

그리드 아이템에 grid-area속성을 주어 별명을 붙쳐준다. 그 후 grid-tempate-areas속성으로 지도를 만들 듯 그리드 레이아웃을 짠다.

grid-template-areas:
          "header   header   header "
          "section  section  section"
          "footer   footer   footer";

<div class="container-color container">
      <div class="item-color item header">Lorem.</div>
      <div class="item-color item section">Lorem, ipsum.</div>
      <div class="item-color item aside">Lorem, ipsum dolor.</div>
      <div class="item-color item footer">Lorem ipsum dolor sit.</div>
    </div>

aside가 풋터보다 위에 쓰였지만 아래로 밀려난 것을 볼 수 있다.

grid-row, grid-column

grid의 각 축에는 번호가 붙는데 각 요소를 몇번줄부터 몇번줄까지 포함하게 하는지 지정할 수있다.

.header {
        border: 10px solid tomato;
        grid-row: 1/2;
        grid-column: 1/4;
      }

      .section {
        border: 10px solid blue;
        grid-row: 2/3;
        grid-column: 1/4;
      }

      .aside {
        border: 10px solid darkred;
      }

      .footer {
        border: 10px solid deeppink;
        grid-row: 3/4;
        grid-column: 1/4;

z-index와 translate

원래 z-index를 먹였던 곳에 haver등가 같은 효과로 translate를 준다면 z인덱스가 안먹는다. 따라서 다른방법을 찾아봐야한다.

calc

calc를 이용하면 비율이나 크기를 상화에 따라 계산할 수 있게 된다.

width: calc(100% - 20px);

flex-froggy, flex-defense, grid-garden

원래 레이아웃에 대해 잘 모를 때는 테스트인줄 알았는데 유형별로 잘 정리하고 알려주어 쉽게 끝까지 깰 수 있었다. postion도 해보고싶은데 포지션은 무료로 풀려있는게 없는것 같다 ㅜ