반응형 🖥️ 프로젝트?/100일 CSS 챌린지15 100일 CSS 챌린지 #14 : 바이시클롭터 문제https://100dayscss.com/days/14/ Byciclopter: Which side of the card do you want to use? Either drive or fly to work in the morning?바이시클롭터: 카드의 어느 면을 사용하시겠습니까? 아침에 운전하거나 비행기를 타고 출근하시겠습니까? 내 풀이See the Pen 014 - Byciclopter by dobbyjang0 (@dobbyjang0) on CodePen.transform-style: preserve-3d;요소들을 3d로 랜더링한다. perspective: 800px; rotateX시 깊이감을 추가해줌 backface-visibility: hidden;180deg 돌아서 뒷면일 때 보이지 않게.. 2024. 11. 2. 100일 CSS 챌린지 #13 : 유저 갤러리 문제https://100dayscss.com/days/13/ User Gallery: An idea for a transition between user overview and profile page.유저 갤러리: 유저 오버뷰와 프로필 페이지 간의 전환에 대한 아이디어입니다. 내 풀이See the Pen 013 - User Gallery by dobbyjang0 (@dobbyjang0) on CodePen.pointer-events: none;유저 오버뷰 위에 프로필 페이지를 만드니 뒤에 있는 유저 오버뷰가 프로필 페이지에 가려 상호작용이 안 됐다. 뒷요소와 상호작용을 시켜주기 위해 프로필 페이지를 연 상태가 아닐 때는 pointer-events: none 속성을, 열 때는 본 요소와 상호작용을 해야하.. 2024. 10. 31. 100일 CSS 챌린지 #12 : 툴팁 문제https://100dayscss.com/days/12/ Tooltip: I'm quite sure, you already know what obsession means. But you can look it up anyways.툴팁: 당신은 'obsession'이 무엇을 의미하는지 이미 알고 있을 것입니다. 하지만 어쨌든 찾아볼 수는 있습니다. 내 풀이See the Pen 012 - Tooltip by dobbyjang0 (@dobbyjang0) on CodePen.만드는 방법은 다 알지만 레이아웃 잡기가 까다로웠다. 예시 모범답안See the Pen 012 - Tooltip by Matthias Martin (@roydigerhund) on CodePen. 2024. 10. 29. 100일 CSS 챌린지 #11 : 워킹 부츠 문제https://100dayscss.com/days/11/ Walking Boots: These boots are made for walking. Where are they going and for how long?워킹 부츠: 이 부츠는 걷기 위해 만들어졌습니다. 그들은 어디로, 얼마나 오랫동안 갈 예정인가요? 내 풀이See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen. 신발을 요소로 감싸줘서 신발에는 회전을, 감싼 요소에는 평행이동을 걸어줘서 애니메이션 2개를 동시에 시행하는 효과를 주었다. 위와 같이 요소 4개를 만들어 신발 위치를 잡아준 다음 이를 애니메이션으로 바꾸었다. 신발 이미지는 아래 사진을 이용하였다.더보기 하지만 이렇게 하니 모.. 2024. 10. 29. 100일 CSS 챌린지 #10 : 시계 문제https://100dayscss.com/days/10/ Watch: Classic, noble, modern or playful? What do you want your favorite watch to look like?시계: 클래식, 고귀함, 모던함, 아니면 유쾌함? 당신이 가장 좋아하는 시계는 어떤 모습이길 바라나요? 내 풀이See the Pen 010 - Watch by dobbyjang0 (@dobbyjang0) on CodePen.원형으로 모여 있는 점 찍기 요소를 많이 만들기 싫어서 원래 점에서 before, after를 이용, 앞뒤로 각도 다르게 점을 찍은 후 추가시켰다. 그래서 한 요소당 점 3개를 찍을 수 있게 하였다. 그 후 scss 반복문을 이용하여 회전 각도를 조금씩 바꿨다... 2024. 10. 29. 100일 CSS 챌린지 #9 : 비오는 밤 문제https://100dayscss.com/days/9/ Rainy Night: The perfect time of day and the perfect weather to program in peace. The raindrops even shatter on the ground.비오는 밤: 평화롭게 프로그램을 진행하기에 완벽한 시간과 완벽한 날씨입니다. 심지어 빗방울은 땅에 흩어집니다. 내 풀이See the Pen 009 - Rainy Night by dobbyjang0 (@dobbyjang0) on CodePen.가장 중요한 부분이었던 빗방울 만들기에 대해서 서술 빗방울 만들기border-radius를 한쪽만 0, 나머지는 50%로 해서 한쪽만 뾰촉하고 다른 쪽은 둥근 모양을 만듦. 그리고 이를 똑바.. 2024. 10. 28. 이전 1 2 3 다음 반응형
