본문 바로가기

반응형

Story/html/css

모바일 폰트 고정 모바일 디바이스에서 폰트가 크기가 다르게 보이는경우가 있다. 다음과 같은 스타일을 사용하면 된다. * { -webkit-text-size-adjust:none; -webkit-text-size-adjust - auto | none | N% (default auto) } 또는 해당하는 부분에만 위의 스타일을 적용 출처 : http://blog.naver.com/PostView.nhn?blogId=redflaghk&logNo=40156122631 더보기
모바일 웹 개발시 유용자료 (meta 설정 등등) 출처 : http://cafe.naver.com/domfam/4738 웹디들의커뮤니티카페 1. meta & link [Viewport] - 기본설정 모바일 웹브라우저의 기본 화면크기 및 확대/축소 배율등을 정하는 모바일 웹사이트 및 웹앱을 만들시 제일 중요한 Meta 태그입니다. 기본적으로 아이폰의 사파리 웹브라우저는 넓이가 980px인 해상도로 보여주기 때문에 아이폰에서 아이폰3G(S)에 맞춰 디자인 한 웹페이지(320x480)를 본다고 가정한 경우 뷰포트를 설정하지 않는다면 가로 좌우 여백이 330px의 여백이 남는 아주 작은 화면을 보게 됩니다. 다음처럼 뷰포트를 사용하면 1:1 비율로 아이폰의 해상도에 맞게 최적화 할 수 있습니다. width : 넓이 - device-width | N px (20.. 더보기
Messaging actions compatibility table Messaging actions compatibility table Browser/platform sms:/smsto: scheme mms:/mmsto: scheme mailto: scheme Safari Only sms: and in iPhone (not iPad/iPod). No body support. No Yes Android browser Yes, no number or body support Yes, no number or body support Yes Symbian/S60 Only sms: Only mmsto: Yes Nokia Series 40 No (use mailto: instead) No Yes (it can also be used for SMS and MMS) webOS Only s.. 더보기
반응형 웹 - IE9 이전 버전에서도 작동되게 하기 CSS3 @media 쿼리는 IE6~8 브라우저에서는 지원되지 않는다. 그래서 Javascript로 구현된 respond.js를 이용해서 이 문제를 해결해야한다. https://github.com/scottjehl/Respond 에서 git로 받거나 zipbal이나 tarbal을 받아서 respond.min.js를 코드에 추가한다. respond.js를 추가한 코드를 IE8에서 적용을 해보자. (respond.js는 IE6까지 지원한다.) ... 출처 : http://otep.tistory.com/81 respond.src.js /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott .. 더보기
세로로 글씨 쓰기 writing-mode: tb-rl; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); 세로로 글씨 쓰기 세로로 글씨 쓰기 더보기
통신판매사업자 링크 거는 방법 통신판매사업자 링크 거는 방법 출처 http://www.ftc.go.kr/info/bizinfo/communicationList.jsp http://www.ftc.go.kr/info/bizinfo/popType01.jsp [html 적용예시] function onopen() { var url = "http://www.ftc.go.kr/info/bizinfo/communicationViewPopup.jsp?wrkr_no="+frm1.wrkr_no.value; window.open(url, "communicationViewPopup", "width=750, height=700;"); } < input name="wrkr_n.. 더보기
구글 가상 키보드 google virtual-keyboard 출처 https://developers.google.com/virtual-keyboard/v1/getting_started Type in Russian 더보기
구글 map api 언어 구글 api 사용시 국가(언어) 설정 ( &language=zh-CN 또는 &hl=zh-CN ) 출처 https://spreadsheets.google.com/spreadsheet/pub?key=0Ah0xU81penP1cDlwZHdzYWkyaERNc0xrWHNvTTA1S1E&gid=1 language code language name v2 v3 . ar ARABIC Yes Yes . eu BASQUE No Yes . bg BULGARIAN Yes Yes . bn BENGALI Yes Yes . ca CATALAN Yes Yes . cs CZECH Yes Yes . da DANISH Yes Yes . de GERMAN Yes Yes . el GREEK Yes Yes . en ENGLISH Yes Yes ... 더보기
ie8 투명 png 에서 opacity 적용해서 전환 효과시 버그 해결방법 Hey, I don't know if you're still looking for an answer. A couple of days ago I had the same issue animating a div with a PNG image inside. I tried many solutions and the only one that worked fine is one I coded myself. The issue seems to be IE lacking opacity support and proper PNG support, so it breaks PNG display after applying an opacity effect (I believe animation frameworks rely on the pro.. 더보기
유튜브(YouTube) 동영상에서 썸네일(Thumbnail) 이미지 가져오기 How To Get YouTube Thumbnail Images How To Download A Thumbnail Image From YouTube There are a few different ways that you can get thumbnails from a YouTube video, one of which is to use YouTube's Video API to extract the thumbnail. YouTube API responses may contain multiple thumbnail images for a video, each of which is identified by a tag. Creating a call to YouTube to get the video and thumbn.. 더보기

반응형