▶ grid
👩🏻 : 오늘부터 금요일까지 진행되는 개인 과제 프로젝트가 시작되었다.
영화 api에서 정보를 불러와서 해당 영화의 원하는 정보만 card 형식으로 화면에 보이게 하고 검색 기능을 하는 것까지가 필수 기능이다!
여기에서 나는 카드들을 화면에 정렬하여 보이게 하는 css에서 display:grid를 사용하였다.
기존에는 display:flex를 이용하여 카드들을 정렬해보려고 했는데 grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 이라고 하여 이렇게 균일하게 반복되는 카드들을 정렬할 때 더 유용하게 사용할 수 있지 않을까? 싶은 생각이 들어서 개념도 찾아보고 속성에 대해서도 새롭게 공부해 보았다.
사실 grid라는 개념 자체를 모르고 있었기 때문에 걱정이 많았는데 그래도 계속 모르는 채로 있을 순 없어서 도전하며 배우자는 생각이 들었던 것 같다.
· 간단 정리
· Grid 레이아웃을 만들기 위해서는 컨테이너와 아이템이 있으면 된다.
· 부모요소를 grid container, 자식 요소를 grid item이라고 부른다.
= “컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”
· 용어 정리
grid track → grid row 또는 column
grid cell → grid 한 칸
grid line → grid cell 구분선
grid number → grid line 각 번호
grid gap → grid cell 사이 간격
grid area → grid line으로 둘러싸인 사각형 영역, grid cell 집합
문제 - 내가 만들려고 한 것 ( 과제에 대한 설명 , card를 어떻게 배치하고 싶었는지 )
시도 - flex로 하려고 했는데 실패한 것, footer를 넘어서는 영역침범(패딩 값 변경)
해결 - 결국 grid 사용하여 완성
