반응형 HTML+CSS34 재미있게 Flex 공부하기 - Flexbox Froggy 문제풀이 13~24 재미 있게 Flex를 공부하는 방법 그 두 번째 시간 이전 포스팅에 이어 Flexbox Froggy 후반부를 풀어봅시다. Flex를 익혀두면 HTML문서로 Layout 잡을 때 정말 간단하면서도 강력함을 느낄 수 있으니 이참에 꼭 익혀두면 좋겠습니다. 문제 13 flex-direction + justify-content + align-items 이상 3가지를 조합하면서 개구리들이 어떻게 배치되는 지 살펴보는 문제입니다. 곰곰히 살펴보면, row정렬에 center에 end라는 키워드가 떠 오른다면 당신은 이미 실력자!! #pond { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; } 문제 .. 2022. 12. 2. 재미있게 Flex 공부하기 - Flexbox Froggy 문제풀이 1~12 재미있게 Flex를 공부하는 방법 CSS를 한창 재미있게 공부하면서 요즘은 예전에 한번 공부했던 Flex를 다시 복습하고 있습니다. 그러던 차에 라는 게임을 다시 한번 풀어보고 있습니다. https://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 또는 codepip.com 에서도 같은 내용을 만날 수 있습니다. 일단 무료로 제공되는 게임은 Flex와 Grid를 이용한 게임입니다. 게임을 하면서 Flex나 Grid의 동작방식에 익숙해지고 그러다가 무릎을 탁~! 치게 되는 재미 있는 교육용 게임이라는 생각이 들었습니다. 문제 1 워밍업 문제라서 쉬운 편입니다. 문제 아래에는 제가 푼 해답이 있으니 문제를.. 2022. 12. 1. 이전 1 ··· 6 7 8 9 다음 반응형
