위 사이트에서 게임을 할 수 있다.
Flexbox Froggy는 개구리와 친구들을 돕는 CSS 코드게임이다!
CSS의 각속성(justify, align 등등)들을 이용해 개구리들이 잎으로 이동할 수 있도록 도와주자!!!
[1단계] : justify-content 이용
ㄴ justify-content 는 요소들을 가로선 상에 정렬하며 다음의 값들을 인자로 받음
- flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
- flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
- center : 요소들을 컨테이너의 가운데로 정렬
- space-between : 요소들 사이에 동일한 간격을 둠
- space-around : 요소들 주위에 동일한 간격을 둠
[2단계] : justify-content 이용
[3단계] : justify-content 이용
[4단계] : justify-content 이용
[5단계] : align-items 사용
ㄴ align-items는 다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬함
- flex-start : 요소들을 컨테이너의 꼭대기로 정렬
- fles-end : 요소들을 컨테이너의 바닥으로 정렬
- center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
- baseline : 요소들을 컨테이너 시작위치에 저렬
- stretch : 요소들을 컨테이너에 맞도록 늘림
[6단계] : justify-content, align-items를 사용
[7단계] : justify-content, align-items 사용
[8단계] : flex-direction 이용
ㄴ flex-direction은 다음 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정해준다.
- row:요소들을 텍스트의 방향과 동일하게 정렬
- row-reverse:요소들을 텍스트의 반대방향으로 정렬
- column : 요소들을 위에서 아래로 정렬
- column-reverse : 요소들을 아래에서 위로 정렬
[9단계] : flex-direction을 이용
[10단계] : flex-direction, justify-content 이용
- column-reverse/row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀐다.
[11단계] : flex-direction, justify-content 이용
- flex의 방향이 column일 경우 justify-content, align-items의 방향이 반대로 바뀐다!(가로 -> 세로)
[12단계] : flex-direction, justify-content를 이용
[13단계] : flex-direction, justify-content, align-items를 이용
[14단계] : order 이용, order의 기본값은 0이고 양수나 음수로 바꿀 수 있다.
- 컨테이너의 row나 column의 순서를 역으로 바꾸는 것만으로 안될 때 사용
- (+)이면 무슨숫자를 넣어도 같은결과를 나온다.
- 참고로 (-)값일 때와 (+)값일때
[15단계] : order 이용
- (-)값이면 모두 같은 결과가 나옴
[16단계] : align-self 이용
- align-self는 개별 요소에 적용할 수 있는 또 다른 속성이다.
- 이 속성은 align-items가 사용하는 값들을 인자로 받고 그 값들을 지정한 요소에만 적용된다.
[17단계] : order와 align-self 이용
- 여기서 order는 양수이면 모두 같은 결과가 나온다.
- 참고로 order가 0일때와 음수일때는 위와 같이 나온다.
[18단계] : 비좁게 앉아 있는 개구리들을 flex-wrap을 이용하여 넒게앉혀라!
- nowrap : 모든 요소들을 한 줄에 정렬
- wrap : 요소들을 여러줄에 걸쳐 정렬(폭이 부족할 시 다음줄로 넘어감)
- wrap-reverse : 요소들을 여러줄에 걸쳐 반대로 정렬
[19단계] : flex-direction과 fex-wrap을 이용하여 개구리들을 세 column에 정렬
[20단계] : 19단계와 문제는 같은데 flex-flow 사용,
- 이 속성은 공백문자를 이용하여 flex-direction/flex-wrap 두 속성의 값을 인자로 받는다.
- flex-fow = flex-direction + flex-wrap
[21단계] : align-content 사용
- align-items는 컨테이너 안에서 모든요소를 어떻게 정렬할 지 지정
- align-content는 여러줄들 사이의 간격을 지정
- flex-start : 여러줄을 컨테이너의 꼭대기에 정렬
- flex-end : 여러줄들을 컨테이너의 바닥에 정렬
- center : 여러줄들을 세로선 상의 가운데에 정렬
- space-between : 여러줄들 사이에 동일한 간격을 둠
- space-around : 여러줄들 주위에 동일한 간격을 둠
- stretch : 여러줄들을 컨테이너에 맞도록 늘림
[22단계] : 연못의조류에 의해 연못잎이 연못의 아래쪽으로 떠내려감! align-content를 사용
[23단계] : flex-direction과 align-content를 사용
[24단계] : 지금까지 배운 CSS 속성들을 자율적으로 이용
