목록그리드 (1)

Enjoy Programming

Grid - Rows and Columns & shortcut

자 grid-template을 배워봤다. 분할이 잘되고 전체적인 html을 다루기가 쉬워진다. 그런데~ grid-template-area 프로퍼티를 사용하지 않고도 똑같이 가능하다 기초적인 걸로~ row와 column의 개념만 제대로 알고 있고 줄의 갯수만 셀수 있으면된다. 바로 grid-column(row)-start(end) 만 잘 이용해도~~ 자 이전 template-area관련 속성은 다 지워주고 보자 자 높이 너비 모두 100px인 4x4의 그리드만 만들어줬다. 아까 언급한 row와 column을 잘보고 줄 갯수만 잘보자 이경우엔 갭을 줬기에 줄갯수가 많지만 잘생각해보면 원래 가로세로 1~5번까지 줄이있다.~ 박스가 네개니까. 이상태에서 첫번째 박스에 grid-column-start: 1; gr..
CSS 2021. 4. 21. 09:23
이전 Prev 1 Next 다음