CATEGORIES
HTML5의 Video 태그를 사용하여 미디어 파일을 재생시 autoplay 속성을 사용하여 자동 재생하는 것이 가능합니다. 하지만 모바일의 경우 자동재생이 되지 않을 수 있습니다. 왜 모바일에서만 자동재생 기능이 되지 않을까요?# 모바일에서 Video 자동영상 안되는 이유이유는 모바일 브라우저에서 허용되기 않기 때문입니다. 만약 모바일 환경의 안드로이드폰이라면 자동 재생시 음소거를 설정해두세요. 음소거 영상의 경우에만 자동재생이 허용됩니다. 즉 video 태그에 muted와 autoplay 속성이 동시에 필요합니다.# HTML5 모바일폰 자동재생하기아래 에제는 간단하게 모바일에서 재생 가능하도록 변경한 코드입니다.<video autoplay muted> <source src="test.mp4" type=
Last Modified : 2018-01-29 07:15:08CSS의 미디어 쿼리 @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
Last Modified : 2016-06-20 08:12:03CSS의 미디어 쿼리(Media Query)는 IE 구버전에서 정상적으로 동작하지 않는다. 만약 IE 8 에서 미디어 쿼리를 사용하려면 어떻게 해야할까? 사실 가장 좋은 방법은 IE 8을 지원하지 않는 방법이다. 그 이유는 간단한데 더 이상 MS에서 Support하지 않기 때문에 보안 이슈가 발생할 수 있기 때문이다...어쨌든 이를 해결하기 위한 좋은 대안이 있는데 이는 바로 Google에서 제공하는 오픈소스를 활용하는 방법이다.이 방법을 사용하면 대부분의 미디어 쿼리가 잘 동작함을 알 수 있다. 물론 완벽을 보장할 수 없으나 개인적으로 기대 이상의 미디어 쿼리를 보여준다. 이를 적용할 경우 해당 소스를 cdn 또는 서버에 저장하여 사용할 수 있다. 해당 소스는 아래 링크에서 받을 수 있다.* Link UR
Last Modified : 2016-04-01 18:34:34CSS media query의 스타일을 지정하는 방법입니다. 다만 다양한 방법으로 지정할 수 있습니다. 아래를 바주세요.CSS에 미디어쿼리(mediaquery)를 적용하는 방법은 크게 두 가지가 있습니다. <link media="..."> 처럼 직접 screen 속성을 지정하여 외부 파일을 import하는 방법이 있구요 @screen을 사용해 style 내부에 추가해 사용하는 방법이 있습니다.- <link>태그를 사용하여 설정하는 방법- style 태그 내부에 @media를 사용하는 방법각각 간단하게 코드로 나타내면 아래와 같습니다. 먼저 link 태그입니다.! link 태그를 사용한 미디어쿼리일단 태그를 살펴보겠습니다.<link rel="stylesheet" media="screen and (max-dev
Last Modified : 2019-08-12 22:09:47안녕하세요! 모바일 웹페이지 제작을 위한 디바이스별 CSS 미디어쿼리(media query)를 아래에 정리하고 있습니다. 미디어 쿼리는 반응형 웹을 구현하는데 매우 중요한 css 스킬입니다. 처음 등장하였을 때는 기준이 되는 기준 resolution이 없었으나 현재는 많이 다릅니다. 아래와 같은 기준이 많이 쓰이지 않죠...요즘은 모바일의 경우 786px을 기준으로 구분하는 것이 대부분입니다. 테블릿과 랩탑의 경우는 비슷하기 때문에 굳이 구분할 필요는 없습니다. 그렇다면 각각의 디바이스에서 적용 가능한 resolution size를 알아보도록 하겠습니다.1. iPhone- Resolution : 320 x 4802. iPhone 4 이상 Retina 디스플레이- Resolution : 320 x 480-
Last Modified : 2018-03-14 02:22:30
한류의 열풍과 못지않게 한국 패션에 대한 관심은 전세계를 향해 넓리 뻣어가고 있는데요~ 국내 웹사이트중 케이패션(k-fashion)을 소개하고 알리는 인터넷 패션매체는 무엇이 있는지 알아보겠습니다.# K-Fashion을 볼 수 있는 패션 웹사이트! 패션서울 http://www.fashionseoul.com특히 웹 및 소셜 sns가 강점으로 많은 기사를 접할 수 있는 패션서울 웹사이트입니다. 모바일 및 태블릿에 최적화가 잘 되있는 사이트입니다.* 보유 카테고리fashionbrandcelebritycollectionevent! 어패럴 뉴스 http://appnews.co.kr패션 및 패션산업에 대한 매우 광범위한 정보를 전하는 매체로 다양한 글들을 한 곳에서 볼 수 있습니다. 많은 사람에게 알려져 있는 패션 전
Last Modified : 2015-11-16 09:38:43
최근 웹사이트를 구축할 때 반응형 웹사이트를 많이 볼 수 있습니다. 반응형웹 사이트가 왜 인기있는지 그리고 왜 반응형웹을 필요로 할까요?"내 디바이스가 무엇이든 알아서 화면을 맞춰주는 반응형웹"다시 말하면 반응형웹 (Responsove Web)은 다양한 디바이스... 데스크탑, 노트북, 모바일 등에서 브라우저의 크기에 즉각적으로 변화하여 최적화된 인터페이스를 제공하는 웹페이지입니다.! 반응형웹의 장점간단하게 장점을 정리하면 다음과 같습니다.모바일웹, 데스크탑웹, 랩탑웹 등등 따로 만들 필요 없음하나의 웹이므로 관리 및 업데이트가 용이대부분 CSS만으로 구현이 가능최근에는 예전과 달리 구현이 어렵지 않고 간단합니다. CSS의 미디어쿼리는 대부분의 브라우저에서 모두 지원하므로 수준 높은 웹사이트 구현이 가능합니
Last Modified : 2019-08-07 21:33:18