CSS 연습해보기 - <div> 태그

그리드 - 생활코딩

그리드의 기본 사용법 강의 caniuse 홈페이지 소스코드 변경사항 그리드 써먹기 강의 소스코드 변경사항 Grid 기능의 호환성 https://caniuse.com/#feat=css-grid

opentutorials.org

division의 약자로서

단순히 디자인을 적용할 부분을 지정하는 용도로 사용하는 태그.

기본적으로 display : block;

-> 해당 줄을 전부 사용한다.

따라서 줄바꿈이 된다.

cf. 반대로 스팬 태그는 inline

<span> - display : inline

block : <div> 
inline : <span>

ex)

- 글 태그의 부피감을 확인해보기

border : 5px solid gray;

- grid 태그 확인해보기

- 핑크색 border로 부피확인하기.

- grid로 display속성 설정

첫 번째 컬럼은 150px,

두 번째 컬럼은 나머지 공간 전부 사용하기. - 1fr

fr: 화면을 비율로 나누기.

ex) 2fr 1fr : 화면을 2:1로 나눔

#grid{
  border:5px solid pink;
  display:grid;
  grid-template-columns: 150px 1fr;
  }

<div id="gird>...</div>

* grid는 최신 기술이므로

어떤 브라우져의 어떤 버전에서 사용되는 지 확인 후, 적절하게 사용해야 한다.

이렇게 최신 기술을 사용할 때, 브라우져에서 인식이 되는지 확인할 수 있는 사이트가 있다.

캔 아이 유즈 caniuse

See the Pen YzyLaoY by PSK (@psklog) on CodePen.

paku_dev