GRID2 [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. [WEB/CSS] 그리드(Grid) 사용하기 우선 그리드 개념을 이해하기 위해 아래 코드를 입력하고 결과를 확인한다. NAVIGATION ACTICLE 그리드를 사용하기 위해서는 style 태그안에 있는 #grid에 코드를 추가해야한다. 위 코드의 grid-template-columns: 150px 1fr의 의미는 첫번째 컬럼인 NAVIGATION은 150px의 공간을 가지고 두번째 컬럼인 ACTICLE은 150px을 제외한 나머지 공간을 가진다는 의미이다. 그래서 결과를 보게 되면 잘 나온 것을 확인할 수있다. 만약 grid-template-columns: 2fr 1fr이라면 첫번째 컬럼인 NAVIGATION은 2fr과 1fr을 합친 3fr 중 2fr의 비율(2/3fr)을 갖는다라고 생각하면 된다. 두번째 컬럼인 ACTICLE은 2fr과 1fr을.. 2022. 7. 3. 이전 1 다음
