jiraynor’s 하루 2시간 프로그래밍 - HTML 23. 헤드 (Head Element) 영상 보러가기

HTML 헤드

HTML <head> 요소

<head> 요소는 메타데이터(데이터에 관한 데이터)의 컨테이너로 <html> 태그와 <body> 태그 사이에 배치됩니다.

HTML 메타데이터는 HTML 문서에 대한 데이터입니다. 메타데이터는 표시되지 않습니다.

메타데이터는 일반적으로 문서 제목, 문자 집합, 유형, 스크립트 및 기타 메타 정보를 정의합니다.

HTML <title> 요소

<title> 요소는 문서의 제목을 정의합니다. 제목은 텍스트 전용이어야 하며 브라우저의 제목 표시줄이나 페이지 탭에 표시됩니다.

HTML 문서에는 <title> 요소가 필요합니다.

검색엔진최적화(SEO)에는 페이지 제목 내용이 매우 중요합니다! 페이지 제목은 검색 결과에 페이지를 나열할 때 검색 엔진 알고리즘에서 순서를 결정하는 데 사용됩니다.

title 요소는 :

  • 브라우저 툴바에 제목을 정의합니다.
  • 페이지를 즐겨찾기에 추가할 때 페이지 제목을 제공합니다.
  • 검색 엔진 검색에서 페이지 제목을 표시합니다.
예제 1
<!DOCTYPE html>
<html>
<head>
  <title>의미 있는 제목</title>
</head>
<body>

문서의 컨텐츠......

</body>
</html>

HTML <style> 요소

<style> 요소는 단일 HTML 페이지의 스타일 정보를 정의하기 위해 사용됩니다.

예제 2
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

<link> 요소는 현재 문서와 외부 리소스 간의 관계를 정의합니다.

<link> 태그는 외부 스타일 시트에 링크할 때 가장 많이 사용됩니다.

예제 3
<link rel="stylesheet" href="mystyle.css">

HTML <meta> 요소

<meta> 요소는 일반적으로 문자 세트, 페이지 설명, 키워드, 문서 작성자 및 뷰 포트 설정을 지정하기 위해 사용됩니다.

메타데이터는 페이지에 표시되지 않지만 브라우저(콘텐츠 표시 방법 또는 페이지 새로고침 방법), 검색 엔진(키워드) 및 기타 웹 서비스에서 사용됩니다.

예제 3
사용할 문자 집합을 정의합니다.
<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 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 요소에 씁니다.

예제 4
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

HTML <base> 요소

<base> 요소는 페이지 내의 모든 상대 경로의 베이스 URL 또는 타겟을 지정합니다.

<base> 태그에는 href 속성 또는 타깃 속성 중 하나 또는 둘 다 있어야 합니다.

문서에는 <base> 요소를 1개만 포함할 수 있습니다.

예제 5
<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>

Summary

  • <head> 요소는 메타데이터(데이터에 관한 데이터)의 컨테이너입니다.
  • <head> 요소는 <html> 태그와 <body> 태그 사이에 배치됩니다.
  • <title> 요소는 필수이며 문서 제목을 정의합니다.
  • <style> 요소는 단일 문서의 스타일 정보를 정의하는 데 사용됩니다.
  • <link> 태그는 외부 스타일 시트에 링크할 때 가장 많이 사용됩니다.
  • <meta> 요소는 일반적으로 문자 세트, 페이지 설명, 키워드, 문서 작성자 및 뷰 포트 설정을 지정하기 위해 사용됩니다.
  • <script> 요소는 클라이언트 측 JavaScript를 정의하기 위해 사용됩니다.
  • <base> 요소는 페이지 내의 모든 상대 URL의 기본 URL 및/또는 타겟을 지정합니다.