[CSS] grid 를 적용해보자 :: <div> 태그

문서의 레이아웃을 계산할 때, CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.

CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다. 박스모델을 보기 위해 개발자도구로 들어가보자.

 

CSS 기본 박스모델

 

하나의 박스는 네 부분(영역)으로 이루어진다.

각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부른다.

박스모델을 참고하여 HTML 문서에 그리드(grid) 를 적용해보자.

 

 

border dotted 효과를 주고 margin 을 줬다 뺏다, padding 을 줬다 뺏다.

 

 

아래 새로 배운 태그 <div> 를 이용해여, class 와 id 선택자를 여러개 만들었다.

여러 태그들을 하나의 class 로 묶고 그 class 에다가 효과를 주면 마치 그 태그들이 하나인 마냥 디자인이 적용된다.

 

 

---

<div> 태그

 

<div> 태그란 무색, 무취의 오직 디자인만을 위한 태그다.

<div> 태그을 이용해 여러 속성을 그룹핑 할 수 있다. 그리고 그 그룹에 일괄적으로 디자인 요소를 적용할 수 있다.

 

 

여러개의 div 가 포함 관계로 존재하기 때문에 코딩을 할 때 들여쓰기(tab) 을 잘 넣어야 헷갈리지 않을 것 같다.

HTML 문서가 좀 얼렁뚱땅으로 만들어졌을수도 있지만, 내가 원했던대로 구현은 되었다.

 

정렬된 index 페이지

 

오늘 배운 것 중에 가장 신기했던 것.

 

CSS grid 속성 중     {grid-template-columns = 어쩌구}

(ex) {grid-template-columns = 1fr 1fr} → div 내 div 태그가 2개 일때, 각 구역을 1:1 비율로 나눈다.

(ex) {grid-template-columns = 100px 1fr} → div 내 div 태그가 2개 일때, 왼쪽은 100px 로 고정 / 오른쪽은 남은 여백을 갖는다

 

div 태그가 3개 존재하면 각 구역을 1:1:1 비율로 나누기 위해, {grid-template-columns = 1fr 1fr 1fr} 

구역을 하나만 더 추가하면 된다.

 

 

내일은 index.html 외 나머지 페이지에도 그리드를 적용하고 깃허브에 커밋 예정 !