레이아웃1 [HTML/CSS] 그리드를 이용하여 웹 페이지 틀 짜보기 그리드를 사용하면 웹페이지의 레이아웃을 간편하게 지정할 수 있다. 아래의 사진은 레이아웃이 7개로 구성되어 있다. 우선 저 7개의 레이아웃을 만들기 위해서는 HTML에서 틀을 짜야한다. [HTML] header menu main top menu2 bottom footer body 태그 안에서 .container로 묶인 7개의 div 태그를 만들어 준다. CSS를 적용하지 않고 HTML 코드만 작성하고 실행을 시키면 아무것도 전혀 적용이 안된 것을 알 수 있다. [CSS] *{ margin: 0; } .container{ display: grid; grid-gap: 10px; height: 100vh; grid-template-columns: 300px 1fr 300px; grid-template-rows.. 2022. 7. 21. 이전 1 다음