그냥, 일단 써내려가자

HTML/CSS 꿈은 AM 15:30 AM 15:30 없고요 그냥 AM 15:30 AM 15:30 놀고 싶습니다. AM 15:30  JSconst bubble_01 = () => gsap.timeline().to('.chat_wrap .bubble.first', { scale: 1, duration: .05,}, .5);const bubble_02 = () => gsap.timeline().to('.chat_wrap .bubble.first', { top: 168, duration: .05,}, .5)...

HTML 31회 합격생 김○구 31회 합격생 김○구 31회 합격생 김○구 31회 합격생 김○구 31회 합격생 김○구 32회 합격생 김○구 32회 합격생 김○구 32회 합격생 김○구 32회 합격생 김○구 32회 합격생 김○구 33회 합격생 김○구 33회 합격생 김○구 33회 합격생 김○구 33회 합격생 김○구 33회 합격생 김○구 34회 합격생 김○구 34회 합격생 김○..

HTML 2024년 4월 25일 오후 9시 30분에 사라질 HTML 요소 2024년 4월 25일 오후 9시 30분에 나타날 HTML 요소 JS // 사라질 시간 설정 const targetTime = new Date(2024, 3, 25, 9, 30, 0).getTime(); // 현재 시간과 targetTime의 차이 계산 function timeDiff() { return targetTime - Date.now(); } // 1초마다 timeDiff() 함수 실행 const interval = setInterval(() => { const remainingTime = timeDiff(); // 만약 현재 시간이 targetTime보다 이후라면 if (remainingTime

겨울시즌 눈 내리는 효과 See the Pen [HTML/CSS]눈 내리는 효과 by TytanLee (@TytanLee) on CodePen. 겨울 시즌에 홈페이지에 적용하면 좋습니다😀 출처 : 프론트베이커

HTML/CSS Codepen See the Pen [HTML/CSS]Neon 애니메이션 by TytanLee (@TytanLee) on CodePen. 원본 : 깜보랜딩페이지

clip-path를 활용한 동적인 마우스 오버 효과 See the Pen [아카이브]마우스 오버 액션(플러스엑스) by TytanLee (@TytanLee) on CodePen. 1. html 구조 - 이미지를 감싸는 영역은 총 두 개. 하나는 `:hover`를 주기 위한 영역, 하나는 `clip-path`를 설정할 영역 - `clip-path`를 준 영역에 `:hover`를 넣으면 `clip-path` 영역이 줄어들거나 늘어날 때 마우스 위치에 따라 효과가 무한 반복. 때문에 `clip-path` 영역 위에 `:hover`를 넣기 위한 영역을 만들어줘야 한다. 2. 효과 원리 - `.wrap`영역에 마우스를 올리면 이미지를 감싸고 있는 `div`의 `clip-path`를 줄이고, 그 안에 들어있는 `i..

안녕하세요 무택입니다 :) 오늘은 웹서핑을 하다가 좋은 사이트를 발견해서 공유하려고 합니다. iOS 디바이스 정보 확인 사이트 Screen Sizes링크로 가보면 위 화면을 확인할 수 있습니다😄😄😄 Screen Sizes A complete guide for Apple displays screensizes.app - iOS의 다양한 디바이스 정보 확인, 레이아웃 가이드, 위젯 크기 등 OS에 관련된 픽셀이나 정보를 확인할 수 있는 사이트 - 디바이스 크기도 비교할 수 있는 부가기능 참고 글 : https://yozm.wishket.com/magazine/detail/2232/ "정리된 모바일 디바이스별 해상도"를 보고 싶다면 아래를 참고해 주세요 :) 모바일 디바이스별 해상도(2023.09.18 기준) ..

See the Pen [HTML/CSS]원형 차트 만들기 by TytanLee (@TytanLee) on CodePen. 이해를 돕기 위한 설명 - `stroke`클래스를 `rotate`로 돌렸기 때문에 HTML내의 `circle`에서 `cx`,`cy`로 위치 조정, 그리고 `r`로 차트의 반지름 설정 - `stroke-dasharray`는 점의 길이, `stroke-dashoffset`은 점 사이 간격의 길이 - `show_circle` 애니메이션으로 차트가 움직이는 모습 구현 - `storke`클래스의 `stroke-dasharray`와 `show_circle`애니메이션의 `stroke-dashoffset`의 값을 조정해 차트가 얼마 나 찰 것인지 조정 - `storke`클래스의 `stroke-das..

HTML ' TEXT INPUT ' CSS div.wrap { width: 100%; height: 40vh; background-color: #2d2d2d; } div.wrap p { color: #fff; font-size: 40px; text-align: center; line-height: 40vh; font-family: 'Poppins', sans-serif; } .noise { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1001; background-image: url('https://i.ibb.co/x3TCktM/645cbb8ec449398255b76326-noise.gif'); background-position: 0..

아이콘 등장 효과 See the Pen 카드 hover 효과(아이콘 등장 모션) by TytanLee (@TytanLee) on CodePen. 텍스트보단 아이콘을 보여주고 싶을 때 사용할만한 모션 참고 : 서핏 커리어 프로필 페이지