[004] HTML, CSS - Grid 적용

안녕하세요~ totally 개발자입니다. 오늘은 HTML과 CSS를 활용해서 Grid를 적용해보는 방법에 대해 살펴보도록 하겠습니다. 먼저 기본적으로 grid를 형성하는 방법에 대해 살펴보겠습니다. 여기에서는 쉬운 예제를 위해 inline CSS로 진행했습니다. 아래 코드처럼 container 클래스의 div 태그와 그 안에 product 클래스의 제품 6개 div 태그들을 넣어주었고 9번째부터 19번째 줄까지 CSS 코드를 작성해주었습니다. 여기에서 중요하게 적용해야 하는 CSS는 아래 표로 정리했습니다. display flex, grid, inline, block 등 속성을 가지고 있으며 flex와 grid의 차이는 flex는 1차원, grid는 2차원으로 flex는 세로 또는 가로 방향 한 방향만 ..

2023.01.24