728x90 300x250 SMALL 전체 글1165 까딱거리는 아이콘 css 애니메이션 @keyframes tilt { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); }}.icon { width: 100px; height: 100px; display: block; margin: 50px auto; animation: tilt 1s ease-in-out infinite;} 아이콘이 좌우로 자연스럽게 흔들린다.(transform:rotate(-10deg) -> rotate(10deg)애니메이션은 infinite로 반복된다.ease-in-out을 적용해 부드러운 움직임을 준다. "> 2025. 3. 23. 터치스크린 인터페이스에서의 인터랙션 최적화 모바일 환경에서 터치스크린 인터페이스를 활용하여, 터치 이벤트에 반응하는 UI를 최적화하는 방법을 알아보자 이를 통해 사용자가 스와이프나 탭 등의 제스처로 직관적으로 조작할 수 있는 UI를 만들 수 있다. Item 1 Item 2 Item 3 코드 설명위 코드는 스와이프 제스처를 사용하여, 터치스크린 환경에서 수평 슬라이드 효과를 구현한 예제로 모바일 기기에서 사용자가 스와이프를 할 때 슬라이드 형태로 이동하는 캐러셀을 만드는 방법을 설명한다.touchstart, touchmove, touchend 이벤트를 사용하여 터치 이벤트를 감지하고, 스와이프에 따라 carousel을 이동시킨다.touchstart : 사용자가 화면을 터치했을 때 발생하는이벤트이다. 이 때 e.touche.. 2025. 3. 22. 스크롤에 따른 반응형 인터랙션 만들기 스크롤 이벤트를 이용하여 사용자가 페이지를 스크롤할 때마다 화면에 변화가 생기는 반은형 애니메이션을 만들ㅇ보자 Section 1 Section 2 Section 3 코드 설명스크롤 시 각 섹션이 화면에 보일 때마다 서서히 나타나는 효과를 구현addEventListener는 이벤트 리스너를 추가하는 메서드로 이 메서드를 사용하면 브라우저가 특정 이벤트(예: 클릭, 스크롤 등)를 감지할 때마다 실행될 함수를 지정할 수 있다. 여기서는 scroll이벤트를 감지해서 페이지를 스크롤할 때마다 해당 함수가 실행되도록 설정getBoundingClientRect()는 요소의 위치와 크기를 반환하는 메서드로 요소의 상대적인 위치와 현재 뷰포트에 대한 크기를 알려준다. 이 메서드를 사용하여 각 섹션의위치를 파악.. 2025. 3. 21. 깃허브 Vercel로 간단하게 배포하고 결과 확인 Vercel은 정적 사이트 및 프론트엔드 애플리케이션을 손쉽게 배포할 수 있는 플랫폼이다.Vercel을 이용하면 깃허브에 업로드한 파일 간단하게 배포하고 결과를 확인할 수 있다. Vercel을 활용한 배포 방법1. Vercel 계정 생성 및 로그인Vercel 공식 사이트에서 계정을 생성하고 로그인한다.https://vercel.com/ Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.. 2025. 3. 20. 이전 1 2 3 4 5 6 ··· 292 다음 728x90 반응형 LIST
