[CSS] Grid과 CSS Unit

Grid

Flex는 1차원(한 방향)의 레이아웃 시스템을 제공하지만  Grid는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.

Flex와 동일하게 Container, item이 필요합니다.
- 부모요소 : Grid Container
- 자식요소 : Grid item

.container {
	display: grid;
}

출처:https://studiomeal.com/archives/533

Grid 용어 정리

출처:https://studiomeal.com/archives/533

• 그리드 트랙 (Grid Track)
  2개의 그리드 라인 사이 공간을 말합니다. 이 공간은 수평/수직 방향 모두를 말합니다.
• 그리드 셀 (Grid Cell)
  Grid를 구성하는 단일 유닛(single unit)을 말합니다.
• 그리드 라인(Grid Line)
  Grid를 행(rows)/열(columns)로 나누는 수평, 수직 선을 말합니다.
• 그리드 번호(Grid Number)
  Grid 라인의 각 번호입니다.
• 그리드 갭(Grid Gap)
  Grid 셀 사이의 간격입니다.
• 그리드 영역(Grid Area)
  Grid 라인이 감싸는 사각형 영역을 말합니다. Grid 영역은 여러 개의 Grid 셀을 포함할 수 있습니다.

 

그리드 형태 정의 (grid-template-rows, grid-template-columns)

.container {
	grid-template-columns: 1fr 1fr 1fr
	grid-template-rows: 1fr 1fr 1fr
}

- grid-template-rows는 행(row)의 배치
- grid-template-columns는 열(column)의 배치

※ fr(fraction) : 숫자 비율대로 트랙의 크기를 나눈다.

간격 만들기(row-gap, column-gap, grid-gap)

.container {
	row-gap: 10px;
	/* row의 간격을 10px로 합니다. */
	column-gap: 10px;
	/* column의 간격을 10px로 합니다. */
    gap: 10px 10px;
	/* 첫번째 인자는 row 두번째 인자는 column 으로 
    row-gap: 10px; column-gap: 10px; 과 같습니다.*/
    grid-gap: 20px;
	/* 인자 1개만 입력시 
    row-gap: 20px; column-gap: 20px; 와 같습니다*/
}

Grid order(배치 순서)

Grid item을 배치하는 순서를 결정합니다.

• 각 아이템들의 시각적 순서를 결정하는 속성입니다.
• 작은 숫자일 수록 먼저 배치합니다.
• 화면에 보이는 시각적인 순서만 바꾸는 것입니다.

A - B - C → B - C - A
스크린리더 img art를 사용하는 시각장애를 가지신 분들이 순서가 바뀌어도 상관이 없는 아이템을 배치할 때 사용합니다.

Grid area(영역 이름으로 그리드 정의)

Grid 사용시, 영역에 이름을 만들어서 배치할 수 있다.

.container {
	grid-template-areas:
		'header header header'
		'aside-a main aside-b'
		'footer footer footer';
}

위의 형태로 각자 차지하는 셀의 개수만큼 해당 위치에 이름을 써주면 된다.

object-fit(콘텐츠 크기 조절)

img, video 요소의 콘탠츠 크기를 어떤 방식으로 조절해서 맞출 것인지 지정합니다.

.container {
	object-fit: fill;
}

object-fit 값

1. fill : 기본값. 요소의 크기에 맞게 꽉 채운다. (가로 세로 비율이 맞지 않는다.)

2. contain : 요소의 가로와 세로 크기에 딱 맞춰서 사이즈를 조절한다. (비율이 고정되어 있어서 공간이 남을 수도 있다.)

3. cover : 요소의 가로, 세로 크기에 딱 맞춰서 사이즈를 조절한다. (비율 고정. 채울 때 까지 확대한다.)

4. none : 크기 조정을 안하고 원본 사이즈로 처리한다. (크면 자르고 작으면 남는다.)

함수

 

1. repeat 함수

반복되는 값을 자동으로 처리할 수 있는 함수입니다.

.container {
	grid-template-columns: repeat(3 1fr);
}

repeat(반복횟수, 크기);

2. minmax 함수

최솟값과 최댓값을 지정할 수 있는 함수입니다.

.container {
	grid-template-rows: repeat(3, minmax(50px, auto));
}

---

CSS Unit

1. 절대 단위

Container의 사이즈가 변경되어도 콘텐츠가 고정된 값을 유지합니다.

단위 : px

2. 상대 단위

텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되어 값이 유동적입니다.

- 단위 : %, em, rem, v*

1.  V* : view port와 관련된 단위(vw, vh)
2. em : 폰트 사이즈를 나타내는 단위 (폰트 패밀리에 상관 없이 고정된 폰트 사이즈를 가지고 있다.)
ex) 브라우저의 기본 (font size: 16px) → 8em = (16 * 8)px(=128px)
3. rem (r = root) : 부모 요소가 아닌, root에 따라서 크기가 결정된다.
4. vw, vh
- 100vw = 뷰 포트 너비의 100% 사용하겠다.
- 100vh = 뷰 포트 높이의 100% 사용하겠다.
5. vmin, vmax
- 50vmin = 뷰 포트의 너비와 높이 중, 작은 값의 50% 사용하겠다.
- 50vmax = 브라우저의 너비와 높이 중, 큰 값의 50% 사용하겠다.