head의 기본 구성
html의 기본 뼈대는 크게 html, head, body로 구성되어 있다.
기본 뼈대에 대해 더 자세히 알아보고 싶다면?
HTML의 기본 뼈대
실제 내용이 보여지는 곳. html의 기본 뼈대 1. 문서의 형식을 선언하는 태그 HTML이 어떤 형식으로 마크업 되었는지 선언하는 태그이다. 마크업이 무엇인지 모르겠다면? HTML이란? Hypertext Markup Langua
taiyo-seoul.tistory.com
head 태그란 페이지를 설명하는 태그들의 집합소이다.
웹브라우저에서 보이지는 않지만 꼭 필요한 일들을 묵묵히 수행한다.
head 태그에는 크게 4가지 태그가 포함된다.
<tItle> 페이지의 제목을 나타내는 태그
웹 브라우저 상단의 페이지에 노출되는 이름을 지정할 수 있다.
<meta> 페이지의 기본적인 정보를 담고 있는 태그들
웹 브라우저에서는 보이지 않지만, 웹 페이지의 기본적인 정보들을 담고 있는 태그이다.
검색엔진에서 사용자들에게 페이지를 표시하는 방법을 지정하는데 사용되므로 작성이 필요하다.
메타태그에는 수 많은 속성이 있지만 그중 대표적으로 사용되는 속성은 다음과 같다.
1. 인코딩 방식을 지정하는 속성
2. 브라우저 호환성을 지정하는 속성
3. 모바일 웹이나 반응형 웹에서 기기장치를 인식할 때 사용하는 속성
<link> 외부 링크를 연결하는 태그
html에는 스타일링을 하는 기능이 부족한데, css라는 스타일 언어를 사용해서 웹 사이트를 스타일링한다. 주로 이 css파일을 외부링크에서 가져오거나, 파비콘 이미지를 가져올 때 사용한다.
파비콘이란?
파비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘으로
웹 브라우저 상단 페이지 이름 옆에 위치한다.
<script> 웹 사이트에 클라이언트 스크립트를 추가하는 태그
쉽게 설명하면 인터렉티브한 효과를 구현하기 위해 삽입하는 태그이다. 대표적으로 자바스크립트가 있다.
추가적으로 <style> 태그가 있지만, <style> 태그는 외부 링크를 삽입하여 사용하는 것이 일반적이므로 권장되지 않는다.
위 태그들이 사용된 예시는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta chartset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page name</title>
<link rel="favicon" type="image/x-icon" href="path/favicon.ico"/>
<script src="path/javascript.js"></script>
</head>
<body>
</body>
</html>