23.HTML Head
익스랩 최고 관리자
·2019. 11. 30. 21:43
HTML <head> 요소
<head> 요소는 meta data에 대한 컨테이너이며, <html> 태그와 <body> 태그 사이에 배치됩니다.
HTML meta data는 HTML 문서에 대한 데이터입니다. 또한 메타데이터는 표시되지 않습니다.
메타 데이터는 일반적으로 문서 제목, 문자 세트, 스타일, 스크립트 및 기타 메타 정보를 정의합니다.
메타 데이터를 설명하는 태그는 <tile>, <style>, <meta>, <link>, <script> 및 <base>입니다.
HTML <title> 요소
<title> 요소는 문서의 제목을 정의하며 모든 HTML 문서에 작성해야 합니다.
<title> 요소 :
- 브라우저 탭에 제목을 정의합니다.
- 즐겨찾기에 추가될 때 페이지 제목을 제공합니다.
- 검색 엔진 결과에 페이지 제목을 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>body 요소의 내용이 브라우저 창에 표시됩니다. </p>
<p>제목 요소의 내용은 브라우저 탭, 즐겨 찾기 및 검색 엔진 결과에 표시됩니다.</p>
</body>
</html>
HTML <style> 요소
<style> 요소는 단일 HTML 페이지에 대한 스타일 정보를 정의하는 데 사용됩니다.
See the Pen 1.The HTML <style> Element by heunho (@heunho) on CodePen.
HTML <link> 요소
<link> 요소는 외부 스타일 시트에 연결하는 데 사용됩니다.
See the Pen 02.The HTML <link> Element by heunho (@heunho) on CodePen.
HTML <meta> 요소
<meta> 요소는 사용되는 문자 세트, 페이지 설명, 키워드, 작성자 및 기타 메타 데이터를 지정하는 데 사용됩니다.
메타 데이터는 브라우저 (컨텐츠 표시 방법), 검색 엔진(키워드) 및 기타 웹 서비스에서 사용됩니다.
<meta charset="UTF-8">위와 같이 사용된 "character set"을 정의하세요.
<meta name="description" content="Free Web tutorials">웹 페이지에 대한 설명을 정의하세요.
<meta name="keywords" content="HTML, CSS, XML, JavaScript">검색 엔진에 대한 키워드를 정의하세요.
<meta name="author" content="John Doe">페이지 작성자를 정의하세요.
<meta http-equiv="refresh" content="30">30초마다 문서를 새로 고치고 싶다면 위와 같이 정의하세요.
See the Pen 03.The HTML <meta> Element by heunho (@heunho) on CodePen.
meta 태그는 위와 같이 사용할 수 있습니다.
viewport 설정
HTML5는 웹 디자이너가 <meta> 태그를 통해 viewport를 제어할 수 있는 방법을 도입했습니다.
viewport는 웹페이지에서 사용자가 볼 수 있는 영역입니다. 장치에 따라 다르며 컴퓨터 화면보다 휴대전화에서 더 작게 출력합니다.
모든 웹 페이지에 다음 <meta> viewport 요소를 포함해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
initial-scale = 1.0 부분은 페이지가 브라우저에 의해 처음 로드될 때 초기 zoom level을 설정합니다.
다음은 viewport <meta> 태그가 없는 웹페이지와 viewport <meta> 태그가 있는 동일한 웹페이지의 예시입니다.
 |
 |
| viewport <meta>태그가 없는 경우 | viewport <meta>태그가 있는 경우 |
HTML <script> 요소
<script> 요소는 클라이언트 측 JavaScript를 정의하는 데 사용됩니다.
해당 예제는 "HelloJavaScript!"를 출력하는 자바스크립트 코드입니다.
See the Pen 04.The HTML <script> Element by heunho (@heunho) on CodePen.
HTML <base> 요소
<base> 요소는 페이지의 모든 상대 URL에 대한 기본 URL 및 기본 대상을 지정합니다.
See the Pen 05.The HTML <base> Element by heunho (@heunho) on CodePen.
<html>, <head> 및 <body> 태그를 생략하시겠습니까?
HTML5 표준에 따르면 <html>, <body> 및 <head> 태그는 생략할 수 있습니다.
다음 코드는 HTML5로 유효합니다.
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
HTML 헤드 요소
| 태그 | 설명 |
| <head> | 문서에 대한 정보를 정의합니다. |
| <title> | 문서의 제목을 정의합니다. |
| <base> | 페이지의 모든 링크에 대한 기본 주소 또는 기본 대상을 정의합니다. |
| <link> | 문서와 외부 리소스 간의 관계를 정의합니다. |
| <meta> | HTML document에 관한 meta-data를 정의합니다. |
| <script> | 클라이언트 측 스크립트를 정의합니다. |
| <style> | 문서의 스타일 정보를 정의합니다. |
틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.
질문도 올려주시면 아는 선에서 답변해드리겠습니다.
대부분의 내용의 저작권은 w3schools에 있습니다.
HTML head Elements
HTML Head The HTML Element The element is a container for metadata (data about data) and is placed between the tag and the tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, characte
www.w3schools.com
'IT 언어 연구소 > HTML,CSS [초급, 기본 개념, W3C 번역]' 카테고리의 다른 글
| 25. HTML 반응형 웹 디자인 (0) | 2019.12.06 |
|---|---|
| 24.HTML Layouts (0) | 2019.12.06 |
| 21. HTML JavaScript (0) | 2019.11.27 |
| 22.HTML File Paths (0) | 2019.11.27 |
| 20.HTML Iframes (0) | 2019.11.22 |
