파비콘, HTML5shiv, 조건부 주석

파비콘

웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫습니다.

파비콘(favicon) 실전 정리

적어도 아래의 ICO 파일은 준비합니다./p>

크기	파일명	용도
16x16 & 32x32	favicon.ico	IE를 위해 필요한 기본입니다.

조금 느려지더라도 iOS와 Android를 고려하겠다면 아래와 같은 PNG 파일을 준비합니다.

크기	파일명	용도
152x152	favicon-152.png	일반적으로 iOS와 Android에서 사용하는 아이콘, 기기에 따라 자동으로 크기가 줄여집니다.

좀 더 완벽한 파비콘을 설정하기 원한다면 아래의 표를 참고하여 PNG 파일을 준비하도록 합니다.

크기	파일명	용도
32x32	favicon-32.png	일부 오래된 하지만 너무 오래된 Chrome은 ICO를 제대로 처리하지 못합니다.
57x57	favicon-57.png	표준 iOS 홈스크린(iPad Touch, iPhone 3G의 1세대)
72x72	favicon-72.png	iPad 홈스크린 아이콘
96x96	favicon-96.png	구글TV 아이콘
120x120	favicon-120.png	iPhone 레티나(retina) 터치 아이콘(Change for iOS 7: up from 114x114)
128x128	favicon-128.png	Chrome 웹스토어 아이콘
144x144	favicon-144.png	고정(pinned)된 IE10 매트로 타일
152x152	favicon-152.png	iPad 레티나 터치 아이콘(Change for iOS 7: up from 144x144)
195x195	favicon-195.png	Opera 스피드 다이얼 아이콘
228x228	favicon-228.png	Opera Coast 아이콘

파비콘(favicon)과 IE 브라우저 유의사항

• IE8~10은 페이지의 첫 방문에 바로 파비콘을 표시해줍니다.
• IE7은 첫번째 방문은 무시하고 재방문시에 파비콘을 표시해줍니다.
• IE6은 사이트를 북마크를 한 후 브라우저를 다시 열면 표시해줍니다. IE6은 브라우저 캐시가 삭제 될 때마다 파비콘을 삭제하며, 사이트가 다시 북마크된다거나 파비콘이 어떻게든 다시 로드 될때까지 파비콘을 표시하지 않습니다.

HTML5shiv

새로운 HTML5 섹셔닝 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x 에서도 작동하도록 해주는 라이브러리입니다.

• ShivMethods 옵션(document.createElement)과 html5.createElement 메소드는 부모노드를 가진 분리되지 읺은 요소를 생성합니다. (#64를 확인합니다/).
• 복제노드(cloneNode)의 문제는 현재 HTML5 Shiv에 의해 해결되지 않는 문제입니다. HTML5 요소는 동적으로 생성 될 수 있지만, 모든 경우에 복제되진 않습니다.
• HTML5 Shiv의 printshiv 버전은 인쇄 스타일과 인쇄 전체 DOM을 변경합니다. 이것은 복잡한 웹사이트나 많은 양의 인쇄 스타일을 가질경우 성능 및 스타일 문제가 발생할 수 있습니다. 해결방법은 IE6~8에 대한 인쇄 스타일을 구현하는 또 다른 기술인 HTML5 Shiv의 htc-branch를 사용하는 것입니다.

IE 조건부 주석

IE10 미만에서만 작동하는 조건문으로, 이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인등을 삽입하는 용도로 자주 사용됩니다.

조건부

• ! : 아니다(not) - 예) [if !ie] ie가 아니라면
• lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면
• lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면
• gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면
• gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다
• () : 우선처리
• & : 그리고(and) - 예) [if (gte ie 7)&(lt ie 9)] ie7 이상이고 ie9 미만이라면
• | : 또는(or) - 예) [if (ie 7)|(ie 8)] ie7 이거나 ie8 이라면

image 출처 : https://cdn.dribbble.com/users/103909/screenshots/5304136/flavio-03_2x.png