<CSS>생활코딩_그리드란?

https://www.youtube.com/watch?v=M1eQFIBY2vI&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=10 

* CC BY 생활코딩

 

• <div> </div> 태그

디자인 목적을 위해서 어떠한 의미도 없는 태그를 사용해야 될때가 있음 (무색무채와 같은 태그)

줄전체를 쓰는 block 태그이기 때문에 줄바꿈 적용됨.

 

• <span> </span> 태그

div 태그와 똑같은 목적으로 사용 되지만 inline 태그이다. (목적에 따라 사용 결정)

 

 

두요소( NAVIAGTION, ARTICE ) 를 나란히 놓기 위해서 gride 사용

그러기 위해서는 2개의 태그를 감싸는 부모가 필요함.

<div id="gride"> 부모에 태그에 gride 라는 id값을 줌 ( id값은 아무거나 지정 가능, 앞에 # 붙이는거 꼭 기억)

 

display: grid; 속성은 아무 변화가 없음 (그냥 공식처럼 써주는 듯?)

grid-template-columns:150px 1fr;     

└ navigation은 150px로 고정이되고 article만 자유롭게 커짐.

 

두 요소의 크기를 같게 해주고 싶으면 1fr을 써주면 됨

 

 

그리드 장점

장문의 텍스트를 넣으면 자동으로 커지면서 왼쪽에 있는 navigation element(요소)도 자동으로 커짐.

 

 

* 사이트 추천

현재 웹브라우저 유저들이 얼마나 그 기술을 채택하는지 통계 낸 사이트

ex) grid 검색시 전 세계 인구 95% 사용 가능