Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- Flex.
- Grid.

✏️ Flex ✏️

Flex 란?

flex (flexible Box) 속성은 컨텐츠를 정렬하거나 공간을 나눌수 있는 CSS 속성의 집합으로서 요소의 크기가 동적이거나 불분명할 경우에도 정렬할 수 있는 효율적인 방법을 제공한다.

사진과 같이 flex box는 부모 영역인 container 내에 자식 요소인 item이 위치하게 되며 주로 부모의 속성을 통해 자식들을 제어한다.

1. Flex-container에 적용하는 속성

flex box의 부모 영역인 container에 적용하는 속성은 다음과 같다.

- flex-direction

flex-direction 속성은 정렬 방향을 결정한다.

• row : flex-start를 기준으로 가로 방향. ( default )
• row-reverse : flex-end를 기준으로 가로 방향.
• column : flex-start를 기준으로 세로 방향.
• column-reverse : flex-end를 기준으로 세로 방향.

.container {
	display: flex;
	flex-direction: row;
}

flex-direction: row; 선언 시 flex-start를 기준으로 가로 정렬된 것을 볼 수 있다.

.container{
	display : flex;
	flex-direction : column-reverse;	
}

flex-direction: column-reverse; 선언 시 flex-end를 기준으로 세로 정렬된 것을 볼 수 있다. ( 박스의 순서 확인 )

- justify-content

justify-content 속성은 수평을 기준으로 배열의 위치를 조종하거나 아이템 간의 간격을 설정한다. ( 수평 정렬 )

• flex-start : flex-start를 기준으로 수평 정렬. ( default )
• flex-end : flex-end를 기준으로 수평 정렬.
• center : 가운데 수평 정렬.
• space-between : item 사이 공간의 넓이가 동일하게 수평 정렬.
• space-around : item 양쪽 공간의 넓이가 동일하게 수평 정렬.

- align-items, align-content

align-items 속성은 수직을 기준으로 배열의 위치를 설정한다. ( 수직 정렬 )
align-content 속성은 cross-axis 축의 item 들이 여러줄 일때 사용 가능.

• flex-start : flex-start를 기준으로 수직 정렬. ( default )
• flex-end : flex-end를 기준으로 수직 정렬.
• center : 가운데 수직 정렬.
• baseline : 텍스트의 베이스라인 기준으로 정렬.

- flex-wrap

flex-wrap 속성은 container가 더 이상 item들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정한다.

• nowrap : 줄바꿈을 하지 않음. ( default )
• wrap : 줄바꿈하여 배치.
• wrap-reverse : 줄바꿈 및 역순 배치.

2. Flex-item에 적용하는 속성

flex box의 자식 요소인 item에 적용하는 속성은 다음과 같다.

- flex-basis

flex-basis 속성은 item의 크기를 결정한다.
( auto를 기본 값으로 갖는다. )

- flex-grow

flex-grow 속성은 item이 flex-basis의 값보다 커질 수 있는지를 결정한다.

- flex-shrink

flex-shrink 속성은 item이 flex-basis의 값보다 작아질 수 있는지를 결정한다.

Flex 연습 사이트

Flexbox Froggy 링크

Flexbox Froggy는 flex 속성을 통해 개구리를 원하는 위치로 이동 시 코드 게임이다.
해당 게임을 통해 flex 속성에 대해 다양하게 다루며 쉽게 이해할 수 있었다.

✏️ Grid ✏️

Grid 란?

Grid 속성은 컨텐츠를 정렬하거나 공간을 나눌수 있는 CSS 속성의 집합으로서 Flex와의 차이는 아래와 같다.

Grid 용어 정리

그리드 컨테이너 (Grid Container) : 그리드의 부모 영역
그리드 아이템 (Grid Item) : 그리드 컨테이너의 자식 요소들
그리드 트랙 (Grid Track) : 그리드의 행(row) 또는 열(column)
그리드 셀 (Grid Cell) : 그리드의 한 칸 (개념적인 정의)
그리드 라인 (Grid Line) : 그리드 셀을 구분하는 선
그리드 넘버 (Grid Number) : 그리드 라인의 각 번호
그리드 갭 (Grid Gap) : 그리드 셀 사이의 간격
그리드 에어리어 (Grid Area) : 그리드 셀의 집합

1. Grid-container에 적용하는 속성

gird box의 부모 영역인 container에 적용하는 속성은 다음과 같다.

- grid-template

grid-template-rows, grid-template-columns 속성은 컨테이너에 Grid 트랙의 크기들을 지정해준다.

• grid-template-rows : 행의 높이를 설정
• grid-template-columns : 열의 넓이를 설정
• repeat(적용할 트랙의 수, 반복할 수치) : 그리드 트랙 별 반복 설정
  ( 위 속성에 값으로 적용 )

.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 */
    
	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 */
}

- gap

gap 속성은 그리드 셀 사이의 간격을 설정한다.

.container {
	/* row의 간격을 10px로 설정 */
	row-gap: 10px;
	/* column의 간격을 20px로 설정 */
	column-gap: 20px;
	/* row, column의 간격을 각 20px로 설정 */
	gap: 20px;
}

2. Grid-item에 적용하는 속성

- grid-row, grid-column

grid-row, grid-column 속성은 그리드 셀의 영역을 설정한다.

.item1 {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-row : 1 / 3;
}

.item2 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-column : 1 / 3;
}

✏️ Flex와 Grid의 차이점 ✏️

Flex는 한 방향 레이아웃 시스템 (1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)