맞춤 아이콘(favicon) 추가하기
사이트 디자인을 조금 더 풍성하게 만들기 위해서, 커스텀 아이콘 레퍼런스를 매타데이터에 추가하고 특정 콘텐츠에서 이것을 보여지게 할 수 있습니다.
오랜세월동안 있었던 파비콘은 이러한 유형의 첫 번째 아이콘으로, 여래 장소에서 사용되는 16 * 16 크기의 아이콘입니다. 각 열린 페이지의 탭이나 북마크 패널 페이지 쪽에서 파비콘을 볼 수 있습니다.
favicon 을 다음과 같이 사이트에 추가 할 수 있습니다.
- 사이트의 index 페이지와 같은 디렉토리에 .Ico 포맷의 파일을 저장합니다. (대부분의 브라우저는 .gif 또는 .png 와 같은 더 일반적인 형식의 파비콘을 지원하지만, ICO 형식을 사용하면 Internet Explorer 6 만큼 이전 버전에서도 작동합니다)
- 다음 코드를 HTML <head> 에 추가하여 favicon 을 참조합니다
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">요즘은 많은 다른 아이콘 타입이 있습니다. 예를 들어서 MDN 홈페이지에서 다음과 같은 것을 발견할 수 있습니다.
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">주석은 각 아이콘의 용도를 설명합니다. 웹사이트가 iPad 의 홈 화면에 저장 될 때 사용할 고해상도 아이콘을 제공하는 것 등을 포함한다.
지금 당장 모든 아이콘을 구현할 줄 알아야 한다는 성급한 부담을 가질 필요는 없습니다. 이부분은 고급기능에 속하기도 하며, 이번 과정을 통해 여러 ‘지식’을 습득해야 가능합니다. 이번 레퍼런스의 주된 목적은 다른 웹사이트의 소스 코드를 보며 그 ‘지식’을 습득할 수 있도록 하려는데에 있습니다.
HTML 에 CSS 와 JavaScript 적용하기
현대의 모든 웹사이트는 상호작용 기능이 많은 영상 플레이어, 지도, 게임 등을 위해 JavaScript 가 필요하고, 이것들을 더 멋져 보이게 하기 위해 CSS 가 사용됩니다. 이것들은 <link> 요소와 <script> 요소를 사용하여 웹 페이지에 가장 일반적으로 적용됩니다.
- <link> 는 항상 문서의 head 부분에 위치합니다. 이것은 두 가지 속성을 취하는데, rel=”stylesheet”, 즉 문서의 스타일 시트임을 나타냄과 동시에 스타일 시트 파일의 경로를 포함하는 href 를 내포합니다.
<link rel="stylesheet" href="my-css-file.css">
- <script> 는 head 에 들어갈 필요가 없습니다. </body> 태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋으며, JavaScript 를 적용하기 전에 모든 HTML 내용을 브라우저에서 읽었는지 확인하는 것이 좋습니다. 액세스 과정에서 JavaScript 가 아직 존재하지 않는 요소라고 판단하며 에러가 날 수 있습니다.
<script src="my-js-file.js"></script>
<script> 태그가 비어있다고 보일 수 도 있지만 그렇지 않으며, 반드시 태그를 닫아주어야 합니다. (</script>) 외부 스크립트 파일을 지정하는 대신 스크립트를 <script> 안에 넣을 수 도 있습니다.
문서의 기본 언어 설정
마지막으로, 페이지의 언어를 설정 할 수도 있습니다. 이 작업은 lang attribute 를 여는 HTML 태그에 추가하여 수행할 수 있습니다.
<html lang="en-US">
이것은 여러 방면에서 유용합니다. HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화 되며 (예를 들어 언어 별 결과에 올바르게 표시되도록..) 화면 판독기를 사용함으로 시각장애가 있는 사용자에게 유용합니다.
또한, 문서의 하위 섹션을 다른 언어로 인식하도록 설정할 수도 있습니다. 예를 들어 다음과 같이 일본어로 된 섹션에 대해서는 일본어로 인식하도록 할 수 있습니다.
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
HTML head 에 대한 퀵 레퍼런스가 마무리 되었습니다. 여기에서 보고 할 수 있는 것보다 훨씬 많은 부분이 있지만, 지금 단계에서는 복잡하거나 어렵게 느껴질 수도 있을 것이고 단지 지극히 일반적이고 기초적인 사용법만을 제시하여드렸습니다.
다음은 HTML 의 text 구조와 의미에 대해 알아보겠습니다
'HTML' 카테고리의 다른 글
| 웹 접근성과 사용자 경험(UX) 개선을 위한 프런트엔드 전략 (0) | 2023.03.16 |
|---|---|
| HTML 의 text 구조와 의미 (0) | 2022.12.29 |
| HTML 의 메타데이터 (1) - references (2) | 2022.12.16 |
| HTML 문서의 구조 - References (0) | 2022.12.15 |
| 속성 (Attributes) (2) | 2022.12.13 |