WEB2 CSS - 10. 그리드 소개

 

목록과 본문이 나란히 위치하는 디자인을 하려고 해요
그럼 밑에 있는 이 CSS라고 되어 있는 이 부분이
위쪽으로 쓱 하고 올라오면 되겠죠

그걸 하기 위한 여러가지 방법이 있는데요
그중에서 우리는 아주 최신의 방법을 살펴볼 겁니다
바로 '그리드'라고 하는 방법입니다.

사실 인류가 되게 오랜 시간 동안
정보들을 잘 배치하는, 레이아웃을 잘 짜는 방법을
코드를 통해서 효율적으로 하는 것에 대해서
굉장히 어려움을 많이 겪었습니다.

그래서 여러가지 시행 착오 끝에
플럭스라는 것이 등장하고,
그리고 궁극의 방법이라고 할 수 있는
그리드라는 것까지 도착했거든요.

그래서 이번 시간에는 아주 최근에 등장한 기술인 그리드를 이용해서
방금 말씀드린 그 목적을 달성해 보겠습니다.

 

그럼 우리 파일을 하나 만들어서
그리드가 뭔지를 먼저 한번 살펴봐야겠죠

자, grid.html이란 파일을 만들었구요
이렇게 기본 파일을 만들고 이 파일을 열게요.

그리고 저는 두 개의 문자를 쓰겠습니다.

NAVIGATION
그리고 ARTICLE

이렇게 두 개의 문자를 썼는데요
이 각각의 문자에다가 테두리를 주고
저것들을 나란히 한 번 배치해 볼 거예요
그걸 하기 위해서는
여러분이 여기 있는 NAVIGATION과 ARTICLE이라는 저 정보를
각각 어떤 태그로 묶어 줘야 됩니다.

근데 우리는 단지 디자인을 하기 위해서,
즉, 디자인이라는 목적을 위해서
어떤 의미도 존재하지 않는 태그를 사용해야 될 때가 있습니다.

그럴 때 사용하라고 존재하는, 무색 무취 와 같은 태그가
바로 라는 <div> 태그입니다
division의 약자입니다.

아무런 의미가 없고 단지 디자인의 용도로만 쓰는 태그를 이렇게 감싸주면
보시는 것처럼 NAVIGATION과 ARTICLE이 이렇게 나오죠.

그리고 태그는 기본적으로 block level element이기 때문에 화면 전체를 씁니다.
그래서 줄바꿈이 된 것이구요.

같은 목적으로 사용하라고 고안된 태그가 하나 더 있는데
바로 <span> 이라는 겁니다
span은 inline element예요
여러분이 inline이 필요하냐,
block level element가 필요하냐에 따라서
이나 태그를 쓰면 되겠습니다.

그리고 그리드를 알아보기 위해서는
각각의 태그의 부피감을 확실하게 알 필요가 있습니다
그래서 저는 이 웹 페이지에 있는 모든 에
border:
border: 5px solid
border: 5px solid gray;
이렇게 했습니다
그럼 이제 부피감이 좀 더 명확해지겠죠

그럼 여기 있는 이 두 개의
NAVIGATION과 ARTICLE이라고 하는 요소를
나란히 놓기 위해서 최신 방법인 그리드를 쓸 겁니다.

그걸 하기 위해서는
이 두 개의 태그를 감싸는 부모가 필요해요
저는 부모 태그를 하나 만들 겁니다
이렇게 <div>

그 다음에 부모 태그에다가 ID를 줄게요
grid라는 id 값을 주겠습니다.

저 id 값은 아무거나 하셔도 돼요
그리고 저는 이 웹 페이지에서 id 값이 grid인 태그에 대해서
pink를 주겠습니다.

즉, 여러분이 이 두 개의 태그를
나란히 배치하고 싶거나 어떤 배치를 하고 싶으면
그것을 감싸는 부모 태그가 필요합니다.

그래서 제가 디자인의 목적만으로
이 <div id = "grid">라는 태그를 만든 거예요.

그럼 이제 준비가 끝났습니다
어떻게 해야 되냐면 display 기억나세요?
block level element, inline 또는 none 이런 걸 통해서
어떤 태그가 표시되는 방법을 완전히 바꾸는
매우 중요한 속성이었습니다.

display 속성에 grid라고 하는 속성을 쓰면
어떻게 되냐면
아무런 변화가 없습니다
그 다음에
이렇게 되죠
하지만 grid를 쓰고 grid-template

그리고 우리는
NAVIGATION과 ARTICLE이라는 것을 하나의 칼럼에 배치하고 싶잖아요
그럼 여기서
columns를 선택해서
여기에다가
첫 번째 칼럼은 네비게이션으로 하고 싶어요 저는
그러면 여기에다가 예를 들면
첫번째 칼럼은 150픽셀 정도의 부피를 갖고
이 ARTICLE이라고 하는 칼럼은
나머지 공간을 다 쓴다,

그러면 1fr이라고 합니다

이 상태에서 제가
이렇게 해보면 ARTICLE 영역은 자동으로 커지고
NAVIGATION은 150픽셀이라고 하는 사이즈를
고정적으로 갖게 됩니다
그럼 여기있는 1fr 이라고 하는 것이 무엇이냐면
저걸 제가 1fr로 이렇게 하게 되면
2개는 같은 크기가 됩니다
(이걸 조금 축소할게요)
그리고 여기 앞에 있는 것을 2fr로 하면
화면 전체를 3fr이라고 했을 때
NAVIGATION은 2만큼 ARTICLE은 1만큼
화면 전체를 쓰게 자동으로 조정되는 단위가
fr이라고 일단 생각하시면 되겠습니다

그리고 grid를 사용하면 좋은 것이,
여기 있는 ARTICLE이라고 되어 있는 부분에 제가
의미없는 텍스트를 한번 이렇게 넣어볼게요
아무 의미없는 텍스트입니다
보시는 것처럼 여기 있는 이 텍스트가 많아짐에 따라서
자동으로 커지고
왼쪽에 있는 NAVIGATION element도
NAVIGATION을 감싸고있는 태그 역시도
자동으로 커진다 라는 뜻이죠

자, 이번 영상에서는
우리가 grid를 어떻게 쓰면 되는지에 대해서 살펴봤구요
다음 영상에서 grid를 진짜로 우리의 웹사이트에
적용해서 레이아웃을 완성해 봅시다