|
CSS Sprite Image 도 이 작업을 도와주는 툴이 있다.
CSS Sprite Generator 웹 사이트로 가면 되는데 주소는 아래와 같다.
http://spritegen.website-performance.org/
사용법은 아래 링크를 참고 하자.
출처 : http://coronasdk.tistory.com/349
ㅁ ::selection style 지정
::selection 스타일 속성을 이용하여 텍스트 영역을 드래그했을때, 배경색을 원하는 색으로 변경 할 수 있다. 이는 CSS3에서 가능하면 지원 브라우져는 IE9(포함 이상 버전), 크롬, 사파리가 지원한다. 파이어폭스는 -moz-selection 스타일 속성을 이용해서 같은 효과를 낼수 있다.
[그림 1 - ::selection 적용 전 ]
[그림 1]은 스타일이 적용 전의 모습을 캡쳐한 것이다. 아래 [그림 2]는 스타일을 적용한 모습이다.
[그림 2 - ::selection 적용 후 ]
ㅁ 스타일 적용
*::selection { background: #C32A22; color: #DFDCDC; } *::-moz-selection { background: #C32A22; color: #DFDCDC; } |
1 . 주소 창 숨기기.
아이폰 네이티브앱과 같이 전체화면을 사용하는 것과 같이 주소표시줄을
완전히 숨기도록 처리할 수 있다. 이를 설정하기 위해서는
<meta>태그를 추가해주면 된다.
|
<meta name=”apple-mobile-web-app-capable” content=”yes” /> |
(**이는 iOS에만 적용이
된다.)
2 . 상태바 색상 변경.
iOS 네이티브앱과 같이 상태바의 색상을 회색(default), 검정(black), 반투명 검정(black-translucent)으로 변경
할 수 있다. 이 기능 또한 <mete>태그로
설정이 가능하다. 그리고 “apple-mobile-web-app-capable”
이름을 같은 메타태그가 지정이 되어 있어야 만이 적용된다.
|
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> |
3. iOS 런치(Launch) 이미지 설정.
iOS 앱 개발할 때 XCode에서 런치이미지를 등록하는 것과 마찬가지로 <link>태그를 이용하여 같은 효과를 줄 수 있다. 이는
“apple-touch-startup-image” 속성을 이용해서 지정하면 된다.
|
<link rel=”apple-touch-startup-image” href=”/이미지경로/startup.png” /> |
Startup 이미지는 iOS 해상도 별로 따로 지정해 줄 수도 있다.
|
<!--iPhone splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup320x460.png” media=”(device-width:320px)” />
<!--iPhone (Retina) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup640x920.png” media=”(device-width:320px) and (-webkit-device-pixel-ratio: 2)” />
<!--iPad (portrait) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup768x1004.png” media=”(device-width:768px) and (orientation: portrait)” />
<!--iPad (landscape) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup748x1024.png” media=”(device-width:768px) and (orientation: landscape)” />
<!--iPad (Retina , portrait) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup1536x2008.png” media=”(device-width:1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)” />
<!--iPad (Retina , landscape) splash screen --> <link rel=”apple-touch-startup-image” href=”/이미지경로/startup1496x2048.png” media=”(device-width:1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)” />
|
**1,2,3은 URL직접 입력이 아닌 홈 화면에 등록된 바로가기 아이콘을 터치해서 실행된 경우에만 적용이 된다.
