그냥, 일단 써내려가자

① HTML Amenity 안락한 생활의 편의시설 환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해 항상 안락함과 편안함을 제공하는 병원이 되도록 최선을 다하겠습니다. Amenity 안락한 생활의 편의시설 환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해 항상 안락함과 편안함을 제공하는 병원이 되도록 최선을 다하겠습니다. Amenity 안락한 생활의 편의시설 환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해 항상 안락함과 편안함..

① HTML추천 컨텐츠 자연의 신비 눈부신 풍경과 자연이 만들어낸 경이로운 모습들을 담았습니다. 도시의 밤 불빛으로 가득한 도시의 야경을 담은 컬렉션입니다. ..

웹사이트에서 PC와 모바일 사용자에게 각각 다른 경험을 제공해야 할 때가 있습니다. 특히 PC에서만 제대로 작동하는 기능이나 모바일에 최적화된 별도 페이지로 연결해야 하는 경우, 사용자의 디바이스를 감지하여 적절한 URL로 연결하는 기능이 필요합니다.이 글에서는 JavaScript와 미디어 쿼리를 활용해 PC 사용자는 새 탭으로 특정 URL을 열고, 모바일 사용자는 다른 URL로 리다이렉트하는 함수를 구현해 보겠습니다. 이 방법은 별도의 라이브러리 없이 순수 JavaScript만으로 구현 가능합니다.  ① PC에서는 새탭으로 이동, 모바일에서는 alert창 띄워서 접속 막기function pcOnlyLink(url) { const isMobile = window.matchMedia('(max-wid..

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 기준) ..