grid-template1 [CSS] display: gird 를 이용한 계산기 디자인 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다. 아래와 같은 계산기를 CSS Grid를 활용해서 디자인을 해보겠습니다. html 소스코드는 아래와 같습니다. 아래와 같이 출력됩니다. display: grid를 선언해보겠습니다. body form { display: grid; } 컨테이너 요소( )를 지정해서 grid를 선언한다면 자식 요소들은 아이템(item)이 됩니다. grid를 통해 아이템들은 block이 되면서 위와 같이 출력됩니다. 이제 gird-template를 통해 row(가로)와 column(세로)를 정해보겠습니.. 2022. 9. 22. 이전 1 다음
