grid (2) 썸네일형 리스트형 CSS Grid 사용법 정리 (grid column, row에 이름 명시) 안녕하세요. 저번 시간에는 grid를 활용하여 표를 만들어 보았습니다. 또한 grid-column, grid-row 속성을 활용하여 원하는 셀들을 합치는 과정도 학습을 하였는데요. (이전 학습 URL: https://mjlabs.tistory.com/48) 이번 시간에는 셀들을 합치는 과정에서 조금 더 쉽게 합칠 수 있도록, column과 row에 이름을 부여해 보도록 하겠습니다 :) 1 2 3 4 5 6 7 8 html 코드를 위와 같이 작성을 하였습니다. grid 속성을 부여하기 위해서 container div를 만들고, 자식 태그로 box div를 8개 만들었습니다. 다음으로 css 코드를 작성하겠습니다. .container { display: grid; grid-template-columns: [.. CSS Grid 사용법 정리 (grid-template-columns, grid-template-rows) Grid는 행과 열을 나누어 UI를 만들기 위해서 사용이 됩니다. HTML의 블록 태그를 사용하면 태그들이 층층이 쌓이게 되고, 인라인 태그를 사용하게 되면 한 줄로 태그들이 쌓이게 되는데요. Grid 없이 UI를 만들고 화면을 분리를 하게 되면 정말 쉽지 않다는 것을 느낄 수 있습니다. Grid의 사용법과 많이 쓰는 속성들에 대해서 정리를 하도록 하겠습니다 :) 1. 기본 Grid 만들기(grid-template-columns, grid-template-rows) 부모 태그인 container div를 하나 생성하고, 자식 태그인 box div를 4개 생성하였습니다. 1 2 3 4 Grid를 만들 때는 자식 태그가 아닌, 부모 태그(예제에서는 container div)에 Grid 속성을 직접 명시를 해.. 이전 1 다음
