본문 바로가기
반응형

🖥️ 프로젝트?/100일 CSS 챌린지3

100일 CSS #2 : 메뉴 아이콘 문제 https://100dayscss.com/days/2/ Menu Icon: Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher 메뉴 아이콘 : 현재 거의 모든 웹사이트에서 사용됨, 간단하지만 인상적인 애니메이션으로 시선을 사로잡어보자 클릭하면 애니메이션이 나와 X자가 되는 메뉴 아이콘. 다시 한번 클릭하면 원래의 ☰ 형태로 되돌아온다. 내 풀이 See the Pen 100 DAYS CSS CHALLENGE : Day #2 by dobbyjang0 (@dobbyjang0) on CodePen. 두 번째 문제부터 바로 어려워서 죽는줄 알았다... SCSS BEM 명명법이 SCS.. 2023. 4. 12.
100일 CSS #1 : 시작! 문제 https://100dayscss.com/days/1/ 100 Days CSS: An easy start into the challenge with a custom build number with gradient. 100일 CSS : 직접 만든 숫자, 그라디언트와 함께하는 챌린지의 쉬운 시작 배경을 그라디언트로 만들고, 숫자 모양을 직접 만들어주면 되는 문제 내 풀이 See the Pen 100 DAYS CSS CHALLENGE : Day #1 by dobbyjang0 (@dobbyjang0) on CodePen. SCSS 이번 기회에 SCSS를 처음 사용해보았는데, 자식 선택자를 >*로 표시하는 것을 몰라서 좀 해매었다. 또 SCSS 쓰면 BEM 명명법은 필요없는게 아닌가 느끼기도 하였다. 정 가.. 2023. 4. 10.
100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란? 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란? https://100dayscss.com/days/1/ 100일 CSS 챌린지(100 DAYS CSS CHALLENGE)란 100일간 주어진 문제를 CSS로 구현해 보는 챌린지입니다. 위 링크를 클릭해 사이트에 들어가면 1일 차부터 시작할 수 있습니다. 한 가지 특이한 점은 Javascript를 쓰지 않고 CSS로만 하는 것을 지향한다는 점입니다. 실제로 예시 답들을 보면 js는 거의 쓰지 않은 것을 확인할 수 있습니다. CSS(SCSS) 실력을 늘리고 싶으신 분, 특히 CSS의 애니메이션을 잘 쓰고 싶으신 분들이 해보시면 좋을 것 같습니다! 100일 CSS 챌린지 하는 법 https://codepen.io/ 우선 첫 번째로 Codep.. 2023. 4. 9.
반응형