[CSS] BOX MODEL, <div>, <gird>

1. BOX MODEL

 - Block Level Element: 화면 전체를 사용하는 태그

  * ex tag) <h1>, etc..

  ** display 속성을 통해 Inline Element로 변경 가능

 

 - Inline Element: 적용된 컨텐츠 영역만 사용하는 태그

  * ex tag) <a> tag, etc..

  ** display 속성을 통해 Block Level Element로 변경 가능

 

See the Pen CSS - block, lnline by hbkuk (@hbkuk) on CodePen.

 

 

2. CSS 속성 정리

 - 중복되는 속성을 간략하게 정리

 

See the Pen CSS - 중복 정리 by hbkuk (@hbkuk) on CodePen.

 

 

3. CSS 적용을 위한 무색/무취인 태그

 - division의 줄임말로, 디자인을 위한 <div> 태그

  * Block Level Element

 

 - 기간, 폭을 뜻하는 영어단로, 태그로서 가지는 의미는 가상의 공간

  * Inline Element

 

See the Pen CSS - div, span 태그 by hbkuk (@hbkuk) on CodePen.

 

 

4. grid 적용

 - <div> 또는 <span> 태그를 사용해서 단락을 나눈 후 display 속성을 이용해서 나란히 배치가 가능

display: grid;       grid-template-columns: 100px 1fr;

  * fr의 의미: 그리드 트랙 사이즈로 사용 되는 단위로, 여유 공간을 비율로 나눠 설정

See the Pen CSS- grid by hbkuk (@hbkuk) on CodePen.

선택자를 쓸 때도 선택자가 많아지면 어떤 것을 그리드 하는지 헷갈릴 수 있음.
따라서 #grid ol 이런 식으로 그리드 뒤에 선택자를 붙여줘서 구분.

별첨.  

 - 구체화하는 작업에서 선택자의 수량이 많아짐에 따라 CSS 적용이 어려울 수 있음.

 - 이때는 자세하게 작성해서 진행할 것.

  *ex) #grid ol →  웹페이지 상 ol 중 부모가 grid인 태그에만 적용한다.