1분 코딩 및 네이버 부스트캠프 강의 관련 정리해봅니다. HTML과 CSS에서 놓치기 쉬운 포인트들을 복습하고 나아가 SCSS, 관련 애니메이션 등 확장적인 기능에 대하여 학습하고자 합니다.

CSS Grid

앞서 공부한 Flex와 지금 공부할 Grid의 큰 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원), Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 이라는 점입니다. 따라서 Flex보다 더 복합적인 레이아웃 표현이 가능합니다.

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

Flex와 마찬가지로, 컨테이너와 아이템이 있으면 됩니다. 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다.

.container {
	display: grid;
}

Flex와 마찬가지로, Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작합니다.

• 그리드 컨테이너 (Grid Container)
  display: grid를 적용하는, Grid의 전체 영역입니다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 됩니다. 위 코드 <div class=”container”></div>가 Grid 컨테이너에요.
  
  
• 그리드 아이템 (Grid Item)
  Grid 컨테이너의 자식 요소들입니다. 바로 이 아이템들이 Grid 규칙에 의해 배치되는 거에요. 위 코드에서 <div class=”item”></div>들이 Grid 아이템입니다.
  
  
• 그리드 트랙 (Grid Track)
  Grid의 행(Row) 또는 열(Column)
  
  
• 그리드 셀 (Grid Cell)
  Grid의 한 칸을 가리키는 말이에요. <div>같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 됩니다.
  
  
• 그리드 라인(Grid Line)
  Grid 셀을 구분하는 선입니다.
  
  
• 그리드 번호(Grid Number)
  Grid 라인의 각 번호입니다.
  
  
• 그리드 갭(Grid Gap)
  Grid 셀 사이의 간격입니다.
  
  
• 그리드 영역(Grid Area)
  Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합입니다.

Grid의 속성들은 Flex와 마찬가지로, 이렇게 두 가지로 나뉩니다.

• 컨테이너에 적용하는 속성
• 아이템에 적용하는 속성

Grid 컨테이너에 적용하는 설정

Display: grid;

.container { display: grid | inline-grid }

Grid 컨테이너에 display: grid;를 적용하는게 시작입니다. 아이템들이 block 요소라면 이 한 줄 만으로는 변화는 없습니다.

Grid-template-columns & Grid-template-rows (그리드 형태 정의)

.container {
	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */
 }

.container {
	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
	/* grid-template-rows: 100px 200px auto */
}

열(column)과 행(row)의 배치를 통하여 컨테이너에 Grid 트랙의 크기들을 지정해줍니다. 여러가지 단위를 사용할 수 있고 고정 크기와 가변 크기를 섞어 쓸 수도 있습니다.

fr(fraction)은 숫자 비율대로 트랙의 크기를 나눕니다. 즉, 위의 1fr 1fr 1fr은 균일하게 1:1:1 비율인 3개의 column을 만들겠다는 의미입니다.

• grid-template-columns: 100px 2fr 1fr
  

repeat 함수

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
        /* repeat(3, 1fr 4fr 2fr); */
}

repeat는 grid-template 속성 내에서 반복되는 값을 자동으로 처리할 수 있는 함수입니다. repeat(반복횟수, 반복값)으로 사용합니다.

minmax 함수

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

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

minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게 입니다. 내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 100px이 넘어가면 알아서 늘어나도록 처리해줍니다.

Auto-fill & auto-fit

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다.

셀의 개수가 5개보다 모자라면 예시의 마지막 row처럼 공간이 남게 되고요.

이때, auto-fill 대신 auto-fit을 사용하면, 남는 공간을 채웁니다.

Gap & row-gap & column-gap (간격 만들기)

.container {
	gap: 10px 20px;
	/* row-gap: 10px; column-gap: 20px; */
}

그리드 셀 사이의 간격을 설정합니다.

Q&A

Q.