[생활코딩] WEB2 - CSS (그리드)

<div> : block level

<span> : inline

두개의 div를 감싸는 부모태그가 필요. 나란히 배치시키고 싶을때 부모태그가 필요하다.

<div> 부모태그
  <div>
  </div>
  <div>
  </div>
</div>

오직 디자인만을 위해서 id가 grid인 div태그를 만든것

그리드 템플릿을 쓰기 위해서 display:grid를 주는 것이 첫번째! 패딩, 마진만 주는 것은 굳이 그리드라고 안줘도 된다.

<div id = "grid">
  display:grid;
  grid-template-cloums: 150px 1fr;
  padding: 10px;
  margin: 20px;
</div>

 

2fr 1fr이라고 하면 전체를 3으로 뒀을 때 navigation은 2만큼 article은 1만큼 사용.

150px 1fr이라고 하면 navigation이 150px만큼 나머지를 모두 article이 사용한다.

 

"id가 grid인 div태그 안에 있는 ol태그에 속성을 주고 싶다" -> #grid ol { ... }

 

*TIP) 최신기술을 사용할 때 쓸 수 있는지 확인하려면 caniuse.com을 들어가자!