반응형 🖥️ 프로젝트?/100일 CSS 챌린지15 100일 CSS 챌린지 #8 : 메타볼 문제https://100dayscss.com/days/8/ Metaballs: At first glance impossible to implement with CSS, but filters make this possible too.메타볼: 언뜻 보기에는 CSS로 구현하는 것이 불가능해 보이지만, 필터를 사용하면 구현 가능합니다. 내 풀이겉모습만 보고 어떻게 만들지 감이 안 잡혀서 그대로 보고 분석하며 따라 하는 식으로 해봤다.See the Pen 008 - Metaballs by dobbyjang0 (@dobbyjang0) on CodePen. filterfilter 속성은 흐리게 하거나 색대비를 증가하거나 하는 등의 그래픽 효과를 해당 요소에 적용시켜 준다. 해당 문제에서는 경계가 흐릿한 도형들을 움.. 2024. 10. 27. 100일 CSS 챌린지 #7 : 알림, 검색, 메뉴 문제https://100dayscss.com/days/7/ Notifications, Search and Menu: The three cornerstones of any application? Brought together in the smallest possible space.알림, 검색, 메뉴: 모든 애플리케이션의 세 가지 초석이요? 가능한 가장 작은 공간에 모였습니다. 내 풀이See the Pen 007 - Notifications, Search and Menu by dobbyjang0 (@dobbyjang0) on CodePen. 뭔가 만드는 법은 다 아는데 귀찮아서 미뤄서 시간이 오래 걸렸다. 동심원 그리기 (야매).circle { width : 100px; height : 100px; ba.. 2024. 10. 25. 100일 CSS 챌린지 #6 : 프로필 문제https://100dayscss.com/days/6/ Profile: Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself.프로필: 혹시 자신이 만든 소셜 미디어 프로필이 몇 개인지 아는 사람이 있나요? 분위기 환기를 위해 당신은 당신만의 프로필을 직접 만들수도 있습니다. 내 풀이See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.잘린 원호 만들기width: 70px;height: 70px;border-radius: 50%;clip-path : inset(0 5px.. 2024. 10. 24. 100일 CSS 챌린지 #5 : 통계 문제https://100dayscss.com/days/5/ Statistic: In a world of numbers, it is important to be able to interpret them correctly. Beautiful statistics help to capture these data.통계: 숫자의 세계에서는 숫자를 올바르게 해석하는 것이 중요합니다. 아름다운 통계는 이러한 데이터를 포착하는 데 도움이 됩니다. 내 풀이See the Pen 005 - Statistic by dobbyjang0 (@dobbyjang0) on CodePen. 그래프 그리기꺾은선 그래프를 그대로 따라 만드는 것은 실력향상에 도움이 되지 않을 것 같았다. 그래서 값을 입력하면 값대로 그래프를 그려주도록 짜보.. 2024. 10. 24. 100일 CSS #4 : 로딩 문제https://100dayscss.com/days/4/ Loading: The best are always websites that do not need a loading status. If they do, here would be a calming one.로딩 : 가장 좋은 것은 항상 웹사이트에서 로딩 상태가 필요하지 않은 것 입니다. 만약 필요하다면, 여기 마음을 편안하게 해줄 로딩 애니메이션이 있습니다. 내 풀이See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.애니메이션의 타이밍을 잡는게 어려웠다. alternate로 정재생 후 역재생을 해주는게 좋았다. 예시 모범답안See the Pen 004 - Loading by Matthias .. 2024. 10. 21. 100일 CSS #3 : 피라미드 문제https://100dayscss.com/days/3/ The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.피라미드: 이집트의 실제 피라미드만큼 도전적이지는 않지만 그림자 패스는 쉽지 않습니다. 내 풀이See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.삼각형모법답안처럼 path를 이용하여 (clip-path: polygon(30% 100%, 100% 100%, 0% 0%))하지 않고, border를 이용하여 야매로 했다. 그 후 transform에서 skew를 이용하여 변형해줬다. 공전transform orgin을 이동 후 .. 2024. 10. 21. 이전 1 2 3 다음 반응형
