HTML5의 Video 태그를 사용하여 미디어 파일을 재생시 autoplay 속성을 사용하여 자동 재생하는 것이 가능합니다. 하지만 모바일의 경우 자동재생이 되지 않을 수 있습니다. 왜 모바일에서만 자동재생 기능이 되지 않을까요?# 모바일에서 Video 자동영상 안되는 이유이유는 모바일 브라우저에서 허용되기 않기 때문입니다. 만약 모바일 환경의 안드로이드폰이라면 자동 재생시 음소거를 설정해두세요. 음소거 영상의 경우에만 자동재생이 허용됩니다. 즉 video 태그에 muted와 autoplay 속성이 동시에 필요합니다.# HTML5 모바일폰 자동재생하기아래 에제는 간단하게 모바일에서 재생 가능하도록 변경한 코드입니다.<video autoplay muted> <source src="test.mp4" type="video/mp4"><source/></video>이 방법이 아니라면 자바스크립트를 추가하여 페이지 로딩 후 video 영상에 play() 이벤트 메소드를 실행하도록 하는 방법도
2017-08-03 20:09:37CSS의 미디어 쿼리(Media Query)는 IE 구버전에서 정상적으로 동작하지 않는다. 만약 IE 8 에서 미디어 쿼리를 사용하려면 어떻게 해야할까? 사실 가장 좋은 방법은 IE 8을 지원하지 않는 방법이다. 그 이유는 간단한데 더 이상 MS에서 Support하지 않기 때문에 보안 이슈가 발생할 수 있기 때문이다...어쨌든 이를 해결하기 위한 좋은 대안이 있는데 이는 바로 Google에서 제공하는 오픈소스를 활용하는 방법이다.이 방법을 사용하면 대부분의 미디어 쿼리가 잘 동작함을 알 수 있다. 물론 완벽을 보장할 수 없으나 개인적으로 기대 이상의 미디어 쿼리를 보여준다. 이를 적용할 경우 해당 소스를 cdn 또는 서버에 저장하여 사용할 수 있다. 해당 소스는 아래 링크에서 받을 수 있다.* Link URL 바로가기https://code.google.com/archive/p/css3-mediaqueries-js/참고로 해당코드는 @import 방식으로 동작하지 않는다. 이를 사용
2016-04-01 18:29:28최근 웹사이트를 구축할 때 반응형 웹사이트를 많이 볼 수 있습니다. 반응형웹 사이트가 왜 유용한지 굳이 말할 필요가 없겠지만 한줄로 요약하면 ..."내 디바이스가 무엇이든 최적화된 UI / UX를 주렴!!"이라고 할 수 있다... 어쨌든 퍼블리셔의 기본 소양이 된 반응형 웹 구축에 대해 간단하고 짧지만 굵직한 한 글을 적어보고자 한다.반응형웹 (Responsove Web)은 다양한 디바이스... 데스크탑, 노트북, 모바일 등에서 브라우저의 크기에 즉각적으로 변화하여 최적화된 인터페이스를 제공해야한다.이를 구현하기 위해서는 html은 물론이고 css와 자바스크립트(제이쿼리)등을 활용하여야 한다... 그렇다고 너무 걱정할 필요는 없다. 반응형웹이 어려울 수도 있지만 웹이 복잡하냐 간단함하냐의 차이일 뿐 간단한 웹은 간단하게 반응형이 가능하기 때문이다.!! 반응형웹 구축에 꼭 알아야 할 내용아래 사항들은 필수적이거나 알면 매우 유용한 내용들을 정리한 부분이다. 대부분 간단하지만 쉽게 간과
2016-03-15 23:50:09한류의 열풍과 못지않게 한국 패션에 대한 관심은 전세계를 향해 넓리 뻣어가고 있는데요~ 국내 웹사이트중 케이패션(k-fashion)을 소개하고 알리는 인터넷 패션매체는 무엇이 있는지 알아보겠습니다.# K-Fashion을 볼 수 있는 패션 웹사이트! 패션서울 http://www.fashionseoul.com특히 웹 및 소셜 sns가 강점으로 많은 기사를 접할 수 있는 패션서울 웹사이트입니다. 모바일 및 태블릿에 최적화가 잘 되있는 사이트입니다.* 보유 카테고리fashionbrandcelebritycollectionevent! 어패럴 뉴스 http://appnews.co.kr패션 및 패션산업에 대한 매우 광범위한 정보를 전하는 매체로 다양한 글들을 한 곳에서 볼 수 있습니다. 많은 사람에게 알려져 있는 패션 전문 웹사이트입니다.* 보유 카테고리Fashion newsmarketinfotrendviewopinionhotissuefashionphoto! 패션비즈 http://fashionbi
2015-10-29 08:51:49안녕하세요! 모바일 웹페이지 제작을 위한 디바이스별 CSS 미디어쿼리(media query)를 아래에 정리하고 있습니다. 미디어 쿼리는 반응형 웹을 구현하는데 매우 중요한 css 스킬입니다. 처음 등장하였을 때는 기준이 되는 기준 resolution이 없었으나 현재는 많이 다릅니다. 아래와 같은 기준이 많이 쓰이지 않죠...요즘은 모바일의 경우 786px을 기준으로 구분하는 것이 대부분입니다. 테블릿과 랩탑의 경우는 비슷하기 때문에 굳이 구분할 필요는 없습니다. 그렇다면 각각의 디바이스에서 적용 가능한 resolution size를 알아보도록 하겠습니다.1. iPhone- Resolution : 320 x 4802. iPhone 4 이상 Retina 디스플레이- Resolution : 320 x 480- Pixel Density : 23. Samsung Galaxy S I, II- Resolution : 480 x 800- Pixel Density : 1.54. Samsung Ga
2014-02-05 23:20:25CSS media query의 스타일을 지정하는 방법을 알아보겠습니다. 어떻게할까요?CSS에 media query를 적용하는 방법은 두 가지가 있습니다. <link media="..."> 처럼 직접 screen 속성을 지정하여 외부 파일을 import하는 방법이 있구요 @screen을 사용해 style 내부에 추가해 사용하는 방법이 있습니다. 아래 예를 보시면...첫 번째 방법...<link media="screen and (max-device-width: 480px) and ...">두 번째 방법...<style type="text/css">@media screen and (max-device-width: 480px) and ... {body { margin: 0 auto;}}</style>// 뒤에 있는 and 기호를 사용하면 해당 디바이스의 범위를 중복하여 선언할 수가 있습니다.<style type="text/css">@media screen and (max-device-wid
2014-01-14 14:48:21CSS의 미디어 쿼리 @media를 작성하는 경우 웹페이지에서 두가지 코드 타입을 볼 수 있습니다. 바로 @media screen 그리고 @media only screen입니다. 과연 이 둘의 차이점은 무엇이고 왜 다르게 사용하는 걸까요? 그 이유에 대하여 알아보고자 합니다.# Example 1@media screen (min-width: 1024px) { color: #000;}# Example 2@media only screen (min-width: 1024px) { color: #fff;}! @media only screen과 @media screen의 차이점먼저 해당하는 두 코드를 사용했을때 각각의 화면에 나타나게 될 결과는 동일합니다. 하지만 차이점은 무엇일까요? 이 부분에 대하여 only 키워드를 사용한 경우 w3c에 따르면 예전의 user agents를 사용된 스타일 시트가 보이지 않도록 하는 역할을 한다고 합니다. 뭔가 클리어 하지는 않지만 결론은 최근에 사용되
2014-01-11 17:38:26
