본문 바로가기
반응형

전체 글70

Swiper.js의 CDN 설치 방법, 기본 예제 정리 📌 Swiper.js 기본 사용법 정리웹사이트에 슬라이더 기능이 필요할 때, 가장 많이 사용되는 라이브러리 중 하나가 Swiper.js입니다.가볍고 반응형이 잘 되고, 다양한 커스터마이징이 가능해서 퍼블리셔나 프론트엔드 개발자 모두에게 인기 있는 도구죠.이 글에서는 Swiper.js의 기본 사용법을 간단하게 정리해봅니다. ✅ 1. Swiper란?모바일 터치에 최적화된 슬라이더 라이브러리다양한 슬라이드 효과 지원 (slide, fade, cube, coverflow, flip)React, Vue, Angular, Svelte 등 프레임워크도 지원커스터마이징이 매우 쉬움 🧩 2. CDN으로 빠르게 시작하기👉 HTML 기본 구조 예시 슬라이드 1 슬라이드 2 슬라.. 2025. 6. 16.
img태그에서 srcset 속성이 적용 안될 때 반응형 이미지를 적용시키기 위해 img태그의 srcset 속성을 사용했지만실제 브라우저 사이즈를 줄여보고 개발자 모드에서 해상도를 조절해보기도 했으나원하는대로 해상도나 뷰포트에 따라 이미지가 바뀌지 않아 구글링 검색 후 picture태그와 source 태그를 이용하면 된다는 것을 확인.적용시켜보니 안정적인 반응형 화면 구현이 가능하였다. img 태그의 srcset 사용 picture태그 사용 출처:https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-workinghttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#att.. 2025. 5. 27.
svg vs webp svg vs webp더 작은 파일 크기와 더 정확한 이미지가 필요한 경우 SVG가 적합더 빠른 로딩 시간과 더 작은 파일 크기를 위해 약간의 정확도를 희생해도(약간의 이미지 왜곡) 괜찮다면 WebP가 나을 수 있음 2025. 5. 22.
퍼블리싱 레퍼런스 사이트 퍼블리싱 할 때 참고할만한 레퍼런스 사이트임. 1.https://www.awwwards.com/ 2.https://www.gdweb.co.kr/main/ 3.https://www.dbcut.com/ 4.https://www.cssdesignawards.com/ 5.https://mobbin.com/ (모바일 앱 디자인) 2025. 5. 22.
반응형

티스토리툴바