21.01.13 프로젝트#1 FlexboxFroggy

상현님께서 디스코드에 해보라고 올려주신 개구리 게임을 했다.  

플렉스 박스로 제어 연습을 할 수 있는 귀여운 사이트였는데

이런 식으로 수업을 하면 참 쉽고 재밌고 좋을 것 같다...

사이트 주소는 https://flexboxfroggy.com 이다.

 

게임의 핵심은 display : flex; 로 설정했을 때

사용할 수 있는 명령어 총 8가지를 사용하여 개구리를 수련잎으로 돌려보내는 것이다. 

 

✔ flex 요소들을 가로선 상에서 정렬시키는 justify-content

이의 vertical 개념인 align-items 는 flex 요소들을 세로선 상에 정렬한다.

 

✔ 그리고 방향을 정렬하는 flex-direction 과

특정 요소의 순서를 결정할 수 있는 order(값으로 지정),

 

✔ align-items는 요소 다같이 정렬하는 것이라면

align-self는 개별 요소에 대해서 정렬할 수 있는 것이다. 

 

✔ flex-wrap은 줄에 대해서 정렬하는 것이다.

 

✔ flex-wrap과 flex-direction의 설정을 동시에 제어할 수 있는 flex-flow도 있다!

 

쉽고 재밌는 게임이지만 힌트를 많이 주기 때문에 아직 align-items와 align-content의 차이점이나

flex-wrap을 정확하게 응용하는 것, align-self의 적용 범위 등은 아직 확실하게 이해가 안갔다.

 

그래서인지 귀여운 개구리들을 아직 집에 돌려보내지 못했다...ㅠ.ㅠ

노란색 개구리들을 어떻게 해야할까