웹개발3 CSS)모든 브라우저에 적용되는 Full-size Video 만들기 * * 동영상을 배경으로 사용하고자 할 때 가장 편한 방법은 object-fit 속성을 사용하는 것이지만, IE와 몇몇 브라우저에서는 해당 속성을 인식하지 못합니다. 이 글은 object-fit 속성 없이 css에서 object-fit: cover를 적용한 것과 같은 결과물을 만드는 방법입니다. 동영상을 화면에 가득 차는 배경으로 사용하고 앞에 다른 요소를 배치할 수 있습니다. 크롬, IE, Edge, 파폭, UC브라우저에서 확인해 보았습니다. 우선 JSFiddle에서 작성한 예시입니다. Edit fiddle - JSFiddle jsfiddle.net 아래는 작성한 예시 중 관련된 내용입니다. html 1 2 3 4 5 6 7 8 9 10 11 Big Buck Bunny a full-size backgr.. 2019. 7. 29. 'Google 지도를 제대로 로드할 수 없습니다.' 구글 맵 API 문제 해결 구글 지도 API를 웹사이트에 사용하려고 할 때, API키를 맞게 입력해도 지도가 표시되지 않을 때가 있습니다. 화면에 아무것도 표시되지 않는다면 API 키 설정에서 도메인 연결이 제대로 되지 않았거나 스크립트 내에 SSL 인증이 안 된 http 링크가 있는 것이 이유일 수 있습니다. 이 글은 아래처럼, Google 지도를 제대로 로드할 수 없습니다. 메시지가 나오고, 지도에 For development purpose only 글자가 표시될 때의 해결 방법입니다. 구글 클라우드 플랫폼에서 화면 중앙의 콘솔로 이동 클릭 구글 지도 API는 구글 클라우드 플랫폼의 일부로 제공되고 있습니다. 왼쪽 상단의 메뉴 > 결제 > 결제수단 으로 이동합니다. 위 페이지에서는 국민 7807이라는 결제수단이 등록되어 있지만.. 2019. 7. 29. 구글 맵 API 키 확인하기/ API를 사용할 도메인 연결하기 구글 지도는 GCP(구글 클라우드 플랫폼) 내에서 API로 제공되며, 사용자는 지도, 길찾기, 장소 정보를 홈페이지에 사용할 수 있습니다. 이 글의 내용은 이미 발급된 API 키 정보를 확인하고, 해당 키를 사용할 도메인을 연결하는 방법입니다. '구글 맵 API'를 검색해서 나오는 링크를 타고 들어왔습니다. API 키의 위치를 찾기가 쉽진 않아 보입니다. 화면 왼쪽 상단의 Google Cloud 클릭 이미 발급받은 API 키를 찾으러 가는 것이므로 콘솔로 이동 버튼 클릭. 만약 발급 받은 키와 생성한 프로젝트가 없다면, 콘솔로 이동 대신 무료로 GCP 사용해 보기 버튼이 표시됩니다. 생성된 프로젝트에 대한 API 키의 위치는 왼쪽 상단의 메뉴 > API 및 서비스 > 사용자 인증 정보 에서 확인할 수 있.. 2019. 7. 28. 이전 1 다음 728x90
