22.11.02)CSS의 display:grid를 사용한 3일차

#오늘 배운 것

CSS의 display : grid에 대해 이해했다!

row - 가로  /  column - 세로 라고 가정한다.

grid-template-columns: 150px 150px 150px; //가로로 1줄당 150px크기이다
grid-template-rows: 150px 150px; //세로로 1줄당 150px크기이다

만약 px로 크기를 설정하기 힘들거나 수정하기가 귀찮다면!!

fr단위를 사용해라. repeat()속성도 써있지만 어려워서 fr만 써야할듯 ㅠㅠ...

 

그리드 라인!!!!

ex)3개의 라인을 설정한 후 한 라인을 끝까지 채우고 싶다면!!

grid-column-start: 1;

grid-column-end: 4;

으로 하면 된다.

하지만 end는 왜?4로 설정했지?

이유는 그리드 라인이 4개라서 그렇다고 한다. 공간이 3개면 세로라인은 4개라고 하기때문.

이것마저 입력하기 귀찮다!!!

하면 grid-column: 2 / 5; 처럼 한번에 시작선과 끝선을 조절할 수 있다.

 

 

#미니프로젝트

오늘 오전 회의중 개인별 사이트를 작업해야한다는 것을 알게됐고, 그 이후로 멘붕상태ㅋㅋㅋㅋ

팀원들 전부 말없이 정말 하루종일 뼈대만 짠듯....DB도 당일내로 완료했어야했는데 아직까지 못 끝냈다..내일중으로 DB까지 완료하겠습니다...오늘은 너무 많이했음..

내일 DB 디폴트 예시 복붙한것을 수정해야한다.