[CSS]3.그리드(grid)

@@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@

 

@@@@@@@@10강~11강@@@@@@ 그리드 소개 및 써먹기

[1]그리드 기본 (가장 최신 굳굳)

“실습에서 본문 내용을 오른쪽으로 배치시키기 위함”

(1)div 태그

-아무런 의미가 없고, 단지 디자인을 위한 태그 (기본적으로 블록레벨 element)

(2)span 태그

- div와 동일한데 인라인 element임

(3)grid 속성

Ex)

display:grid;

Grid-template-columns: 150px 1fr;

Cf)fr

화면전체에서 어느정도 사용할지.

아래 예시에서 navagation은 105px, article은 1fr

만약 2fr 1fr하면 > navagation은 3분의2, article은 3분의1을 사용함

 

 

또한 만약 article에 더 긴내용 채우면 > 자동으로 영역 조정됨

 

Cf) https://caniuse.com/ 사이트: 해당 css 속성 등 현재 사용해도 되는 버전인지 확인

 

 

[2]그리드 사용해보기

(1)grid 기본

Body내 본문을 div로 묶고, 그위 ol태그까지 div로 묶고 > 상위 div태그에 id값 지정 > css에서

grid코딩

 

 

 

(2)다듬기

- 여백 등 다듬기