✍ Github_사이트 따라만들기편(HTML-head정리)
-강의로 공부하고, 서칭하면서 정리한 것
✍ meta태그
검색엔진을 위한 Keyword를 정의
페이지 관련 키워드, 한정, 블로그, html<meta name="keyword" content="HTML, meta, tag, element, reference">웹 페이지에 대한 설명(description)을 정의
지금 페이지 관한 설명, 검색해서 나오는 설명에 해당하는 부분<meta name="description" content="HTML meta tag page">문서의 저자(author)를 정의
작성자<meta name="author" content="AHN">5초 뒤에 다른 페이지로 리다이렉트(redirect)
<meta http-equiv="refresh" content="5;url=http://www.tcpschool.com"> . //30초마다 refresh시키기 <meta http-equiv="refresh" content="30">모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0"><head> <meta charset="UTF-8"> <meta name="keyword" content="HTML, meta, tag, element, reference"> <meta name="description" content="HTML meta tag page"> <meta name="author" content="TCPSchool"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML meta tag</title> </head>
✍ vieport태그
-화면 상의 화상 표시 영역
너비를 장치너비로 설정(브라우저 너비를 장치 너비에 맞춤)
<meta name="viewport" content="width=device-width">너비를 장치높이로 설정
<meta name="viewport" content="height=device-height">최소 최대 화면 배율 설정(minimum and maximum scale)
사용자가 극단적으로 화면 축소/확대 하는 것을 방지해줌<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">초기 화면 배율(initial-scale) 설정(zoom 레벨 설정)
<meta name="viewport" content="width=device-width, initial-scale=1.0">사용자가 크기 조절하기를 원치 않을때
<meta name = "viewport" content = "user-scalable=no, width=device-width">//쉼표로 한번에 추가 작성 가능 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"> . //모바일에서 많이 사용되는 태그, 꽉차게 보여주기 <meta name="viewport" content="width=device-width, initial-scale=1.0">
✍ open-graph tag, twitter tag
-open graph는 카카오톡, 페이스북 등이 이를 사용
-트위터: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
<!-- http://ogp.me/ -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="GitHub">
<meta property="og:title" content="Build software better, together">
<meta property="og:description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="og:image" content="img/logo__github.png">
<meta property="og:url" content="https://github.com">
<!-- https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html -->
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="GitHub">
<meta property="twitter:title" content="Build software better, together">
<meta property="twitter:description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="twitter:image" content="img/logo__github.png">
<meta property="twitter:url" content="https://github.com">
✍ favicon 등록하기
-Chrome, Safari, IE는 PNG파비콘을 무시하고 ICO 우선 사용
IE는 ICO만 지원하는 듯<!-- Chrome, Safari, IE --> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">-PNG 지원.
<!-- Firefox, Opera (Chrome and Safari say thanks but no thanks) --> <link rel="icon" href="favicon.png">-ICO 파비콘은 multiple sizes를 지원하기에 하나의 ICO 파일에 여러 사이즈의 아이콘을 넣어 두고 이를 활용할 수 있지만 PNG 파비콘은 이것이 불가능하다. 그런 이유로 각각의 필요한 사이즈를 아래와 같이 모두 선언해야 한다.
<link rel="icon" href="favicon-16.png" sizes="16x16"> <link rel="icon" href="favicon-32.png" sizes="32x32"> <link rel="icon" href="favicon-48.png" sizes="48x48"> <link rel="icon" href="favicon-64.png" sizes="64x64"> <link rel="icon" href="favicon-128.png" sizes="128x128">-iOS 2.0 이상과 Android 2.1 이상에서는 터치(Touch) 아이콘 지정.
해상도 아이콘(152x152) 하나만 준비하면 저해상도에서는 알아서 아이콘의 크기가 변경된다. 다만, 기기의 홈스크린에 아이콘이 추가되면 성능에 부정적일 수는 있다.<link rel="apple-touch-icon" href="favicon.png">-(apple-touch-icon과 유사한) 방문자가 고정(pins)할 경우, 시작화면에 이를 표시한다. 타일 아이콘의 크기는 144x144 PNG 파일이며, 투명한 배경을 사용해야 최상의 결과를 얻을 수 있다.
<meta name="msapplication-TileColor" content="#FFFFFF"> . <meta name="msapplication-TileImage" content="/path/to/favicon-144.png">
👉 파비콘 정리
기본으로 준비해야 될 것
| 크기 | 파일명 | 용도 |
|---|---|---|
| 16x16 & 32x32 | favicon.ico | IE를 위해 필요한 기본 |
iOS와 Android를 고려하겠다면
| 크기 | 파일명 | 용도 |
|---|---|---|
| 152x152 | favicon-152.png | 일반적으로 iOS와 Android에서 사용하는 아이콘, 기기에 따라 자동으로 크기가 줄여진다. |
좀 더 완벽한 파비콘을 설정하기 원한다면
| 크기 | 파일명 | 용도 |
|---|---|---|
| 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 아이콘 |
💡 작명 팁
BEM
작명 규칙
- 일반적인 작명
toggle-btn
__ ~의 일부분
<div class="container">
<div class="container__item"></div>
</div>
-- ~의 상태
<div class="btn--success"></div>
<div class="btn--danger"></div>
<div class="btn--warning"></div>💡 브라우저별 접두사
-webkit- : 사파리, 크롬, Android, iOS, Webkit 엔진을 이용하는 브라우저
-moz- : 파이어폭스, 모질라 브라우저 엔진을 사용하는 브라우저
-o- : 오페라 웹 브라우저에서 사용
-ms- : 인터넷 익스플로러에서 사용(항상은 아님)/* Vendor prefix(브라우저 업체별 접두어) */ .input--text::-webkit-input-placeholder { color: #cacaca; } .input--text:-ms-input-placeholder { color: #cacaca; } .input--text::-moz-placeholder { color: #cacaca; }
