티스토리 뷰

Web Guides/HTML

01. HTML 소개_HEAD에 뭐가 들었어?01

SBDB_뉴유 2022. 1. 23. 12:18

01. HTML 소개_HEAD에 뭐가 들었어?01

moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다.

출처moz://a

<head>

HTML 헤드는 요소의 내용입니다.

<head>요소의 내용은 <body>와 달리 페이지에 표시되지 않습니다.

대신 헤드의 작업은 문서에 대한 메타데이터 를 포함 합니다.

<title>

문서에 제목을 추가하는 데 사용할 수 있습니다.

예시

<title>title: 페이지 제목</title>

<meta>

메타데이터는 데이터를 설명하는 데이터이며 HTML에는 문서에 메타데이터를 추가하는 "공식적인" 방법인 <meta> 요소가 있습니다.

문서의 문자 인코딩 지정

<meta charset="UTF-8"> 이 요소는 문서의 문자 인코딩을 지정합니다.

utf-8는 거의 모든 문자를 포함하는 범용 문자 집합입니다.

이는 웹 페이지에서 모든 언어 표시를 처리할 수 있음을 의미합니다.

따라서 생성하는 모든 웹 페이지에서 이것을 설정하는 것이 좋습니다

작성자 및 설명 추가

<meta name="" content="">

  • name는 메타 요소의 유형을 지정합니다.
  • content는 실제 메타 콘텐츠를 지정합니다.

다른 유형의 메타데이터

다른 유형의 메타데이터 알아보기

코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HEAD에 뭐가 들었어?</title>
</head>
<body>
    <img src="../img/html/HEAD에 뭐가 들었어.png" alt="">
    <h3>01. HTML 소개_HEAD에 뭐가 들었어?01</h3>
    <p>moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다.</p>
    <p>출처<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML" target="_blank">moz://a</a></p>
    
    <h3>&lt;head&gt;</h3>
    <p>HTML 헤드는 요소의 내용입니다.</p>
    <p>&lt;head&gt;요소의 내용은 &lt;body&gt;와 달리 페이지에 표시되지 않습니다.</p>
    <p>대신 헤드의 작업은 문서에 대한 메타데이터 를 포함 합니다.</p>

    <h3>&lt;title&gt;</h3>
    <p>문서에 제목을 추가하는 데 사용할 수 있습니다.</p>
    <h4>예시</h4>
<pre class="line-numbers"><code class="language-js">&lt;title&gt;title: 페이지 제목&lt;/title&gt;
</code></pre>
    <img src="../img/html/title_페이지 제목.png" alt="">

    <h3>&lt;meta&gt;</h3>
    <p>메타데이터는 데이터를 설명하는 데이터이며 HTML에는 문서에 메타데이터를 추가하는 "공식적인" 방법인 &lt;meta&gt; 요소가 있습니다.</p>
    
    <h4>문서의 문자 인코딩 지정</h4>
    <p>&lt;meta charset="UTF-8"&gt; 이 요소는 문서의 문자 인코딩을 지정합니다.</p>
    <p>utf-8는 거의 모든 문자를 포함하는 범용 문자 집합입니다.</p>
    <p>이는 웹 페이지에서 모든 언어 표시를 처리할 수 있음을 의미합니다.</p>
    <p>따라서 생성하는 모든 웹 페이지에서 이것을 설정하는 것이 좋습니다</p>

    <h4>작성자 및 설명 추가</h4>
    <p>&lt;meta name="" content=""&gt;</p>
    <ul>
        <li>name는 메타 요소의 유형을 지정합니다.</li>
        <li>content는 실제 메타 콘텐츠를 지정합니다.</li>
    </ul>

    <h4>다른 유형의 메타데이터</h4>
    <p>다른 유형의 메타데이터 <a href="https://ogp.me/">알아보기</a></p>
</body>
</html>

 

'Web Guides > HTML' 카테고리의 다른 글

01. HTML 소개_HTML 텍스트 기초01  (0) 2022.01.23
01. HTML 소개_HEAD에 뭐가 들었어?02  (0) 2022.01.23
01. HTML 소개_HTML 시작하기02  (0) 2022.01.22
01. HTML 소개_HTML 시작하기01  (0) 2022.01.22
01. HTML 소개  (0) 2022.01.22

UP NEXT : Web Guides/HTML

댓글
© 2018 webstoryboy