작고 소소한 개발 기록장

CSS Dinner를 통해 CSS Selecter를 재밌게 학습할 수 있습니다. 복습하기 위해 블로그에 다시 정리합니다~.~ https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io ✅ Level 21 HTML CSS plate:nth-of-type(even) { } ✅ Level 22 HTML

Language/HTML&CSS 2021. 12. 10. 22:33

CSS Dinner를 통해 CSS Selecter를 재밌게 학습할 수 있습니다. 복습하기 위해 블로그에 다시 정리합니다~.~ https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io ✅ Level 11 HTML CSS plate * { } ✅ Level 12 HTML CSS plate + apple { } ✅ Level 13 HTML CSS bento ~ pickle { } ✅ Level 14 HTML CSS plate > apple { } ✅ Level 15 HTML CSS orange:first-child { } ✅ Level 16 HTML CSS plat..

Language/HTML&CSS 2021. 11. 26. 22:51

CSS Dinner를 통해 CSS Selecter를 재밌게 학습할 수 있습니다. 복습하기 위해 블로그에 다시 정리합니다~.~ https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io ✅ Level 1 HTML CSS plate { } ✅ Level 2 HTML CSS bento { } ✅ Level 3 HTML CSS #fancy { } ✅ Level 4 HTML CSS plate apple { } ✅ Level 5 HTML CSS #fancy pickle { } ✅ Level 6 HTML CSS .small { } ✅ Level 7 HTML CSS orang..

Language/HTML&CSS 2021. 11. 25. 21:13

저번 1~12번에 이어서 나머지 번호들도 정답을 공유해보려고 합니다. 문제를 푸시면서 어려운 부분들은 저의 답을 참고해서 푸셔도 좋을 것 같습니다! https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com ✅ 13번 정답 justify-content:center; flex-direction:row-reverse; align-items:flex-end; ✅ 14번 정답 order:3; ✅ 15번 정답 order:-3; ✅ 16번 정답 align-self:flex-end; ✅ 17번 정답 order:3; align-self:flex-end; ✅ 18번 정답 flex-wrap:wrap; ✅ 19번 ..

Language/HTML&CSS 2021. 5. 16. 19:20

단순히 이론을 넘어서 Flexbox Froggy 게임으로 Flexbox를 익혀보시는 걸 추천드립니다! 저 또한 감을 잡지 못하고 있었는데 많은 도움을 받았답니다. 24단계를 다 통과한 만큼 도움이 필요하신 분들을 위해서 정답 공유를 해보려 합니다. http://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com ✅ 1번 정답 justify-content: flex-end; ✅ 2번 정답 justify-content: center; ✅ 3번 정답 justify-content:space-around; ✅ 4번 정답 justify-content:space-between ✅ 5번 정답 align-items:f..

Language/HTML&CSS 2021. 5. 15. 22:12

이 글은 드림코딩 by 엘리님의 강의를 정리했음을 먼저 밝힙니다. 강의링크: https://youtu.be/7neASrWEFEM 📌Flexbox ✅ Flexbox는 컨테이너 박스에 적용되는 속성 값들, 또 각각의 아이템들에 적용할 수 있는 속성 값들이 존재함 [컨테이너를 우리가 꾸며줄 수 있는 속성 값들] - display - justify-content - flex-direction - align-items - flex-wrap - align-content - flex-flow [아이템에 지정되는 속성 값들] - order - flex - flex-grow - align-self - flex-shrink ✅ Flexbox에는 중심축과 반대축이 있음 -> 중심축을 수평이냐 수직에 두냐에 따라서 반대축이 바뀜

Language/HTML&CSS 2021. 5. 14. 14:06