반응형 문제풀이6 재미있게 Grid 공부하기 - Grid Garden 문제풀이 1~14 얼마 전 포스팅에서 다룬 Flexbox Froggy와 더불어 Grid를 재미있게 학습할 수 있는 Grid Garden을 한번 풀어보았습니다. 이 문제도 한 1년 전쯤에 이미 풀어보았던 것인데요, 저의 경우 Flex를 더 자주 사용하다보니 Grid에 대한 기억이 가물가물해진 김에 다시 한번 문제를 풀어보게 되었습니다. 문제는 https://codepip.com/ 에서 회원가입/로그인을 진행하면 풀 수 있습니다. 저는 처음에는 Grid가 Flex 보다 더 직관적인 것도 같고 쉬운 것도 같고 그랬던 거 같았는데 Flex를 자주 사용하다보니 Flex가 오히려 쉬워진 감이 있습니다.^^; 최근 Web에서는 Layout 배치에 있어 Flex와 Grid를 잘 섞어서(?) 사용하고 있으니 두 가지 기능 모두 잘 살펴두.. 2022. 12. 7. 재미있게 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. 이전 1 2 다음 반응형
