잡다한 개발 블로그

원문: New Policies for iOS New Policies for iOS Since before your sun burned hot in space and before your race was born, Safari on iOS has required a user gesture to play media in a or element. webkit.org 우주에 당신의 태양이 불타기 전부터, 당신의 민족이 태어나기 전부터 (Since before your sun burned hot in space and before your race was born), iOS의 Safari는 혹은 요소의 미디어를 재생하기 위해서는 사용자 제스처가 필요했습니다. Safari가 iPhoneOS 3 에서 를 처음 지원했..

원문: Auto-Play Policy Changes for macOS Auto-Play Policy Changes for macOS This is a guest post from the Safari team about changes to how Safari handles HTML5 video and audio auto-play. webkit.org 이 게시물은 Safari 팀에서 Safari가 HTML5 비디오 및 오디오 자동 재생을 처리하는 방법의 변경사항에 대한 게스트 게시물입니다. 이러한 변경사항은 웹사이트와의 호환성에 영향을 줄 수 있습니다. 작년에 사파리의 iOS 용 비디오 정책 업데이트에 따라, 이번 주에는 Mac에서 자동 재생 정책을 크게 변한다고 발표했습니다. 이러한 변경 사항을 통해 특히..

Pre-roll 광고는 모바일과 데스크톱 모두에서 피처링된 비디오 바로 전에 자동으로 재생되는 비디오 광고입니다. 이 광고들은 보통 15초, 30초 또는 60초 정도 걸립니다. 15초 분량의 유튜브 Pre-roll 광고: 출처 What is a Pre-Roll Ad & Why Should Marketers Use Them in Campaigns? Pre-roll ads are great for digital marketers in many ad campaigns. This article details some best practices and highlights examples from multiple platforms. instapage.com

Charles 앱에서 "Help > SSL Proxying" 참고 MacOS "Proxy > SSL Proxy Settings" 에서 "Enable SSL Proxy"를 체크 "Help > SSL Proxying > Install Charles Root Certificate"를 눌러 인증서 설치 키체인 접근 설정에서 Charles Proxy 인증서 더블 클릭 후 "신뢰 메뉴 > 이 인증서 사용 시" 에서 "항상 신뢰" 로 설정 iOS Charles > “Help > SSL Proxing > Install Charles Root Certificate on a Mobile Device or Remote Browser” 클릭 "설정(Settings) > 와이파이(Wi-Fi)" 로 동일한 네트워크를 잡고 "프록..

이슈 발생 Safari에서 의 autoplay 속성을 사용하여 무음으로 자동 재생시에, 영상 종료 후 볼륨 버튼을 누르면 영상이 재생이 되는 이슈가 있었다. 테스트 재생 완료후에 video.muted값이 변경되면 재생 된다. 볼륨 버튼을 눌러 변경하는 경우와 video.muted 값을 변경하는 경우 둘 다 동일했다. 해결 autoplay 속성을 제거하고 JS로 강제 재생하는 것으로 해결하였다. 아래에 테스트한 코드와 재현 영상을 첨부한다. See the Pen Safari autoplay issue by arori (@arori) on CodePen.

문제 상황 Safari(Mac, iOS)에서 vertical-align: top이 적용된 block 엘리먼트 안에 엘리먼트와 다른 엘리먼트가 있으면 다른 엘리먼트가 하단으로 떨어져서 정렬이 깨지는 현상이 발생했다. See the Pen Safari(iOS, Mac) vertical-align broken by arori (@arori) on CodePen. 위 코드를 Safari에서 실행시키면 아래와 같이 노출된다. 실험 공식 문서에 따르면 vertical-align 은 inline 요소와 table-cell 요소에만 적용되며, 상속 되지 않는 속성이다. 그러면 위 코드를 기준으로보면 inline-block인 wrapper에 vertical-align을 줘도 내부 요소의(텍스트 노드와 엘리먼트) 정렬은 ..

문제 상황 overflow-x:scroll인 요소의 자식 요소의 오른쪽 마진이 적용되지 않아 스크롤이 안 생기거나, 더 짧게 생기는 현상이 발생한다. See the Pen Margin right not working inside Overflow-x:scroll Element by arori (@arori) on CodePen. 원인 공식 문서에 따르면 블록 레벨 요소에서 direction이 ltr이고, 자식이 margin, border, padding, width를 포함하여 부모를 넘는다면 margin-right가 무시된다. 문제 상황처럼 꼭 overflow-x: scroll이 아니더라도 발생할 수 있다. 10.3.3 normal flow에서 block-level, non-replaced 요소 다른 프로..

문제 상황 overflow-x, overflow-y를 이용하여 x 와 y에 각각 속성을 주었을 때, visible을 사용했음에도 x 혹은 y에 스크롤이 생기는 현상이 발생한다. 원인 visible과 visible이 아닌 다른 속성(hidden, auto, scroll)을 함께 사용할 경우에 visible인 쪽이 auto가 된다. 해당 내용은 W3C의 공식 스펙에도 기재되어있다. The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visib..

See the Pen getBoundingClientRect().width와 offsetWidth의 차이 by arori (@arori) on CodePen.

원문: All You Need To Know About CSS-in-JS All You Need To Know About CSS-in-JS - By Please checkout a related story below... hackernoon.com 요약: 컴포넌트로 생각하기— 더이상 스타일시트의 묶음을 유지보수 할 필요가 없습니다. CSS-in-JS는 CSS 모델을 문서 레벨이 아니라 컴포넌트 레벨로 추상화합니다(모듈성). 스타일을 적용한 리액트 컴포넌트 예제 CSS-in-JS, Styled Components, Radium, Aphrodite와 같은 용어를 들어본 적이 있을겁니다. 당신은 "이런 게 왜 있지? 나는 CSS-in-CSS(.css파일에 작성한 CSS)에 완벽하게 만족하는데!"라며 이러지도 ..