<grid>
-div: 아무런 의미가 없고, 디자인의 용도로만 사용하는 태그
-block level element(화면 전체 사용)
-span: div와 같이 아무런 의미가 없고, 디자인의 용도로만 사용하는 태그
-inline element(자신의 크기만큼만 공간 차지)
→ 둘의 차이는 block level element vs inline element
→ 두 개의 태그를 나란히 배치하는 등의 특정한 배치를 하고 싶으면, 그것을 감싸는 부모 태그가 필요하다.
이 예시에서는 디자인의 목적만으로 <div id=”grid”>라는 부모 태그를 만든 것이다.
→ display:grid; //부모 태그 grid의 display값을 grid로 지정.
→ grid-template-columns 150px 1fr; //NAVIGATION과 ARTICLE을 두 개의 column(열)에 배치 (=같은 가로줄에 배치).
이때, NAVIGATION 태그는 150px 크기로, ARTICLE 태그는 나머지 공간(1fr)을 모두 차지하는 크기로 설정.
→ grid-template-columns 2fr 1fr; //NAVIGATION과 ARTICLE을 두 개의 column(열)에 배치.
이때, NAVIGATION 태그와 ARTICLE 태그는 2:1의 비율로 둘이 합쳐 화면 전체를 차지.
→ grid는 텍스트의 양이 많아짐에 따라 자동으로 크기가 커지고, 왼쪽의 NAVIGATION 태그도 같이 커진다.
<grid 활용>
1) ol 태그와 CSS의 내용이 담긴 태그를 한 가로줄에 좌우로 배치하는 것이 목표
- 제목 CSS와 그 내용을 div 태그를 이용해 한 덩이로 묶어준다.
- 두 태그가 너무 독립적이므로 둘을 묶어줄 필요가 있다. 이때, 의미도 없고 기능도 없는 div 태그로 둘을 묶어준다.
- 두 태그를 묶은 div 태그에 id값 “grid”를 지정한다.
- #grid {
display:grid;
grid-template-columns:150px 1fr;
}
//id가 grid인 태그에 대해서 display값 grid 지정, ol 태그 column은 150px, CSS 태그 column은 나머지 공간 차지하게 지정.
grid를 이용해 ol 태그와 CSS 내용이 담긴 div 태그를 좌우로 배치 완료.
2) 박스 설정을 통해 정돈하기
- #grid ol {
padding-left:32px;
}
// grid id 아래에 존재하는 ol 태그의 왼쪽 padding 값을 32px로 지정해 여백 생성.
- #grid #article {
padding-left:25px;
}
// grid id 아래에 존재하는 article id의 왼쪽 padding값을 25px로 지정해 여백 생성.
+) 이 id값 article은 CSS 제목과 내용을 묶어준 div 태그에 지정해준 것
