[5주차] 1. CSS의 Grid container & item 속성

Grid

• 2차원(행이라는 차원과 열이라는 차원 제공)의 레이아웃 시스템 제공
• flexible box: 1차원의 레이아웃을 위하며 grid보다 쉽고 빠르게 제공 가능하지만 다차원의 레이아웃 잡는데는 무리가 있다. 그래서 복잡한 레이아웃을 위해 grid 사용
• 예전부터 핵(hack)이라고 불리는 다양한 레이아웃 대체 방식 해결 위해 만들어진 특별한 css 모듈(예전에 레이아웃을 잡기 위해서는 table 코딩, float 이용한 정렬방식, position 방식, flexible box를 많이 사용했었는데 그것들을 다 대체할 수 있게 완벽히 해결할 수 있는 레이아웃 잡는방식이 grid이다.)
• grid를 통해 고차원적으로 레이아웃 완성 가능
• 대치의 개념과 정렬의 개념을 동시에 가지고 있다.
• 파이어 폭스 브라우저 사용 추천(grid 학습시) : 파이어 폭스 개발자 도구 사용시 grid라는 개념을 만들어놓고 그 안에 있는 선의 이름 등의 전체적인 구조를 조금 더 쉽고 이해하기 쉬운 형태로 시각적으로 확인 가능
• gird properties : flex와 유사하게 container(부모)라는 개념과 item(자식)이라는 개념 두가지로 구분되어 있다. 그래서 container에만 부여해야 하는 속성과 item에만 부여해야 하는 속성이 정해져 있다.
• 파이어 폭스 개발자 도구에서 grid 적용된 요소를 선택 도구로 선택하면 이렇게 나옴. 이때 grid 적용된 코드 오른쪽에 있는 grid 버튼 클릭시 몇 개의 행을 갖고 있고 몇 개의 열을 갖고 있는지 시각적으로 표시해줌(브라우저 화면 크기 %가 높아야 행과 열의 개수가 잘 표시됨)

html

css

grid 버튼 눌렀을 때 브라우저 상에 표시

---

grid containers

• grid container의 자식요소들은 모두 grid item이 된다.

1. display

• grid container 정의할 때 사용
• 이 속성에 아래 값들이 부여되어 있을 경우 grid container로 정의됨
• grid : block 특성의 grid container 출력(container 전체가 위에서부터 아래로 수직으로 쌓이는 정렬방식)
• inline-grid: inline 특성의 grid container 출력(container 전체가 왼쪽에서부터 오른쪽으로 수평으로 쌓이는 정렬방식)

2. grid

• grid-template-xxx, grid-auto-xxx의 단축 속성
• 이 단축속성을 이용해 좀 더 쉽게 template과 명시적 열과 행, 암시적 열과 행을 정의할 수 있다.
• grid-template 문법과 동일
• grid : grid-template;
• grid : rows에 대한 개념 정의 / columns에 대한 개념 정의;
• grid : grid-template-rows / grid-template-columns
• grid-auto-flow 작성
  • auto-flow 키워드 사용
  • / 로 구분해서 row / column 의미
  • grid : grid-template-rows / grid-auto-flow:columns grid-auto-columns;
    ex) grid : 100px 100px(grid-template-rows: 100px 100px;) / auto-flow(grid-auto-flow:column;) 150px(암시적 열 지정 grid-auto-colulmns: 150px;);
  • grid : grid-auto-flow:rows grid-auto-rows / grid-template-colulmns;
    ex) grid : auto-flow(grid-auto-flow:row;) 150px(암시적 행 지정 grid-auto-rows: 150px;)/ 100px 100px(grid-template-columns: 100px 100px;)
• dense 키워드 사용
  ex) grid : auto-flow dense(grid-auto-flow:row dense;) 150px(암시적 행 지정 grid-auto-rows: 150px;)/ 100px 100px(grid-template-columns: 100px 100px;)

3. grid-auto-flow

• 배치한 item 제외한 자동 정렬되는 배치하지 않는 item들이 어떠한 방식의 자동 배치 알고리즘(빈영역 메움의 여부 결정)으로 처리할지 정의
• 수평정렬과 수직정렬과 굉장히 유사
• dense라는 값이 붙을 경우 빈 곳이 있을 때 채울 수 있는(가장 먼저 만들어진 item들 중) item들을 통해서 차례대로 채워나감(빈영역 메움)[속성 값]
• row : 기본 값으로 각 행의 축(왼쪽에서 오른쪽, 수평축)을 따라 차례로 배치, 흐름 자체를 수평으로 흐르게 하겠다, 지그재그(Z)로 정렬
• column: 각 열 축(위에서 아래, 수직축)을 따라 차례로 배치,И형식으로 배치
• row dense(dense): 각 행 축을 따라 차례로 배치, 빈 영역 메움
• column dense: 각 열 축을 따라 차례로 배치, 빈 영역 메움

4. grid-template

• grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성
• grid-template-rows, grid-template-columns 제공하는 개념
• grid-template : grid-template-rows / grid-template-columns;
• grid template-areas 제공하는 개념
• grid-template : grid template-areas;
• grid-template : “1행이름 1행이름 1행이름” 행너비 “2행이름 2행이름 2행이름” 행너비 “3행이름 3행이름 3행이름” 행너비 / 열의크기 열의크기 열의크기;

5. grid-template-areas

• grid-area에서 지정된 grid 영역 이름을 참조해서 grid template 생성
• 각각의 cell의 이름 지정
• 각각의 행과 열의 크기를 지정할 때는 grid-template-rows와 grid-template-columns가 필요할 수 있다.
• “”으로 행 구분, 띄어쓰기로 열 구분, .(점)은 영역 이름이 없는 빈칸
• grid-template-areas: "header header header" "main . aside" ". footer footer" ;

[명시적 행과 열의 크기를 정의하는 속성]

• 동시에 Line의 이름(line의 번호에 지정하고 싶은 특정한 이름 설정 가능)도 정의 가능
  • 선 이름 설정시 크기 앞이나 뒤(사이 사이마다)에 [선이름] 작성, [선이름 선이름]일시 두 선이름 모두 사용(여러 개 이름 중복 사용 가능, 즉 선 한 개를 이름 두개 이상으로 쓸 수 있다는 것)
  • 중요하게 사용되는 선이 아니면 매번 명시할 필요는 없다. 오히려 선 이름을 매번 명시하는 것이 더 복잡하다.
  • “”가 들어가지 않는다.
    ex) grid-template-rows: [first] 100px [second] 200px [third]; 1번째 선 이름은 first
• fr: container 전체 비율 의미 ex) grid-template-rows: 1fr 1fr; 1대1 비율로 행 두개 생성
• repeat(반복횟수, 반복할 크기의 단위)
  • 5개 이상 혹은 10개 이상 등 많은 행과 열을 만들어내다 보면 입력하면서 행과 열의 개수를 실수를 할 수 있다 그래서 유연하게 처리하기 위해 repeat( ) 사용
  • 특정한 하나의 값만 반복하는 것이 아니라 repeat의 두번째 인수가 반복하는 것이기 때문에 여러 개의 값(띄어쓰기로 구분)이 반복할 수 있다.
  • 첫번째 인수는 특정한 반복 패턴이 반복되는 횟수, 두번째 인수는 특정한 반복 패턴
    ex) grid-template-rows: repeat(3, 1fr); 1fr크기의 행 세개 만들어냄
    grid-template-rows: repeat(4, 100px 200px 50px); 100px 200px 50px 4번 정의

1. grid-template-rows

• grid-template-rows : 첫행크기 두번째행크기 세번째행크기 …;
• 명시적으로 행(track)의 개수, 크기 정의
• 행 만들어내는 속성

2. grid-template-columns

• grid-template-rows : 첫열크기 두번째열크기 세번째열크기 …;
• 명시적으로 열(track)의 개수, 크기 정의
• 열 만들어내는 속성

[Grid line 크기 지정하는 속성]

• 사실상 간격보다는 선의 두께(크기)가 달라진 개념
• grid-는 폐기되어서 앞에 붙일 필요 없지만 일부 브라우저에서는 아직도 grid-를 붙여서 사용하기 때문에 붙여야 되는 경우도 간혹 있다.

1. gap(grid-gap)

• row-gap과 column-gap의 단축속성
• 행과 행 사이, 열과 열 사이의 간격을 아우르는 단축속성
• 띄어쓰기로 구별
• gap: row-gap column-gap;

2. row-gap(grid-row-gap)

• 행과 행 사이의 간격(gutter) 지정

3. column-gap(grid-column-gap)

• 열과 열 사이의 간격(gutter) 지정

[암시적 행과 열의 크기를 정의하는 속성]

• 명시적 행과 열 밖에 배치될 경우 크기를 제대로 가질 수 없는 상황에서 grid-auto-rows와 grid-auto-columns를 활용해서 명시적 행과 열 밖에 배치된 요소의 크기를 즉 그 배치된 요소가 있는 행과 열의 크기를 설정할 수 있다.
• 암시적 행과 열 : 명시하지 않았는데 만들어지는 행과 열
• 암시적 행과 열의 너비를 지정해놓으면 grid-row와 grid column으로 배치 가능
• 특정한 item을 원하는 특정한 암시적 행과 열에 배치할 수 있고 배치하면서 늘어난 중간의 행과 열도 암시적 행과 열의 크기에 영향을 받게 된다.
• item이 배치되는 위치에 맞게 암시적 행과 열의 개수가 생성됨. 이렇게 자동으로 늘어난 암시적 행과 열에서는 음수를 사용할 수 없고 양수만 사용 가능하다.(음수는 명시적 행과 열에서만 사용 가능하다)

1. grid-auto-rows

• 암시적 행(track)의 크기 정의

2. grid-auto-columns

• 암시적 열(track)의 크기 정의

[grid contents 정렬]

• grid contents : grid 안에 들어있는 모든 contents 들

1. align-content

• grid contents 수직(열 축) 정렬
• grid contents의 세로 너비가 grid container의 세로 너비보다 작아야 함
• [값]
• normal : 기본값으로 stretch와 동일하다.
• start : 시작점(위쪽) 정렬
• center: 수직 가운데 정렬
• end : 끝점(아래쪽) 정렬
• space-around : 각 행 위아래에 여백을 고르게 정렬, 각각의 행이 위와 아래에 남는 공간의 동일한 여백을 나눠서 갖고 있는 것
• space-between: 첫 행은 시작점에 붙이고 끝 행은 끝점에 붙인 다음 나머지 여백은 균등하게 분배해서 사용
• space-evenly: 행 사이 모든 여백의 크기를 모두 동일한 여백을 가지는 것
• stretch: 수직 축에 최대한 늘려서 사용하는 것

2. justify-content

• grid contents 수평(행 축) 정렬
• grid contents의 가로 너비가 grid container의 가로 너비보다 작아야 함
• [값]
• normal : 기본값으로 stretch와 동일하다.
• start : 시작점(왼쪽) 정렬
• center: 수평 가운데 정렬
• end : 끝점(오른쪽) 정렬
• space-around : 각 열 좌우에 여백을 고르게 정렬, 각각의 열이 왼쪽와 오른쪽에 남는 공간의 동일한 여백을 나눠서 갖고 있는 것
• space-between: 첫 열은 시작점에 붙이고 끝 열은 끝점에 붙인 다음 나머지 여백은 균등하게 분배해서 사용
• space-evenly: 열 사이 모든 여백의 크기를 동일한 여백을 가지는 것
• stretch: 수평 축에 최대한 늘려서 사용하는 것

[grid item 정렬]

• 각각의 자신을 포함하는 cell(칸) 안에서 정렬됨
• 각각의 칸 안에 들어있는 item들의 크기가 좀 작을 때 그 칸 안에서 어떻게 정렬할 지 설정

1. align-items

• grid item들을 수직(열 축) 정렬
• grid item의 세로 너비가 자신이 속한 grid 행(track)의 크기보다 작아야만 이 속성 사용 가능(그래야 그 행 크기 안에서 정렬 가능)
• [값]
• normal : 기본값으로 stretch와 동일하다.
• start : 시작점(위쪽) 정렬
• center: 수직 가운데 정렬
• end : 끝점(아래쪽) 정렬
• stretch: 수직 축에 grid item을 최대한 늘려서 사용하는 것

2. justify-items

• grid item들을 수평(행 축) 정렬
• grid item의 가로 너비가 자신이 속한 grid 열(track)의 크기보다 작아야만 이 속성 사용 가능(그래야 그 열 크기 안에서 정렬 가능)
• [값]
• normal : 기본값으로 stretch와 동일하다.
• start : 시작점(왼쪽) 정렬
• center: 수평 가운데 정렬
• end : 끝점(오른쪽) 정렬
• stretch: 수평 축에 grid item을 최대한 늘려서 사용하는 것

---

grid items

1. grid-area

• 특정 grid 영역 이름을 지정, grid-template-areas가 참조할 영역 이름을 지정
• grid-area: 영역이름;
• grid-row와 grid-column을 아우르는 단축속성으로도 사용 가능
  • 영역 이름 설정하는 개념으로 사용될 경우 grid-row와 grid-column 개념은 무시됨
  • grid-area: grid-row-start / grid-column-start / grid-row-end /grid-column-end
• 주의사항 : row 시작하고 column 시작하는 것을 명시하고 row 끝남과 column 끝나는 것 순서로 명시함

2. order

• grid item이 자동 배치(정렬)되는 순서 변경 가능
• 기본값은 0으로 숫자가 작을수록 앞서 배치, 숫자가 클수록 뒤 배치
• 음수 사용 가능(0보다 작아서 앞쪽 배치됨)

3. z-index

• position이 부여된 곳 뿐만 아니라 grid가 부여된 곳에서도 사용 가능
• grid item들이 겹쳐져 있을 때 이 속성을 통해 쌓이는 순서를 결정할 수 있다.
• 기본값은 0이고 html이 작성된 순서 순대로 배치
• item이 쌓이는 순서 변경 가능(앞으로 나오거나 뒤로 숨거나)
• 숫자가 클수록 앞으로 나옴

[container 안의 item의 위치를 원하는 대로 배치할 때 필요한 속성]

• 설정한 칸을 제외한 나머지 칸들은 자동으로 남은 여백을 활용해 설정됨
• grid row와 grid column에 음수와 양수 동시 사용해서 grid container 안에 item 배치 가능
• 값이 /로 구분됨
• 값으로 시작지점의 선 번호(이름)/끝지점 선 번호(이름) 입력
• span 선의 개수
• span이 end 부분에 있을 경우 start 지점에서부터 선의 개수 만큼 칸 확장
• end 선 번호는 start 선 번호 + end의 span 숫자
  ex) 2/span 2 은 2번 선을 기준으로 2개의 선만큼 칸 확장
  , span 3은 현재 칸이 위치한 선부터 3개의 선만큼 칸 확장
• span이 start 부분에 있을 경우 start 선 번호 = end 선 번호 - start의 span 숫자
  ex) span 3 / 4은 4번 선부터 1(4-3)번 선(1번 선부터 4번 선)까지 칸 영역 차지

1. grid-row

• grid-row-start와 grid-row-end의 단축 속성
• 가로 줄 몇 번부터 몇 번까지 행이 차지할 것인지
• grid row: grid-row-start/grid-row-end;

2. grid-column

• grid-column-start와 grid-column-end의 단축 속성
• 세로 줄 몇 번부터 몇 번까지 열이 차지할 것인지
• grid-column: grid-column-start/grid-column-end;

[단일 grid item 수직 수평 정렬]

• grid item에 직접적으로 부여해주는 속성
• 각각의 item에 각각의 내용을 따로 줄 수 있다.
• 개별적으로 item 별로 속성 부여하고 싶을 때 사용

1. align-self

• align-item과 비슷한데 단일(하나의) grid item 수직(열 축) 정렬
• 각각의 item들이 가지고 있는 수직 정렬을 모두 다르게 줄 수 있다.
• grid item의 세로 너비가 자신이 속한 grid 행(track)의 크기보다 작아야 함
• [값]
• normal : 기본값으로 stretch와 동일하다.
• start : 시작점(위쪽) 정렬
• center: 수직 가운데 정렬
• end : 끝점(아래쪽) 정렬
• stretch: 수직 축에 grid item을 최대한 늘려서 사용하는 것

2. justify-self

• justify-item과 비슷한데 단일(하나의) grid item 수직(열 축) 정렬
• 각각의 item들이 가지고 있는 수평 정렬을 모두 다르게 줄 수 있다.
• grid item의 가로 너비가 자신이 속한 grid 열(track)의 크기보다 작아야 함
• [값]
• normal : 기본값으로 stretch와 동일하다.
• start : 시작점(왼쪽) 정렬
• center: 수평 가운데 정렬
• end : 끝점(오른쪽) 정렬
• stretch: 수평 축에 grid item을 최대한 늘려서 사용하는 것

---

Html과 CSS 작성

See the Pen grid by ssoyuni (@sssoyuni) on CodePen.

---

참고

• https://heropy.blog/2019/08/17/css-grid/