기능 구현에만 몰두하다보니 어느새 CSS는 뒷전이었기 때문에 오랜만에 CSS를 다루기로 하자.
개인적으로 CSS에서 가장 중요하고, 어렵다고 생각한 부분이 레이아웃을 컨트롤 하는 것이다.
오늘은 flex, gird를 많이 다뤄보자.

flex

flex는 레이아웃의 배치를 컨트롤한다. flex만 잘써도 별다른 CSS 작업 없이도 깔끔하고 잘 정돈된 작업물을 볼 수 있다.

사용 코드

먼저 flex를 사용하기 위해 어떤 코드를 다루는지 보자!

사용할 코드들!!

• justify-content
• align-items
• flex-direction
• order
• align-self
• flex-wrap
• flex-flow
• align-content

display: flex;	// 박스를 컨트롤 하려면 flex를 입혀줘야한다.

justify-content: '아래 코드들'	// justify-content는 flex의 행(가로)을 컨트롤 한다.

* flex-start		// 요소들을 컨테이너의 왼쪽으로 정렬합니다.
* flex-end			// 요소들을 컨테이너의 오른쪽으로 정렬합니다.
* center			// 요소들을 컨테이너의 가운데로 정렬합니다.
* space-between		// 요소들 사이에 동일한 간격을 둡니다.
* space-around		// 요소들 주위에 동일한 간격을 둡니다.

align-items: '아래 코드들'		// align-items는 flex의 열(세로)을 컨트롤 한다.

* flex-start		// 요소들을 컨테이너의 꼭대기로 정렬합니다.
* flex-end			// 요소들을 컨테이너의 바닥으로 정렬합니다.
* center			// 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
* baseline			// 요소들을 컨테이너의 시작 위치에 정렬합니다.
* stretch			// 요소들을 컨테이너에 맞도록 늘립니다.
* align-self: '위 코드 사용'	// 개별 요소에 적용할 수 있는 속성

flex-direction: '아래 코드들'		// flex-direction은 대칭(뒤집어?)시켜 준다.

* row				// 요소들을 텍스트의 방향과 동일하게 정렬합니다.
* row-reverse		// 요소들을 텍스트의 반대 방향으로 정렬합니다.
* column			// 요소들을 위에서 아래로 정렬합니다.
* column-reverse	// 요소들을 아래에서 위로 정렬합니다.

order: (... -1, 0(default), 1, ...)	// order는 각 컨테이너(개별 요소)의 순서를 정해준다.

flex-wrap: '아래 코드들'			// flex-wrap은 정렬 개념

* nowrap			// 모든 요소들을 한 줄에 정렬합니다.
* wrap				// 요소들을 여러 줄에 걸쳐 정렬합니다.
* wrap-reverse		// 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
* align-content: 'align-items와 같은 코드 사용'	// 여러 줄 사이의 간격을 지정

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있다. 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받는다.

display: flex;
flex-flow: <flex-direction> <flex-wrap>	// ex) flex-flow: row nowrap;

grid

flex가 레이아웃을 1차원적으로 컨트롤 했다면 grid는 레이아웃을 2차원적으로 컨트롤 한다.

사용 코드

grid를 사용하기 위해 어떤 코드를 다루는지 보자!

display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;	// 각 컨테이너 크기 설정!
grid-template-rows: 20% 20% 20% 20% 20%;
grid-template: <grid-template-rows> / <grid-template-columns>
 
* grid-column-start: 'number'	// 그리드 'number'째 세로선에서 시작되는 영역
* grid-column-end: 'number'	// 그리드 'number'째 세로선까지 이어지는 영역

그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신,
span을 이용하여 열(column)의 넓이를 지정할 수 있습니다. span은 양수만 설정 가능

* grid-column: <grid-column-start> / <grid-column-end>	// 한번에 입력가능
ex) grid-column : -1 / span 3;

column으로 가로를 컨트롤 했다면 세로 컨트롤은 row로 합니다. 들어가는 값은 동일합니다.
함께 사용하여 넓은 영역을 지정할 수 있습니다.
* grid-column : <grid-column-start> / <grid-column-end>
* grid-row : <grid-row-start> / <grid-row-end>

위의 두개를 함께 사용할 경우 margin을 컨트롤 하듯 이렇게 하면 됩니다.
* grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>

order: flex와 동일하게 이용 가능합니다.

---

CSS도 코드다!
결국에는 보고 외우는 것보다 많이 쳐보고 직접 확인하는 것이 좋다.

도움 링크

flex와 grid를 예제로 연습하는 사이트!!
FLEX!! / GRID!!

flex와 grid를 예시로 쉽게 알려주는 사이트
1분코딩님 Flex정리 / 1분코딩님 Grid정리