작고 소소한 개발 기록장

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

우선 Visual Studio가 없으신 분들은 아래의 링크를 타고 다운로드를 하시면 됩니다. Windows 및 Mac용 Visual Studio 2019 다운로드 Visual Studio Community, Professional 및 Enterprise를 다운로드하세요. 지금 Visual Studio IDE, 코드 또는 Mac을 무료로 사용해 하세요. visualstudio.microsoft.com 클릭시 자동으로 Visual Studio community 버전이 다운되는 것을 확인하실 수 있습니다. exe를 실행시키고 계속을 누르면 됩니다. 위와 같이 .NET 데스크톱 개발을 체크해주시고 설치하면 됩니다. 설치하는데는 꽤나 오랜시간이 걸립니다. 설치하고 재부팅을 하면 끝이 납니다. 지금까지 C# Vis..

Language/C# 2021. 7. 10. 23:01

저번 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