[CSS] Flexbox Froggy : Css Flexbox 학습 게임

프론트엔드 세미나를 진행하면서 아주 귀여운 게임을 알게됐다.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

Flexbox Froggy!

CSS 명령어를 통해 개구리들을 지정된 자리에 배치하면서 Flexbox 관련 명령어를 익히는 게임이다.

 

게임을 하면서 알게된 관련 명령어들을 정리해보자.

 

justify-content 속성

: 이 속성은 다음의 값들을 인자로 받아 요소선들을 가로선 상에서 정렬한다.

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
• center: 요소들을 컨테이너의 가운데로 정렬
• space-between : 요소들 사이에 동일한 간격을 둠
• space-around: 요소들 주위에 동일한 간격을 둠

 

이런식으로 작성을 해주면

 

왼쪽에 위치하던 귀여운 개구리가 오른쪽으로 쑉! 이동하는 것을 볼 수 있다.

 

align-items 속성

: 이 속성은 다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬한다.

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

위에서 언급했던 justify-content의 세로 버전이라고 생각하면 된다.

만약 개별 요소에 적용하고 싶다면 적용하고 싶은 요소에 align-self 속성을 사용하여 값을 지정해줄 수 있다.

 

 

flex-direction 속성

: 이 속성은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.

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

만약 flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 방향이 가로로 바뀌게 된다.

 

 

order 속성

: 이 속성을 각 요소에 적용하여 요소들의 순서를 바꿔줄 수 있다. order의 기본 값은 0이며, 양수나 음수로 바꿔준다.

 

이렇게 순서가 다른 개구리에서 red클래스에 order속성을 추가해주면 (기본값이 0이므로 -1이하의 값으로 바꿔줘야함)

빨간 개구리의 위치가 바뀐것을 볼 수 있다.

 

 

flex-wrap 속성

: 모든 요소를 한줄에 넣을건지, 여러줄에 걸쳐 넣을건지를 지정해줄 수 있다.

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

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

예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있다.

 

align-content 속성

: 이 속성을 사용하여 여러 줄 사이의 간격을 지정할 수 있다.

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
• center: 여러 줄들을 세로선 상의 가운데에 정렬
• space-between: 여러 줄들 사이에 동일한 간격을 둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림

이 속성은 align-items와 헷갈릴 수 있는데, align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정한다는 차이가 있다. 만약 한 줄만 있는 경우, align-content는 효과를 보이지 않는다.

 

24단계를 모두 마치면 이렇게  (계속 보니 징그러운것같기도..) 개구리들이 춤 추면서 끝난다.