블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

'icon'에 해당되는 글 1건

  1. 2013.04.16 [모바일 웹] 모바일 웹 북마크 아이콘 지정하기 3



       아이폰과 안드로이드 폰은 웹 페이지의 바로가기를 장치 화면에 추가하는 기능을 제공해주고 있다. 그래서 앱과 같이 아이콘을 설정해놔서 사용자가 앱 실행하는 방법과 같이 아이콘을 클릭해서 모바일 사이트에 접근할 수 있도록 할 수 있다. 아이폰과 안드로이드 아이콘 등록 방법은 link태그를 이용하면 되는데, 둘이 설정하는 방법은 조금 다르다.

1. iOS


<link rel=”apple-touch-icon” href=”/이미지경로/icon.png” />



2.
안드로이드(Android)


<link rel=”shortcut icon” href=”/이미지경로/icon.png” />


아이콘 사이즈는 안드로이는 같은 경우 72x72(px) png이미지를 지정하면 된다. 아이폰 같은 경우는 버전 별로 아이콘 이미지를 따로 지정해 주는 것이 좋다. 자동 리사이즈가 되긴 하지만, 리사이즈 하면 이미지가 깨져 보일 수 있기 때문이다. iOS 아이콘 사이즈는 아래 표를 참고 하길 바란다.

iPhone 3gs

57x57(px)

iPad

72x72(px)

iPhone 4/4s

114x114(px)

New iPad

144x144(px)


iOS
버전별 아이콘 지정하려면, sizes속성을 지정하면 된다. 아래 예제를 참고 하자.


<!-- iPhone icon -->

<link rel=”apple-touch-icon” sizes=”57x57” href=”/이미지경로/icon57x57.png” />

 

<!-- iPad icon -->

<link rel=”apple-touch-icon” sizes=”72x72” href=”/이미지경로/icon72x72.png” />

 

<!-- iPhone icon(Retina) -->

<link rel=”apple-touch-icon” sizes=”114x114” href=”/이미지경로/icon114x114.png” />

 

<!-- iPad icon(Retina) -->

<link rel=”apple-touch-icon” sizes=”144x144” href=”/이미지경로/icon144x144.png” />


아이폰은 자동으로 모서리가 둥글게 되고, 아이콘 위쪽은 밝게, 아래는 어둡게 자동으로 광택 효과가 적용이 된다. 그래서 아이콘 제작할 때 따로 효과를 주지 않아도 되고, 모서리를 둥글게 만들 필요가 없다.
 
아이폰의 자동 이미지 처리 기능을 원하지 않고 원본 이미지 그대로 아이콘을 적용하기 위한 방법도 존재한다. 이는 rel속성에서 apple-touch-icon대신에 apple-touch-icon-precomposed를 지정하면 된다.


<link rel=”apple-touch-icon-precomposed” href=”/이미지경로/icon.png” />

 




Posted by happydong
, |