HTML HEAD 요소

HTML <head> 요소는 <title>, <style>, <meta>, <link>, <script> 및 <base> 요소에 대한 컨테이너이다.

HTML HEAD 요소

<head> 요소는 메타데이터(데이터에 대한 데이터)를 위한 컨테이너이며 <html> 태그와 <body> 태그 사이에 배치된다.

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

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

HTML <title> 요소

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

HTML 문서에는 <title> 요소가 필요하다!

페이지 제목의 내용은 검색 엔진 최적화(SEO)에 매우 중요하다!

페이지 제목은 검색 엔진 알고리즘에서 검색 결과에 페이지를 나열할 때 순서를 결정하는 데 사용된다.

<title> 요소:

브라우저 도구 모음에서 제목 정의
즐겨찾기에 추가된 페이지의 제목을 제공한다
페이지의 제목을 검색 엔진 검색기에 표시한다
그러므로, 제목을 가능한 한 정확하고 의미 있게 만드세요!

간단한 HTML 문서:

<!DOCTYPE html>
<html>
<head>
<title>의미있는 페이 제목</title>
</head>
<body>

<p>본문 요소의 내용이 브라우저 창에 표시됩니다.</p>
<p>제목 요소의 내용은 브라우저 탭, 즐겨찾기 및 검색 엔진 결과에 표시됩니다.</p>

</body>
</html>

HTML <style> 요소

<!DOCTYPE html>
<html>
<head>
  <title>페이지 제목</title>
  <style>
    body {background-color: powderblue;}
    h1 {color: red;}
    p {color: blue;}
  </style>
</head>
<body>

<h1>이것은 H1 제목이다.</h1>
<p>이것은 단락이다.</p>

<p>본문 요소의 내용이 브라우저 창에 표시됩니다.</p>
<p>제목 요소의 내용은 브라우저 탭, 즐겨찾기 및 검색 엔진 결과에 표시됩니다.</p>

</body>
</html>

HTML <link> 요소

<!DOCTYPE html>
<html>
<head>
  <title>페이지 제목</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>이것은 H1 제목이다.</h1>
<p>이것은 단락이다</p>

</body>
</html>

HTML <meta> 요소

<meta> 요소 예제들

사용되는 문자 집합을 정의한다:

검색 엔진의 키워드를 정의한다:

웹 페이지에 대한 설명을 정의한다:

페이지 작성자 정의:

30초마다 문서 새로 고침:

웹 사이트가 모든 장치에서 잘 보이도록 뷰포트 설정:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
</head>
<body>

<p>모든 메타 정보는 헤드 섹션 내부로 들어갑니다.</p>

</body>
</html>

뷰포트 설정(Viewport)

뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역이며 장치에 따라 다르다. 컴퓨터 화면보다 휴대 전화에서 더 작다.

모든 웹 페이지에 다음과 같은 <메타> 요소를 포함해야 합니다:

페이지 크기 및 크기 조정을 제어하는 방법에 대한 지침이 브라우저에 제공된다.

width= device-width 부분은 장치의 화면 너비를 따르도록 페이지 너비를 설정한다(장치에 따라 다름).

initial-scale= 1.0 부분은 페이지가 브라우저에 의해 처음 로드될 때 초기 확대/축소 수준을 설정한다.

HTML <script> 요소

<!DOCTYPE html>
<html>
<head>
  <title>페이지 제목</title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
  }
  </script>
</head>
<body>

<h1>나의 웹 페이지</h1>
<p id="demo">단락</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Try It 버튼을 클릭하면, '단락'에서 'Hello JavaScript!'가 표시된다.

Try It 버튼을 클릭하면, '단락'에서 'Hello JavaScript!'가 표시된다.

HTML <base> 요소

<base> 요소는 페이지의 모든 상대 URL에 대한 기본 URL 및/또는 대상을 지정한다.

<base> 태그에는 href 또는 대상 특성이 있거나 둘 다 있어야 한다.

문서에는 하나의 <기본> 요소만 있을 수 있다!

<!DOCTYPE html>
<html>
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>

<h1>base 요소</h1>

<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - 이미지에 대한 상대 주소만 지정했습니다. 헤드 섹션에 기본 URL을 지정했으므로 브라우저는 "https://www.w3schools.com/images/stickman.gif "에서 이미지를 찾습니다.</p>

<p><a href="tags/tag_base.asp">HTML base tag</a> - 링크가 target="_blank" 특성이 없더라도 새 창에서 열립니다. 기본 요소의 대상 특성이 "_blank"로 설정되어 있기 때문입니다.</p>

</body>
</html>

마무리

이번 글에서는 HTML <head> 요소에 들어가는 다양한 요소에 대해 살펴보고 실습해보았다.

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

HTML <head>요소 정리

태그	설명
<head>	문서에 대한 정보를 정의합니다
<title>	문서 제목을 정의합니다
<base>	페이지의 모든 링크에 대한 기본 주소 또는 기본 대상을 정의합니다
<link>	문서와 외부 리소스 간의 관계를 정의합니다
<meta>	HTML 문서에 대한 메타데이터 정의
<script>	클라이언트 쪽 스크립트를 정의합니다
<style>	문서의 스타일 정보를 정의합니다

이상으로 HTML <head> 요소에 관련해서 살펴보고 실습을 해보았다.

각 요소에 대한 기본적인 이해를 하시고 실습을 통해 해당 요소에 대한 개념을 익히기를 추천한다.

꼭 실습해보자!!!

모두 화이팅!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML 레이아웃 코딩 예제 (0)	2023.05.25
HTML 레이아웃(HTML Layout) (0)	2023.05.24
HTML 자바스크립트(Javascript) (0)	2023.05.22
HTML 파일 경로(File Path) (0)	2023.05.21
HTML Iframe (0)	2023.05.20

enjoyCoding

HTML HEAD 요소

HTML HEAD 요소

HTML <title> 요소

HTML <style> 요소

HTML <link> 요소

HTML <meta> 요소

<meta> 요소 예제들

뷰포트 설정(Viewport)

HTML <script> 요소

HTML <base> 요소

마무리

HTML <head>요소 정리

'HTML > HTML 기본문법' 카테고리의 다른 글

댓글

티스토리툴바

HTML HEAD 요소

HTML HEAD 요소

HTML <title> 요소

HTML <style> 요소

HTML <link> 요소

HTML <meta> 요소

<meta> 요소 예제들

뷰포트 설정(Viewport)

HTML <script> 요소

HTML <base> 요소

마무리

HTML <head>요소 정리

'HTML > HTML 기본문법' 카테고리의 다른 글

관련글

댓글

티스토리툴바