분류 전체보기
-
[CSS] 동영상 반응형 사이트에 추가하기Coding 2022. 11. 10. 16:22
사이트에 동영상을 넣을 때 width값을 넣지 않으면 동영상 사이즈에 맞춰 노출되기 때문에 보통 width 값을 기본으로 넣어주게 됩니다. 하지만 width값을 고정으로 넣어주게 되면 반응형 웹의 경우 모바일이나 태블릿에서 동영상이 옆으로 넘쳐버리는 현상이 나타납니다. 그래서 반응형 웹은 동영상의 넓이와 높이값을 비율대로 늘어나도록 수정해야 합니다. 간단하게 html과 css로 수정할 수 있습니다. Your browser does not support the video tag. padding-bottom: 56.25%; 이 부분을 수정하면 비디오 비율 수정이 가능합니다. 56.25% 는 16:9 비율입니다. HTML 삽입 미리보기할 수 없는 소스 video 태그에 video라는 클래스를 추가해줬기 때문에..
-
[JS] Swiper.js 이미지 슬라이드 스크립트 사용법 (+반응형)Coding 2022. 11. 4. 16:58
1. Get Started! Swiper.js 프로젝트에 다운로드하기 swiper.js를 프로젝트에 받는 방법은 여러 가지가 있습니다. 각자 프로젝트 언어나 방식에 맞게 받아주면 됩니다. NPM으로 받는 방법 $ npm install swiper 인스톨은 간단합니다. // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/css'; 인스톨 후 기본 import 코드입니다. 프로젝트에 필요한 컴포넌트들만 골라서 import 해올 수도 있습니다. 저는 전체를 받아서 쓰는 게 마음이 편해서 따로 받진 않습니다. 필요하신 분들은 Swiper.js Get Started 페이지에서 확인할 수 있습니다. CDN 주소..
-
안드로이드 웹뷰에서 엘리먼트 스크롤바가 보이지 않는 현상Coding 2022. 4. 14. 09:47
Android Webview app scrollbar is not showing in div element 웹 화면 그대로 앱으로 만든 프로젝트 중에 레이어 팝업(모달) 같은 창을 띄웠을 때 스크롤은 잘 됐지만 스크롤바가 보이지 않는 이슈가 있었습니다. 이유는 알 수 없지만 다른 웹뷰 앱들도 마찬가지였습니다. 구글 검색 결과 아래 css로 웹킷 스크롤바 디자인을 바꾸면서 적용됐습니다. ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { // 없어도됨 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); -webkit-border-radius: 10px; border-radius: 10px; } ::-web..