HTML - 헤드 요소
HTML <head>요소는
<title>, <style>,
<meta>, <link>, <script>및 <base>.
HTML <head> 요소
<head>요소는 메타데이터(데이터에 대한 데이터)의 컨테이너이며 태그와 태그 사이에 배치 <html>됩니다 <body>.
HTML 메타데이터는 HTML 문서에 대한 데이터입니다. 메타데이터는 표시되지 않습니다.
메타데이터는 일반적으로 문서 제목, 문자 집합, 스타일, 스크립트 및 기타 메타 정보를 정의합니다.
HTML <title> 요소
<title>요소는 문서의 제목을 정의합니다 . 제목은 텍스트 전용이어야 하며 브라우저의 제목 표시줄이나 페이지의 탭에 표시됩니다.
요소 는 <title>HTML 문서에 필요합니다!
페이지 제목의 내용은 검색엔진 최적화(SEO)에 매우 중요합니다! 페이지 제목은 검색 엔진 알고리즘에서 검색 결과에 페이지를 나열할 때 순서를 결정하는 데 사용됩니다.
<title>요소 :
- 브라우저 도구 모음에서 제목을 정의합니다.
- 즐겨찾기에 추가될 때 페이지의 제목을 제공합니다.
- 검색 엔진 결과에 페이지 제목을 표시합니다.
따라서 제목을 가능한 한 정확하고 의미 있게 만드십시오!
간단한 HTML 문서:
예시
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <style> 요소
<style>요소는 단일 HTML 페이지에 대한 스타일 정보를 정의하는 데 사용됩니다 .
예시
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
HTML <link> 요소
요소 는 <link>현재 문서와 외부 리소스 간의 관계를 정의합니다.
태그 는 <link>
외부 스타일 시트에 연결하는 데 가장 자주 사용됩니다.
예시
<link rel="stylesheet" href="mystyle.css">
팁: CSS에 대한 모든 것을 배우려면 CSS 자습서 를 방문하십시오 .
HTML <메타> 요소
<meta>요소는 일반적으로 문자 집합, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용됩니다 .
메타데이터는 페이지에 표시되지 않지만 브라우저(콘텐츠 표시 또는 페이지 새로고침 방법), 검색 엔진(키워드) 및 기타 웹 서비스에서 사용됩니다.
예
사용된 문자 집합을 정의합니다.
<meta charset="UTF-8">
검색 엔진에 대한 키워드 정의:
<meta name="keywords" content="HTML, CSS, JavaScript">
웹 페이지에 대한 설명을 정의합니다.
<meta name="description" content="Free Web tutorials">
페이지 작성자 정의:
<meta name="author" content="John Doe">
30초마다 문서 새로 고침:
<meta http-equiv="refresh" content="30">
웹사이트가 모든 기기에서 잘 보이도록 표시 영역 설정:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta>태그 의 예 :
예시
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
뷰포트 설정
뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역입니다. 장치에 따라 다릅니다. 컴퓨터 화면보다 휴대전화에서 더 작습니다.
모든 웹 페이지에 다음 <meta>요소를 포함해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이것은 페이지의 크기와 배율을 제어하는 방법에 대한 브라우저 지침을 제공합니다.
부품 은 width=device-width장치의 화면 너비를 따르도록 페이지 너비를 설정합니다(장치에 따라 다름).
이 initial-scale=1.0부분은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정합니다.
다음은 뷰포트 메타 태그가 없는 웹 페이지 와 뷰포트 메타 태그가 있는 동일한 웹 페이지 의 예입니다 .
팁: 휴대폰이나 태블릿으로 이 페이지를 탐색하는 경우 아래 두 링크를 클릭하여 차이점을 확인할 수 있습니다.
HTML <script> 요소
<script>요소는 클라이언트 측 JavaScript를 정의하는 데 사용됩니다 .
다음 JavaScript는 "Hello JavaScript!"를 작성합니다. id="demo"인 HTML 요소로:
예시
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
팁: JavaScript에 대한 모든 내용을 알아보려면 JavaScript 자습서 를 방문하십시오 .
HTML <base> 요소
요소 는 <base>페이지의 모든 상대 URL에 대한 기본 URL 및/또는 대상을 지정합니다.
태그 에는 <base>href 또는 target 속성이 있거나 둘 다 있어야 합니다.
문서 에는 하나의 단일 요소만 있을 수 있습니다 <base>
!
예시
페이지의 모든 링크에 대한 기본 URL 및 기본 대상 지정:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
단원 요약
<head>요소는 메타데이터(데이터에 대한 데이터)의 컨테이너입니다 .<head>요소는<html>태그와 태그<body>사이 에 배치됩니다 .<title>요소는 필수이며 문서의 제목을 정의합니다 .<style>요소는 단일 문서에 대한 스타일 정보를 정의하는 데 사용됩니다 .<link>태그는 외부 스타일 시트에 연결하는 데 가장 자주 사용됩니다 .<meta>요소는 일반적으로 문자 집합, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용됩니다 .<script>요소는 클라이언트 측 JavaScript를 정의하는 데 사용됩니다 .<base>요소는 페이지의 모든 상대 URL에 대한 기본 URL 및/또는 대상을 지정합니다 .
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 |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조 를 방문하십시오 .