The HTML <head> Element
HTML <head> 요소
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
<head>요소 (데이터에 대한 데이터)에 대한 메타 데이터 컨테이너하며 사이에 위치 <html>태그와 <body>태그.
HTML metadata is data about the HTML document. Metadata is not displayed.
HTML 메타 데이터는 HTML 문서에 대한 데이터입니다. 메타 데이터가 표시되지 않습니다.
Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
메타 데이터는 일반적으로 문서 제목, 문자 세트, 스타일, 링크, 스크립트 및 기타 메타 정보를 정의합니다.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
다음 태그는 메타 데이터를 설명 : <title>, <style>, <meta>, <link>, <script>,와 <base>.
The HTML <title> Element
HTML <title> 요소
The <title> element defines the title of the document, and is required in all HTML/XHTML documents.
<title>요소는 문서의 제목을 정의하고, 모든 HTML / XHTML 문서가 필요합니다.
The <title> element:
<title>요소 :
defines a title in the browser tab
브라우저 탭에 제목을 정의합니다.
provides a title for the page when it is added to favorites
즐겨 찾기에 추가 될 때 페이지의 제목을 제공합니다.
displays a title for the page in search engine results
검색 엔진 결과에 페이지 제목을 표시합니다.
A simple HTML document
간단한 HTML 문서 :
Example
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the document...... </body> </html> | cs |
The HTML <style> Element
HTML <style> 요소
The <style> element is used to define style information for a single HTML page:
이 <style>요소는 단일 HTML 페이지의 스타일 정보를 정의하는 데 사용됩니다.
Example
1 2 3 4 5 | <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> | cs |
The HTML <link> Element
HTML <link> 요소
The <link> element is used to link to external style sheets:
이 <link>요소는 외부 스타일 시트에 연결하는 데 사용됩니다.
Tip: To learn all about CSS, visit our CSS Tutorial.
팁 : CSS에 대한 모든 정보는 CSS 자습서를 참조하십시오 .
The HTML <meta> Element
HTML <meta> 요소
The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.
<meta>요소는 페이지 설명, 키워드, 저자 및 기타 메타 데이터를 사용하는 문자 집합을 지정하는 데 사용됩니다.
Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
메타 데이터는 브라우저 (내용 표시 방법), 검색 엔진 (키워드) 및 기타 웹 서비스에서 사용됩니다.
Define the character set used:
사용 된 문자 세트를 정의하십시오.
1 | <meta charset="UTF-8"> | cs |
Define a description of your web page:
웹 페이지에 대한 설명을 정의하십시오.
1 | <meta name="description" content="Free Web tutorials"> | cs |
Define keywords for search engines:
검색 엔진에 대한 키워드 정의 :
1 | <meta name="keywords" content="HTML, CSS, XML, JavaScript"> | cs |
Define the author of a page:
페이지 작성자를 정의하십시오.
1 | <meta name="author" content="John Doe"> | cs |
Refresh document every 30 seconds:
30 초마다 문서 새로 고침 :
1 | <meta http-equiv="refresh" content="30"> | cs |
Example of <meta> tags:
<meta>태그의 예 :
Example
1 2 3 4 | <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> | cs |
Setting The Viewport
뷰포트 설정하기
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
HTML5는 웹 디자이너가 <meta>태그를 통해 뷰포트를 제어 할 수있게하는 메소드를 도입했습니다 .
The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
뷰포트는 웹 페이지의 사용자가 볼 수있는 영역입니다. 그것은 장치에 따라 다르며 휴대 전화의 경우 컴퓨터 화면보다 작습니다.
You should include the following <meta> viewport element in all your web pages:
<meta>모든 웹 페이지에 다음과 같은 뷰포트 요소를 포함해야 합니다.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | cs |
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
<meta>뷰포트 요소는 페이지의 크기와 스케일링을 제어하는 방법에 브라우저 지침을 제공합니다.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
width = device-width 부분은 페이지의 너비를 장치의 화면 너비에 따라 설정합니다 (장치에 따라 다름).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
initial-scale = 1.0 부분은 브라우저가 페이지를 처음로드 할 때 초기 줌 레벨을 설정합니다.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport <meta> tag:
다음은 뷰포트 메타 태그가 없는 웹 페이지 와 뷰포트 <meta>태그가 있는 동일한 웹 페이지의 예 입니다 .
Tip : If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
도움말 : 휴대 전화 또는 태블릿으로이 페이지를 탐색하는 경우 아래의 두 링크를 클릭하여 차이점을 확인할 수 있습니다.
The HTML <script> Element
HTML <script> 요소
The <script> element is used to define client-side JavaScripts.
<script>요소는 클라이언트 측 자바 스크립트를 정의하는 데 사용된다.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
이 자바 스크립트는 "Hello JavaScript!" id = "demo"인 HTML 요소에 추가합니다.
Example
1 2 3 4 5 | <script> function myFunction { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> | cs |
Tip : To learn all about JavaScript, visit our JavaScript Tutorial.
팁 : 자바 스크립트에 대한 모든 정보는 자바 스크립트 튜토리얼을 참조하십시오 .
The HTML <base> Element
HTML <base> 요소
The <base> element specifies the base URL and base target for all relative URLs in a page:
<base>요소는 페이지의 모든 상대 URL의 기본 URL과베이스 대상을 지정합니다 :
Omitting <html>, <head> and <body>?
<html>, <head> 및 <body>를 생략 하시겠습니까?
According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.
HTML5 표준에 따르면 the <html>, the <body>및 the <head>태그는 생략 할 수 있습니다.
The following code will validate as HTML5:
다음 코드는 HTML5로 유효성을 검사합니다.
Example
1 2 3 4 5 | <!DOCTYPE html> <title>Page Title</title> <h1>This is a heading</h1> <p>This is a paragraph.</p> | cs |
Note:
W3Schools does not recommend omitting the <html> and <body> tags.
W3Schools는 <html>및 <body> 태그를 생략하지 않는 것이 좋습니다 .
Omitting these tags can crash DOM or XML software and produce errors in older browsers (IE9).
이러한 태그를 생략하면 DOM 또는 XML 소프트웨어가 손상되고 이전 브라우저 (IE9)에서 오류가 발생할 수 있습니다.
However, omitting the <head> tag has been a common practice for quite some time now.
그러나 <head>태그를 생략하는 것은 꽤 오랜 시간 동안 일반적인 관행이었습니다.
HTML head Elements
HTML 헤드 요소
Tag |
Description |
<head> |
Defines information about the document 문서에 대한 정보를 정의합니다. |
<title> |
Defines the title of a document 문서의 제목을 정의합니다. |
<base> |
Defines a default address or a default target for all links on a page 페이지의 모든 링크에 대한 기본 주소 또는 기본 대상을 정의합니다. |
<link> |
Defines the relationship between a document and an external resource 문서와 외부 리소스 간의 관계를 정의합니다. |
<meta> |
Defines metadata about an HTML document HTML 문서에 대한 메타 데이터 정의 |
<script> |
Defines a client-side script 클라이언트 측 스크립트를 정의합니다. |
<style> |
Defines style information for a document 문서의 스타일 정보를 정의합니다. |
출처 : W3School.com
'HTML' 카테고리의 다른 글
| HTML 반응 형 웹 디자인(HTML Responsive Web Design) (1) | 2018.06.25 |
|---|---|
| HTML 레이아웃(HTML Layouts) (0) | 2018.06.24 |
| HTML 파일 경로(HTML File Paths) (0) | 2018.06.22 |
| HTML 자바 스크립트(HTML JavaScript) (0) | 2018.06.21 |
| HTML Iframes(HTML Iframes) (0) | 2018.06.20 |
