카카오 인앱 브라우저 회피하여 외부 브라우저에서 띄우기크로스 브라우징에 대응하고 있는 웹 브라우저로서  대표적인 4개의 브라우저 chrome, safari, firefox, ie 만 신경쓰면 되는 줄 알았지만... 여러 프로젝트들을 진행하면서 생각보다 더 많은 브라우저에  대응해야하는 경우가 있다는 것을 알았습니다. 예를 들어 whale브라우저나 카카오 인앱 브라우저, 라인 인앱 브라우저...등 문제는 현실적으로 이 모든 '그 외 브라우저'들에 대응한다는 것은 매우 어렵다는 것입니다. 모든 브라우저에서 같은 웹 표준을 같은 수준을 구현하고 있지 않고,  각자의 브라우저에서만 독자적인 기능과 동작을 하고 있는 경우가 있기 때문입니다. 특히, 인앱 브라우저들. 대표적으로 카카오톡과 라인 인앱 브라우저는  다..

video 태그의 disablePictureInPicture과 playsinline- 웹 페이지에 배경으로 들어가는 영상을 넣었는데, 2개의 이슈가 발생했다. 1. disablePictureInPicturedisablePictureInPicture 속성을 video 태그에 사용하면 PIP모드 버튼이 생기지 않는다. - 웹 페이지에 영상을 삽입하면 PIP(Picture-in-Picture)모드 버튼이 생김.- Edge에서 배경으로 들어가는 영상에 마우스를 호버하면 위처럼 PIP 모드 버튼이 생긴다.- 크롬과 웨일에서는 나오지 않는데, Edge에서만 발생함.- disablePictureInPicture 속성을 video 태그에 사용하면 Edge 브라우저에서 위처럼 마우스를 호버해도 PIP모드 버튼이 생기지 ..

# 자리표시자(매우 간단한) - 최소값을 미리 넣어둔다. - 배경색을 회색 등을 넣어서 자리 표시자를 제공한 것과 같은 느낌을 준다. .heroBanner { min-height: 100px; background: silver; }

# 영상 종횡비 유지하기 .utube { position: relative; padding-top: 56.25%; /* 315 / 560 * 100 */ } .utube__iframe { position: absolute; width: 100%; height: 100%; top: 0; } ## demo 코드 페이지 https://t.ly/bly2