728x90 반응형 html32 [CSS3][JAVASCRIPT/JQUERY]유튜브 동영상 반응형으로 삽입하는 두가지 방법 단순히 iframe을 이용해 동영삽을 삽입할 경우 비율이 달라지기 때문에 화면 크기에 따라 동영상 상하 또는 좌우에 까맣게 빈 영역이 생긴다. 이를 없애주기 위해 동영상영역도 반응형으로 넣어줘야 한다. 두가지 방법중 한가지만 적용하면된다. 1. CSS로 적용하는 경우 2. JAVASCRIPT로 적용하는 경우 $(window).resize(function(){resizeYoutube();}); $(function(){resizeYoutube();}); function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("wid.. 2019. 4. 8. [HTML5] html lang 속성 웹접근성 요소 중 하나 스크린리더가 en의 경우 영어 그대로 읽어주고, ko의 경우 영어를 해석해서 읽어준다. 2019. 4. 8. [HTML5] 반응협웹을 구현하기위한 메타태그 뷰포트 모바일 우선! viewport를 선언하지 않으면 미디어쿼리로 반응형 웹으로 제작하더라도 모바일 기기에서 제대로 작동하지 않음 * width 가로 크기 - 숫자로 크기를 지정할 수도 있음 - device-width 로 값을 지정할 경우 기기의 화면 크기에 맞춰짐 height=device-height 값으로 세로크기의 비율도 지정할 수 있음. * initial-scale 로드되었을 때 줌 레벨 1.0 (= 100%) * maximum-scale 최대 줌 레벨 지정 기본값 0.25 * minimum-scale 최소 줌 레벨 지정 기본값 1.6 * user-scalable 확대축소 가능한지 yes, no 값으로 지정 기본값 yes no값으로 설정하면 input영역 선택시 확대되는 것을 막고, 사용자가 화면을 확.. 2019. 4. 8. [HTML5] 웹사이트 제작시 아이폰(IOS) 전화번호 색깔 반응형웹 제작시 아이폰에서 전화번호(숫자) 부분만 색깔이 다르게 변하는 경우가 발생한다. 자동으로 전화번호를 인식해 링크로 변환해주기때문.. 그걸 방지하기 위해서는 html 코드 상단 head부분에 메타태그를 추가해주면 문제가 해결된다! 메타태그를 추가한다. 2019. 4. 8. 이전 1 ··· 5 6 7 8 다음 728x90 반응형