기본 템플릿
뷰포트(viewport)
뷰포트 <meta> 태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있습니다. 또한 줌 레벨도 조정할 수 있습니다. 아래는 가장 일반적으로 사용되는 설정 입니다.
참고사이트 : https://www.w3schools.com/css/css_rwd_viewport.asp
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
- width = device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다.
- initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다. 0~10 사이의 값을 가집니다.
- minimum-scale : 줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다.
- maximum-scale : 늘릴 수 있는 최대 크기를 지정합니다. 0~10 사이의 값을 가집니다.
- user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정합니다.
파비콘
| 아이콘 사이즈 | 용도 |
| 16×16 & 32×32 | IE에서 사용되는 기본 파비콘 사이즈 32×32 사이즈는 오래된 Chrome에서 ICO파일로 제대로 처리하지 못하므로 PNG파일로 준비한다 |
| 57×57 | 표준 iOS 홈스크린 (iPad Touch, iPhone 3G의 1세대) |
| 60×60 | iPhone iOS7+ |
| 72×72 | 아이패드 홈스크린 아이콘 (iPad non-retina) |
| 76×76 | 아이패드 홈스크린 아이콘 (iPad non-retina iOS 7) |
| 96×96 | 구글TV 아이콘 |
| 114×114 | 아이폰 레티나 (iOS 6 and lower) |
| 120×120 | 아이폰 레티나 터치 (iPhone retina, iOS 7 and higher) (Change for iOS 7: up from 114×114) |
| 128×128 | Chrome 웹스토어와 윈도우8 아이콘 |
| 144×144 | IE10 매트로 타일 |
| 152×152 | 아이패드 터치 (Change for iOS 7: up from 144×144) |
| 167×167 | 아이패드 레티나 터치 (iPad Retina touch) (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152) |
| 180×180 | 아아폰6 plus |
| 195×195 | Opera 스피드 다이얼 아이콘 |
| 196×196 | 안드로이드 크롬브라우저 home screen 아이콘 |
| 228×228 | Opera Coast 아이콘 |
파비콘 생성 사이트 : https://realfavicongenerator.net
( 사이즈 260 X 260 png 파일을 준비해주세요.)
참고사이트 : https://webdir.tistory.com/337