웹 관련 기록/HTML,CSS19 모바일 <video> 자동 재생 모바일에서 autoplay 속성을 붙여도 비디오파일에 오디오 트랙이 있으면 자동재생 기능이 동작하지 않는다고 합니다.(자세한 내용은 각 디바이스의 운영체제 레퍼런스를 참조해야 할 것 같네요.)꼼수로, muted 속성을 같이 붙이면 자동재생이 된다고하네요.하지만 이마저도 아이폰의 경우 비디오는 전체화면으로 재생되어야 한다는 조건이 있어서 자동재생이 안된다고 합니다.그래도 ios10 부터는 playsinline 속성을 붙이면 자동재생이 가능하다고 하네요. 최종적으로 샘플 코드는 아래와 같습니다. 1cs 2017. 8. 22. <meta> 태그 viewport의 content 값 일반적으로 사용하는 샘플1cs 속성 값들 속성 설명 width 디바이스의 가상 뷰포트 넓이를 지정합니다.애플 사파리 레퍼에 따르면 200 ~ 10,000 height 디바이스의 가상 뷰포트 높이. 애플 사파리 레퍼에 따르면 233 ~ 10,000 device-width 디바이스 화면의 물리적 넓이. device-height 디바이스 화면의 물리적 높이.애플 사파리 레퍼에 따르면 0보다 크고 10.0 이하의 값 허용 initial-scale 페이지 방문시 기본 확대 배율.1이 곧 100%. 최대 10까지 허용 됨. minimum-scale 현재 방문 페이지의 최소 줌 배율.1일 때 축소를 허용하지 않음.애플 사파리 레퍼에 따르면 기본값 0.250보다 크고 10.0 이하의 값 허용 maximum-scale .. 2017. 8. 22. scss, calc 함수 안에서 변수 사용 방법. 1 2 3 4 body{ $var : 100px ; width : calc(100% - #{$var}); } 2017. 8. 14. 필요할 것 같아 저장하는 IE용 CSS Hack Underscore Hack프로퍼티의 가장 앞부분에 언더스코어(_)를 붙임.Win IE4~6 #header {_width:100px} Star Hack셀렉트 앞에 *html을 붙임.Win IE4~6, Mac IE 4~5. *html #header {width:100px} Star Hack2셀렉트 앞에 *+html body 또는 *:first-child+html 을 붙이면 IE7 or Opera 에서 적용. *+html body #header {width:100px} /* IE7, OPERA 적용 */ *:first-child+html #header {width:100px} /* IE7 적용 */ Star Hack3프로퍼티의 가장 앞부분에 언더스코어(*)를 붙이면 IE7에서만 적용. #header {*wi.. 2017. 8. 10. css 단위 브라우저별 지원 여부 css 단위 브라우저별 지원 여부 단위 크롬 IE 파이어폭스 사파리 em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 ch 27.0 9.0 1.0 7.0 rem 4.0 9.0 3.6 4.1 vh, vw 20.0 9.0 19.0 6.0 vmin 20.0 9.0* 19.0 6.0 vmax 26.0 - 19.0 7.0 *IE9에서 vmin은 vm 으로 키워드가 다름.*vmax는 IE뿐 아니라 Edge에서도 미지원. 참조https://www.w3schools.com/cssref/css_units.asphttp://caniuse.com/#feat=viewport-units 2017. 7. 20. css3, 단위 rem(root em) root em의 약자 라는 듯. 최상위 엘리먼트의 폰트 크기의 영향만 받는 단위보통 최상위 엘리먼트라면 html 태그. 지원 브라우저IE 11 / Edge 14버전 이후 / Firefox 52버전 이후 / Chrome 49버전 이후 / Safari 10.1버전 이후 / Opera 45버전 이후 지원브라우저 정보 확인한 곳.http://caniuse.com/#feat=rem 2017. 7. 20. 이전 1 2 3 4 다음 320x100