10. 그리드 소개

 

기획서 같이 목록과 본문이 나란히 위치하는 디자인을 해보려고 한다. 바로 그리드 이다.

 

틀을 먼저 만들어보자 ! NAVIGATION, ARTICLE 두 단어에 각각 테두리를 주고 나란히 배치해 보겠다.

디자인 이란 목적을 위해 어떤 의미도 없는 태그를 사용해야 할 때가 있는데, 그럴때 사용하는 태그가 무색무취 <div> 태그 이다. 그리고 <div> 태그는 기본적으로 블록 레벨 엘리먼트 이기 때문에 화면 전체를 쓰므로 줄바꿈이 된다. <div>태그와 똑같은 목적의 태그가 <span>태그 이다. <span>태그는 인라인 엘리먼트라서 목적에 따라 <div> 태그 또는 <span>태그 를 사용하면 된다.

 

두 개의 요소를 나란히 놓기 위해 그리드를 써보겠다. 그러려면 두개의 태그를 감싸는 부모가 필요하다.

부모태그의 id 값을 'grid' 로 지정한다.

두 개의 태그를 나란히 배치하고 싶으면 그것을 감싸는 부모 태그가 필요하다.

display 에는 속성값으로 block,inline, none을 지정해 어떤 태그가 표시되는 방법을 완전히 바꾸는 속성이었다.

그런데 display의 속성에 'grid' 라는 속성을 쓰면 아무 변화가 없지만

grid-template-columns 속성을 추가한 다음 첫번째 칼럼은 150px정도의 부피를 갖고, 두 번째 칼럼은 나머지 공간을 다 쓴다는 의미로 1fr을 지정해 보겠다.

 

화면을 늘려보면 ARTICLE 영역은 자동으로 커지고 NAVIGATION 영역은 150px을 고정적으로 차지하게 된다.

 

150px 대신 1fr을 하면 두 칼럼이 같은 크기가 된다.

grid-template-columns: 1fr 1fr;

 

첫번째를 2fr 로 바꾸면 전체를 3이라고 했을때 2만큼 1만큼으로 나눠서 쓰게 된다.

 

이제 ARTICLE에 본문을 넣어본다.

보다시피 텍스트가 많아짐에 따라 자동으로 칼럼이 커지고 왼쪽에 있는 NAVIGATION 을 감싸는 태그도 자동으로 커지는 모습을 볼 수 있다. 이것이 바로 그리드 이다.