www.opera.com/developer/tools/mobile/
안드로이드 모바일 사이트 확인
ibbdemo2
아이폰 모바일 사이트 확인
http://code.google.com/p/ibbdemo2/downloads/list
72dpi / 96dpi
font-size: 12px; -> desktop
font-size: 14px; -> mobile
font-size: 15px; -> iphone4
@media screen and (-webkit-min-device-pixel-retio:1.5){} <-- 아이폰 스크린 미디어 쿼리
----------------------------------------------------------------------------------------
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>2012 LONDON OLYMPIC</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
모바일 페이지에 기본 스크립트
----------------------------------------------------------------------------------------
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
미디어쿼리명세)
http://www.w3.org/TR/css3-mediaqueries/
미디어 쿼리가 모음이 있는 사이트
---------------------------------------------------------------------------------------------------
article 에 경우 재배포가 가능하다
section 경우 재배포가 안됩니다.
---------------------------------------------------------------------------------------------------
6. @font-face를 사용해 동적으로 폰트를 추가하는 방법
IE -> Embedded Open Type(eot)
Chrome, Firefox, Safari, Opera -> True Type Font(ttf), Open Type Font(otf)
mobileSafari -> SVG Font(svg)
--------------------------------
@font-face{
font-family: NGothic;
src:url(../fonts/NanumGothic.eot);
src:url(../fonts/NanumGothic.eot?#iefix) format('embedded-opentype'),
url(../fonts/NanumGothic.woff) format('woff'),
url(../fonts/NanumGothic.ttf) format('truetype')
}
body { font-family: NGothic, '돋음',dutum, Helvetica, sans-serif; }
구글에서 지원하는 폰트 서체 (영문)
http://fonts.googleapis.com/
Racing+Sans+One < --- 'Racing Sans One' 표시해야만 적용됨
text-shadow: 0.1em 0.1em 3px rgba(0, 0, 0, 0.5);
/* text-shadow: x-offset y-offset blur color; */
box-shadow: 3px 3px 4px rgba(0,0,0,0.9);
색상값
#foo
#ffoooo
#red
rgb (255,255,255)
rgba (255,255,255,0.8)
rgb (100%, 100%, 100, 0%)
hsb (0 100% 69%)
w3schools.com
http://html5.clearboth.org/sections.html#the-article-element
'html5' 카테고리의 다른 글
ResponseEve - 반응형 웹디자인 템플릿 다운로드 사이트 소개 (0) | 2013.02.27 |
---|---|
미디어쿼리 (0) | 2012.11.03 |
0908 토요일 html5 (0) | 2012.09.08 |