Coding Story

자신이 만든 페이지를 모바일 기기에서 열어본적이 있는가?

웹에선 잘나오는 이런화면도. 모바일에서는

이런식으로 자주 작게..나오는 현상이 발생한다.

이럴때 사용하는 태그가

meta태그의 viewport이다.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

이렇게 한줄만 넣어주면,

모바일 화면에 맞춰서 나오게 된다.

또 중요한게

user-scalable인데, yes를 주면 사용자가 기기에서 화면크기를 줄이거나 확대할수있다.

아이폰의 경우 사파리에서 웹 사이트를 홈화면(=바탕화면)에 추가 할수 있다.

웹 앱의 경우 홈버튼에 추가된 형태로 이용되어지도록 의도되어 많이 개발되기도 한다.

저렇게 아이콘이 나오게되는데, 그러면 홈화면에 저 아이콘이 해당 웹앱의 모양으로 추가된다.

방법은..

<link rel="apple-touch-icon" href="Sample.png">

저번에 알아보았던 파비콘과 달리 png파일을 이용할수 있다.

참고로 아이폰3GS의 경우 57X57 사이즈를 앱 아이콘으로 이용하며

아이폰4, 아이폰4S에서는 114X114(retina)크기로 제작하면 된다.

그리고 곧 출시될 아이폰5에서는 double retina display로 228X228로 하면될거같네요.

*iOS에서 바로가기 아이콘의 경우 기본적으로 위에서 부터 아래로 선명도를 달리하여 광택효과를 주게 되는데 만약 이 효과를 금지하려면 rel에 apple-touch-icon 대신 apple-icon-precomposed 를 설정하면 됩니다.

브라우저를 이용하다보면 

이렇게 탭에 웹 사이트 타이틀이 나오고

왼쪽에 아이콘이 하나 나오는데 저 아이콘을 파비콘이라 부른다.

파비콘은 브라우저마다 다르지만 타이틀 앞에도 있지만

이렇게

↑인터넷 익스플로러에서의 즐겨찾기 ↑크롬에서의 북마크

즐겨찾기,북마크,책갈피 등에서도 쓰이고 있다.

이 파비콘을 우리 웹사이트에도 적용해보려고 한다.

준비물 -> 먼저 파비콘 파일이 필요한데,

파비콘은 png,jpg,gif 등의 이미지 파일이 아닌 'ico'확장자를 가진 파일이어야 한다.

(웹검색을 하다보면 png를 ico로 바꾸는 방법이 많이 나와 있으니 참고하세요.)

필자같은 경우는 '애플웹'이라는 컨셉의 페이지를 운영하고 있으므로. 애플 아이콘을 파비콘으로 쓰고 있다.

파비콘 파일을 준비했으면 각자 호스팅에 올려주시고.

<link rel="shortcut icon" href="favicon.ico" />

href 속성내에 파비콘 경로를 써주면 된다.

*파비콘은 기본적으로 루트에 favicon.ico를 쓰면 해당 페이지의

파비콘이 자동적으로 지정되지만, link 태그를 이용해 지정해 주는것이 일반적이다.