FrontEnd94 [Cross Browsing] 모바일 iOS 크롬에서는 WebM을 지원하지 않는다? WebM이란? [Cross Browsing] webm 영상의 투명도를 지원하지 않는 Safari 브라우저WebM 이란? 먼저 WebP를 알아보자. WebP 포맷은 2010년 구글에서 개발한 이미지 포맷으로 웹 환경에서 JPEG 및 PNG 포맷을 대체할 목적으로 개발되었다. 손실 압축과 비손실 압축을 둘 다 지원하며, 흔히doqtqu.tistory.com이전 글 참고이슈 WebM은 크롬에서 구글이 2008년에 VP8을 만들었던 On2 테크놀로지스를 인수하여 비디오 코덱의 컨테이너로 발표한 포맷이며, 컨테이너에 사용되는 영상 코덱과 음성 코덱이 완전히 무료이기 때문에 유튜브에서는 이미 이 포맷을 일부 사용하고 있다. 그렇다면 크롬에서는 WebM이 잘 동작하겠구나! 라고 안일한 생각을 했다. 하지만, 모바일 .. 2023. 3. 29. [Cross Browsing] webm 영상의 투명도를 지원하지 않는 Safari 브라우저 WebM 이란? 먼저 WebP를 알아보자. WebP 포맷은 2010년 구글에서 개발한 이미지 포맷으로 웹 환경에서 JPEG 및 PNG 포맷을 대체할 목적으로 개발되었다. 손실 압축과 비손실 압축을 둘 다 지원하며, 흔히 사용되는 JPEG 및 PNG 포맷보다 압축 효율이 좋다. 또한 애니메이션 GIF 파일을 대체하기 위해, WebP 포맷은 애니메이션 기능도 제공한다. 이미지의 속성에 따라 다르기는 하나, 애니메이션 WebP 파일은 같은 내용의 GIF 파일보다 파일 크기가 1/5 ~ 1/10 정도로 작다. 과거에는 WebP 포맷을 지원하는 브라우저가 많지 않았지만, 최근에는 Chrome, Firefox, Edge 등 주요 브라우저라면 대부분 WebP 포맷을 지원한다. 아이폰의 경우 2020년 9월 출시된 i.. 2023. 3. 14. [React.js] https에서 http API request 호출하기 ISSUE Mixed Content: The page at ... was loaded over HTTPS, but requested an insecure script 'http://..' https 웹사이트에서 http request를 시도하면 위와 같은 에러 구문이 발생한다. 해당 에러는 https 환경에서만 발생하는 에러라서 dev 환경에서는 문제없이 잘 동작하지만, 배포 직후 에러가 발생해 당황스러울 수 있다. 위 에러는 git-pages로 정적 파일을 호스팅했을 때 발생한 에러이다. dev 환경에서는 http에서 http를 호출하기 때문에 에러가 발생하지 않지만, git-pages로 배포를 하면 호스팅 주소가 자신의 git repogitory 주소가 되기 때문에 자동으로 https로 배포가 되므로.. 2023. 2. 16. [JavaScript] reduce를 사용하여 순차적으로 프로미스 실행시키기 Promise.all() Promise.all()은 여러 개의 비동기 작업을 병렬(순서를 보장하지 않음)로 실행시키는 경우 사용된다. 여러 개를 동시에 실행하고 가장 마지막 작업이 완료될 때 완료 상태의 프로미스를 반환한다. const myPromises = [ new Promise((resolve) => setTimeout(() => {resolve('A (slow)'); console.log('A (slow)')}, 1000)), new Promise((resolve) => setTimeout(() => {resolve('B (slower)'); console.log('B (slower)')}, 2000)), new Promise((resolve) => setTimeout(() => {resolve(.. 2023. 1. 28. [Vue.js] SPA로 동작하는 Vue에서 DOMContentLoaded SPA 환경에서의 DOMContentLoaded 동작 SPA 환경에서는 아래와 같은 DOMContentLoaded 시점에 IntersectionObserver를 추가해주는 로직을 적용하는 과정이 의도한 것과 같이 동작하지 않는다. document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); if ("IntersectionObserver" in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(func.. 2022. 11. 7. [css] 모바일 환경(터치 스크린)에서의 hover 이슈 스마트폰과 태블릿과 같은 터치 디바이스에서는 PC와 다르게 hover가 적용되지 않는다. 따라서, 반응형 작업을 하다보면 등록되어 있는 hover css로 인해 여러가지 사이드 이펙트가 일어날 수 있다. 예를 들어, 태블릿의 가로모드는 PC뷰 세로모드는 모바일뷰를 가지는 서비스가 있다고 할 때 가로모드에서 hover 이벤트를 발생 시키고 세로모드에서 동작 후 가로모드로 돌아오면 hover 이벤트가 살아있다거나.. 터치 시에 동작하는 이벤트 순서는 아래와 같다. touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click 마우스가 존재하지는 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 함께 발생한다. 터치 인터페이.. 2022. 9. 20. 이전 1 2 3 4 5 ··· 16 다음 반응형
