youtube iframe 동영상 반응형 비율

youtube 동영상 반응형 비율 CSS .video-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;} .video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

2021.12.24

클릭 시 Video 주소 바꾸기

클릭 시 Video 주소 바꾸기 a 태그의 링크값을 이용해 Javascript로 Video 주소 바꿔주기 HTML 비디오1 비디오2 비디오3 JS var video; //전역변수 선언 function changeVideo(linkBtn){ //linkBtn=>클릭한 a태그 video = document.getElementById('changeVideo'); //video태그 video.src = linkBtn.href; // 'movie/video01.mp4' video.load(); //연결된 비디오를 로딩한다. video.type = 'video/mp4'; //해당 코덱을 지정한다 video.play(); //비디오를 재생한다. return false; } //

2021.12.23

mobile 코딩 시 초기 세팅

mobile 코딩 시 초기 세팅

2021.12.23

SNS API 연동

각 SNS 서비스에서 제공하는 개발자 사이트를 통해 API코드를 받아, 홈페이지에 삽입해주면 된다 페이스북 https://developers.facebook.com/docs/plugins/page-plugin 페이지 플러그인 - 소셜 플러그인 - 문서 - Facebook for Developers 페이지 탭: 타임라인, 이벤트, 메시지 이제 플러그인에 타임라인, 이벤트, 메시지 탭이 생깁니다. 타임라인 탭: Facebook 페이지 타임라인에 올라온 최신 게시물을 표시합니다.이벤트 탭: 사용자가 developers.facebook.com 트위터 https://publish.twitter.com/# Twitter Publish publish.twitter.com

2021.12.22

모바일 CSS 스타일링

모바일 CSS 스타일링 모바일의 화면은 좌우로 좁다. 따라서 길게 스크롤이 발생할 수 있다. 바로가기 메뉴처럼 썸네일 로 만들어진 메뉴를 아래로 배치하면 사용자들이 보지 못하고 넘어갈 가능성이 있 기때문에 적절한 메뉴갯수 와 함께 이미지를 사용해야 한다. 각 디바이스에 맞는 고정형 사이트가 있고 어떤 디바이 스에서 보던 잘 맞는 가변형 사이트가 있다. 서브페이지 에서는 반드시 뒤로가기 버튼과 첫화면으 로 돌아가는 버튼이 존재해 야 한다. 가로보기와 세로보기 테스트를 해도 화면벗어남이나 깨짐이 없어야 한다. 고정형 px값을 사용하지 않고 유동형 레이아웃(%)를 사용한다.

2021.12.22

링크 시 매개변수(parameter)파라미터 값 넘기기

귤 = 매개변수 링크 시 매개변수(parameter)파라미터 값 넘기기 페이지 이동 시 JavaScript를 이용하여 parameter값을 전달받을 수 있다. 매개변수 1개 일 때 링크된 페이지 매개변수 2개 일 때 링크된 페이지 const obj = { 0: "bFleta: 16.61", 1: "pCHERRY: 8.53", } const newObj = Object.values(obj).reduce((acc, cur_ => { const [key, value] = cur.splite(": "); acc[key] = Number(value); return acc; }, {}); console.log(newObj); // { bFleta: 16.62, pCHERRY: 8.53 }

2021.12.21