display: grid;
정의
격자형으로 구조를 설정할 수 있는 속성격자 형태의 구조를 만들어야 할 때(이미지 사이트, ...)- 홈페이지의 구조를
격자형태로 설계할 때(header, main, footer, side) 자주 사용
개념
- 부모 container 자체에
display: grid;> 이제부터 grid로 지정할게!!- 자식 container는
grid cell로 바뀌게 된다.gird를 사용할 때반응형으로 만드는 경우가 대부분이기 때문에 사용 가능한부모 grid의 너비에 공평하게 나누기 위해 단위를px를 쓰지 않고%를 사용하거나fr을 사용한다.
부모 container(display: grid;)의 속성
grid-template-columns , grid-template-rows
- ⭐
display: grid;을 선언하면 가장 먼저 해줘야 할 속성이다.⭐ column에는 몇 개의column을 만들 것이고 각각의 사이즈를 어떻게 지정할지row에는 몇 개의row를 만들 것이고 각각의 사이즈를 어떻게 지정할지column과row의모양,사이즈,개수를 설정
grid-gap, grid-column-gap, grid-row-gap
grid cell간의간격을 조절할 수 있는 속성grid전체에gap을 주고 싶을 때는padding사용
grid-template-areas
- 각각의 아이템들이 어디에서 얼마만큼 크게 표현되기 원하는 지 셀 하나를 표현 혹은 셀 두개를 표현할지 선정하는 속성
자식 container(grid cell)의 속성
grid-area
- 각각의 아이템들이 어디에서 얼마만큼 크게 표현되기 원하는 지 셀 하나를 표현 혹은 셀 두개를 표현할지 선정하는 속성
- 아이템에 class 지정 >
grid-column-start,grid-column-end//column을 어디서부터 시작 하고 끝날 것인지 지정 - 어디서부터 시작 하고 끝날지는 ⭐
grid line⭐을 기준으로 설정
grid-column-start , grid-column-end
세로로 몇 번째 cell부터 몇번째cell까지 보여줄지 설정하는 속성
grid-row-start , grid-row-end
가로로 몇 번째 cell부터 몇번째cell까지 보여줄지 설정하는 설정
※예시 코드는 노션에 작성해 두었다.
알게 된 점
팀 프로젝트를 하면서 display와 position이 css레이아웃을 만드는데 중요한 속성이라는 것을 알게되었고 그 중에서 격자 레이아웃을 만들 때 유용한 grid에 대해 공부하면서 홈페이지 제작을 시작할 때 header, main, footer, side, 등의 레이아웃을 구분해 놓고 시작하기에 도움이 많이되는 속성이라는 것을 알게 되었습니다.
하루를 마치며
오늘은 팀 프로젝트 발표를 했다. 프로젝트를 완성하고 발표까지 하니까 뿌듯함을 느꼈다. 물론 아쉬운 부분은 많았지만 충분히 보완할 수 있을 것이다. 다음 프로젝트에서는 아쉬움이 지금보다 덜하게 작업할 것이다. 프로젝트가 끝나고 공부할 것들이 많다고 느꼈다. 내일부터 내배캠에서 제공되는 자바스크립트 강의를 듣고 빡세게 공부할 것이다. 공부한 내용은 복습을 위해 노션에 정리하고 코드도 서로 연결지어가며 연습할 것이다. 자바스크립트만 공부해서는 안되고 html,css도 틈틈히 공부할 것이다. 이번에 느꼈지만 머릿속에 정리가 안되어있어 어떨 때 어떤 코드를 작성해야할지 아예 감도 잡히지 않았다. 공부한 것을 한번 듣고 넘겨서 그랬던 것 같아 학습주가 끝날 때까지 매일 복습할 것이다. 앞으로 갈길이 멀다고 뼈저리게 느낀 하루였다.
