나는 그 어떤 문서, 프로그래밍 언어 모든 작업을 생각해봐도 css가 가장 어려웠던 것 같다.
워낙에 백엔드 체질이라고 나를 생각하기 때문일까, 디자인 감각이 없다고 생각하기 때문일까. 무조건 어렵게 생각했던 것 같다.
하지만 오늘 flexBox를 사용하는 방법을 접하게 되었고 챗 지피티에게 다음과 같은 답변을 받았다.

flexBox를 css 작성의 하나의 방법론이라고 생각하니 정리가 되기 시작했다. 분명히 css도 표준적으로 작성하는 방법이 있고, 쉽게 만드려고 정한 규칙이 있을텐데 이를 찾아보는데 어려움을 겪었기 때문에 css를 어렵게 느낀 것 같다. 어쩌면 여러 css파일을 봐도 규칙을 찾기 힘들었던 것 같기도 하고.

---

FlexBox

개구리게임

나는 챗과의 대화를 통해 flex가 단순하고, 직관적으로 css를 작성할 때 사용하기 좋다고 이해했다. 그래서 오늘은 flex문법을 이용해 개구리를 옮기는
FLEXBOX FROGGY 를 이용해 공부했다!

1. justify-content

Flexbox Froggy에 오신 것을 환영합니다! Flexbox Froggy는 Froggy와 친구들 돕는 CSS 코드 게임입니다. 오른쪽의 justify-content 속성을 이용하여 개구리가 수련잎으로 이동할 수 있도록 도와주세요. 이 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬합니다:

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
- 이 요소는 부모의 컨테이너안의 요소들을 같은 간격으로 나눈다. 첫 요소와 마지막 요소는 양 끝의 벽에 붙어있는다.

space-around: 요소들 주위에 동일한 간격을 둡니다.
- 이 요소는 부모의 컨테이너안의 요소들을 같은 간격으로 나누고 첫 요소와 마지막 요소에 절반만큼의 간격을 추가로 부여한다.(왼쪽, 오른쪽 벽에 붙어있지 않는다는 말)

justify는 css에서 요소들을 가로 방향에서 정렬하는 데 사용되는 속성들과 관련해 '정렬하다', '위치를 조정하다' 라는 의미를 가진다고 한다.

기본적으로 justify-content 는사진의 개구리처럼 왼쪽에 flex요소들을 정렬시킨다.

flex-end를 작성하니 개구리가 오른쪽으로 옮겨갔다. (flex-end는 순서는 바꾸지 않는다. 가장 마지막 요소가 오른쪽으로 옮겨갈 뿐이다.)

2. align-items

이제 align-items를 사용하여 개구리들이 연못의 아래쪽에 도착할 수 있도록 도와주세요. 이 CSS 속성은 다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬합니다:

flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

이 요소는 justify-content의 세로버전이라고 생각할 수 있다.

align-items: flex-end 를 부여하니 개구리들이 세로로 가장 하단에 위치하게 되었다!

3. flex-direction

개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 도와주세요. 이번에는 flex-direction을 사용하세요. 이 CSS 속성은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다:

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

이 요소는 말 그대로다. 요소들의 정렬 순서를 정해준다.

row-reverse속성을 주니 반대편에서 반대의 순서로 정렬이 된다.

4. order

컨테이너의 요소들은 기본적으로 0의 정렬 순서를 가진다. 하지만 임의로 순서를 정하고 싶다면 하나의 요소를 집어 order를 양수 또는 음수로 변경해주면 된다.

이 이미지에서 yellow개구리의 order를 1로 바꾼다면 오른쪽에 위치한 빨간색 개구리가 왼쪽으로 이동하고(order가 0이기 때문) 노란 개구리가 오른쪽으로 이동한다.

5. align-center

align-self는 개별 요소에 적용할 수 있는 또 다른 속성입니다. 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.

부모의 align-self가 지정되어 있을 떄 이를 무시하고 자식의 align 속성을 바꿔줄 수 있다.

6. flex-wrap

오 이런! 개구리들이 한 줄 위에 비좁게 앉아있네요. 다음의 값들을 인자로 받는 flex-wrap 속성을 사용하여 개구리들이 넓게 앉을 수 있도록 해주세요:

nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

nowrap의 상태라면 이미지와 같이 요소들을 찌그러트려서라도 한 줄에 요소를 배치한다.
이 이미지의 개구리들에 wrap을 부여해준다면

이와같이 여러 줄에 걸쳐 정렬해준다.

+ flex-flow

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

문법적으로 같이 자주 사용하기에 하나의 명령어로 사용하는 듯 하다.

---

끝으로

이 이미지는 Flexbox Froggy의 마지막 레벨이다.
나는 css에 대해 깊게 공부하지 않았고 경험이 많지 않다보니 조금 애를 먹었다.
하지만 FlexBox의 문법을 이해하려 노력하였고 여러 시행착오를 거쳐 성공할 수 있었다.

css는 물론 깊게 들어갈 수록 어려워 지겠지만 모든 프로그래밍, 문서작업이 그렇듯 규칙을 알고 이해를 한다면 어떻게 작성을 해야할지 그림이 그려지는 것 같다.
더 많은 시행착오를 겪으며 공부해봐야겠다!