1. CSS 그리드 레이아웃
- 행과 열이 있는 그리드 기반 레이아웃 시스템으로 웹 페이지를 더욱 쉽게 디자인 할 수 있도록 돕는다.
- Flex는 한 방향 레이아웃 시스템(1차원)이고, Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)이다.
- Grid 레이아웃을 만들기 위한 기본적인 HTML구조는 Flex와 마찬가지로, 컨테이너(container)와 아이템(item)으로 구성된다.
- 부모(컨테이너)의 변경으로 자식 요소의 배치를 바꿀 수 있어 반응형 웹에 활용할 수 있다.
fr단위를 사용하여 비율 관리를 할 수 있다. (%와는 다름)
❗️그리드 레이아웃을 지정하기 위해 먼저 알아야 할 것
- 디자인적인 목적만을 위해서 어떤 의미도 존재하지 않는 태그를 묶어야하는데 그 태그가
<div>태그와<span>태그이다. 이미 앞에서도 다뤘지만 한번 더 정리하자면,
(1) div(Division)
:block-level element. 주로 전체적인 레이아웃을 잡는데 사용된다.
한 개의 가로 공간(block)을 만드는 태그로, 상하 여백 없이 한 줄에 한 공간을 차지하게 된다. 고정적인 공간 사이즈를 가지고 있지 않다.(웹 브라우저 창을 줄이면 공간을 유지한 채로 사이즈만 줄어든다.)
(2) span
: inline-level element. 주로 내용 안의 특정 부분을 강조하거나 제어하기 위해서 사용된다.
자신에게 주어진 공간만을 차지하는 태그로, 연달아 사용하면 가로로 배열된다. inline레벨 요소로써 width와 height 조절이 불가능하다.
(3) p
: block-level element. 주로 내용을 입력하는 곳에 사용된다.
자체적으로 'margin'값을 가지고 있어서 p 태그 사이에 여백이 존재한다. div와 마찬가지로 고정적인 공간 사이즈를 가지고 있지 않다.
- fr
: 유연한 크기를 갖는 단위이다. 그리드 컨테이너 내의 공간 비율을 분수로 나타낸다.ex) 다음과 같이 작성할 수 있다. .seul { display: grid; grid-template-columns: 1fr 1fr; } ▼ HTML, CSS <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { border:5px solid gray; } #seul{ border:5px solid pink; display:grid; grid-template-columns: 150px 1fr; } </style> </head> <body> <div id="seul"> <div>NAVIGATION</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque laudantium maxime sequi provident aspernatur eaque minus aliquid eveniet quisquam odio? Incidunt eaque architecto fugit, unde consequatur veniam quaerat ipsa quas.</div> </div> </body> </html>▼ result
▶
grid-template-columns에서id="seul"의div내용의 'NAVIGATION'은 '150px'을 쓰고 Article을 나머지 공간(전체'1fr'의 '1fr')을 다 쓰고 싶다의 의미이다.
만약, '2fr 1fr'로 지정하면 화면전체를 '3fr'이라고 봤을때 'NAVIGATION'이 2/3만큼 차지하게 될 것이다.
2. 컨테이너(container) 속성
- 컨테이너
: 레이아웃은 가상의 격자에 요소를 배치한다. 여기서 컨테이너는 배치할 요소들을 감싸는 부모 요소가 된다. - 컨테이너에 부여한 속성은 아이템에 일괄적용된다.
display속성을 사용하여 컨테이너를 그리드로 만드는 것으로 시작한다.
3. 템플릿(template) 속성
- 행(row)과 열(column)로 나누어서 크기와 이름을 정한다. 기본값은 auto이다.
grid-template-columns속성과grid-template-row속성을 사용한다.
3-1. grid-template-columns 속성
- 열의 개수와 폭을 지정한다.
- 속성 값의 개수 = 열의 개수 / 속성의 값 = 열의 너비
(개수가 넘어가면 행이 바뀐다.)
▼ HTML, CSS <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { border:5px solid gray; } #seul{ border:5px solid pink; display:grid; grid-template-columns: 150px 40% auto; } </style> </head> <body> <div id="seul"> <div>NAVIGATION</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque laudantium maxime sequi provident aspernatur eaque minus aliquid eveniet quisquam odio? Incidunt eaque architecto fugit, unde consequatur veniam quaerat ipsa quas.</div> <div>item</div> <div>item</div> <div>item</div> </div> </body> </html>▼ result
속성 값의 개수를 3개로 작성했기 때문에 3열이다!
3-2. grid-template-row 속성
- 행의 높이를 정한다.
- 첫번째 값이 1행의 높이라면 2번째 값은 2행의 높이이다.
- 행의 개수가 지정되지 않았다면,
grid-auto-rows를 사용할 수 있다. (행의 개수가 늘거나 줄어도 일정한 값을 적용받지만, 특정 브라우저에서는 작동이 안 될 수도 있다.)
▼ (HTML) CSS <style> div { border:5px solid gray; } #seul{ border:5px solid pink; display:grid; grid-template-columns: 1fr 2fr; grid-template-rows: 120px 1fr 2fr; padding: 5px } </style>▼ result
3-3. repeat 속성
- 반복되는 값을 편리하게 설정할 수 있다.
ex) 다음과 같이 작성할 수 있다. .seul { display: grid; grid-template-columns: repeat (3, 1fr);} = 1fr 1fr 1fr ▼ HTML, CSS <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { border:5px solid gray; } #seul{ border:5px solid pink; display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 5px } </style> </head> <body> <div id="seul"> <div>NAVIGATION</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque laudantium maxime sequi provident aspernatur eaque minus aliquid eveniet quisquam odio? Incidunt eaque architecto fugit, unde consequatur veniam quaerat ipsa quas.</div> <div> item </div> <div> item </div> <div> item </div> <div> item </div> <div> item </div> <div> item </div> </div> </body> </html>
3-4. grid-gap 속성
- 그리드 아이템 사이간의 간격을 정한다.
column-gap
: 열 사이의 간격을 지정한다.grid-column-gap의 단축형이다.row-gap
: 행 사이의 간격을 지정한다.grid-row-gap의 단축형이다.grid-gap
: 행과 열의 간격을 동시에 지정한다.
grid-gap : 10px 30px과 같이 연속하여 적을 경우 첫번째 값은 행 간격, 두번째 값은 열 간격 값이된다.
4. 아이템(item) 정렬
-
oder속성으로 아이템의 순서 변경이 가능하다. (직접적으로 문서 구조가 바뀌는 것은 아니다.)
❗️필요할때 사용해봐야겠다! -
justify-items은 아이템 가로축 정렬방식을 지정한다.
:justify-items: end;처럼 사용가능하다. (start, end, center, stretch) -
align-items은 아이템 세로축 정렬방식을 지정한다.
:align-items: start;처럼 사용가능하다. (start, end, center, stretch)
- 최신 CSS기술을 사용하기 위해서는 그것을 사용해도 되는지, 안되는지 데이터에 근거하여 사용 할 필요가 있다. 이때 도움이 되는 사이트 !! (여러 HTML, CSS, JS의 기술들 중에서 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가에 대한 통계를 내준다.)
기억보단 기록을 ✨