공삼
article thumbnail
(HTML/CSS)Grid 에 대해 알아보기
Front-End/HTML-CSS 2022. 12. 16. 12:02

그리드 가든 CSS에서 박스들을 배치하는 방법중 Grid에 대해 공부해보자. https://cssgridgarden.com/#ko 먼저 그리드 가든 게임사이트에 들어가면 간단하고 재밌게 문법에 대해 알아 볼 수 있다. 그리드에는 column과 row 즉 열과 행이 있다. column (열) -> 세로 row (행) -> 가로 다른 개발언어와 다르게 시작점이 1이므로 이미지에서 보이는 빨간색 기준점들은 2가 된다. /* 행과 열의 시작점*/ grid-column-start: 2 ; grid-row-start: 3; /* 행과 열의 끝지점*/ grid-column-end: 3; grid-row-end: 4; 와같이 시작점을 지정해주거나 끝지점을 지정해 주면된다. 박스1 박스2 박스3 박스4 박스5 박스6 박..