멋쟁이사자 FE7 11일차

Findings (배운 점)

Grid

두 방향(가로-세로) 레이아웃 시스템 (2차원)

🙌 flex는  한 방향 레이아웃 시스템 (1차원)

 

출처 : https://studiomeal.com/archives/533

용어정리

https://yamoo9.gitbook.io/css-grid/css-grid-term

한 눈에 살펴보는 Grid 용어 - CSS Grid Layout Guidebook

위 사이트에서 너무나도 이해하기 쉽게 정리했다. (글쓴이의 복습과 여러분의 이해를 돕기 위해!!)

grid-container에 사용하는 속성

grid-template-columns

• 열 방향 그리드 트랙의 사이즈를 설정합니다.

.container {
  display: grid;
  grid-template-columns: 1열크기 2열크기 ...;
  grid-template-columns: [선이름] 1열크기 [선이름] 2열크기 [선이름] ...;
}

 

grid-template-rows

• 행방향 그리드 트랙의 사이즈를 설정합니다.

.container {
  display: grid;
  grid-template-rows: 1행크기 2행크기 ...;
  grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
}

 

추가적으로  fr단위

fr 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정한다.

함수

1. repeat()

• repeat는 반복되는 값을 자동으로 처리할 수 있는 함수. repeat(반복 횟수, 반복값)

 

내가 이해한 부분에서의 설명 

 

 

grid-template-columns: repeat(5, 1fr)와 grid-template-rows: repeat(5, 1fr)를 통해
1. 행에 5개의 div가 1fr이란 동일 간 넓이로 들어감 x 5 / 행에 5개의 div가 1fr이란 동일 간 넓이로 들어감 x 5
2. 그리드 컨테이너 안의 아이템이 총 6개 이므로, 1행의 5칸을 채우고 2행의 1칸을 추가적으로 채움!

 

2. mixmax()

최솟값과 최댓값을 지정할 수 있는 함수.
minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게.. 입니다. 즉 아무리 내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리해 준다.

 

3. auto-fill과 auto-fit

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다.

 

auto-fill과 auto-fit의 차이점

셀을 구성하고 남는 공간이 존재할 때 둘의 차이가 드러나게 된다.

auto-fill은 설정된 너비에서 가능한 많은 셀들을 만들어 내려고 한다.
겉으로 보기에는 빈 공간이 있더라도 셀의 길이를 늘이지 않는다.

auto-fit은 빈 공간을 셀들이 나누어 가져서 딱 맞게 길이를 설정한다.
겉으로 보기에는 셀의 길이를 전체 너비에 맞게 늘린다.

 

 

gap

• 셀과 셀사이의 간격을 설정할 때 사용 할 수 있는 속성입니다. 복잡한 레이아웃 안에서 마진 대신 편리하게 간격을 설정할 수 있습니다. grid-gap은 gap으로 사용할 수 있습니다.
• flex에서와 동일한 속성입니다.
•  

grid-item에 사용하는 속성

 

grid-column-start, grid-column-end, grid-row-start, grid-row-end

 

item을 빨간 동그라미 부분 만큼 영역을 지정하려 한다.

 

      .box1 {
        background: skyblue;
        grid-column: 1/4;
        grid-row: 1/3;
        
     /* grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3; */
      }
    start : 시작하는 부분
    end : 끝나는 부분
    
    위 이미지를 보면 가로 세로로 번호가 있다 그 번호를 기준으로 시작과 끝을 지정한다

 

Apply & Feeling (적용 및 느낀 점)

 

 

grid에 대해 공부하고 실습으로 바로 적용해 보았다. girdf를 공부하면서 reduce와 grid-column-start, grid-column-end, grid-

row-start, grid-row-end를 이해하는데 많은 시간이 걸렸다. 강의를 듣고, 공식문서를 참고하고, 다른 블로그도 찾아보고.. 역시 보는 걸로는 이해가 잘 안 됐다. 하지만 포기하지 않고 여러 예시들과 나 스스로 직접 코드를 짜보면서 일일이 확인해 보니 조금씩 이해하고 있는 나 자신을 발견했다. 지난번 til에도 적었지만, 실습 그리고 적용이 중요한 포인트라고 생각한다.

추가적으로 til을 작성하는 게 부트캠프를 진행하는 데 있어서 시간적으로 걸림돌이 되면 안 될 것 같다는 생각이 들었다.

그래서 시간적으로 여유가 없는 날에는 실습을 한 것을 최우선으로 삼아 블로그를 작성할 계획이다.