티스토리 뷰

Web Guides/HTML

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

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

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

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

출처moz://a

사이트에 사용자 정의 아이콘 추가

사이트 디자인을 더욱 풍부하게 하기 위해 메타데이터의 사용자 정의 아이콘에 대한 참조를 추가할 수 있습니다.

이는 특정 컨텍스트에서 표시됩니다.

이들 중 가장 일반적으로 사용되는 것은 favicon(파비콘)입니다.

예시

<link rel="icon" href="favicon.ico">

CSS와 JavaScript를 HTML에 적용하기

거의 모든 웹 사이트는 CSS 를 사용하여 멋지게 보이게 하고 JavaScript 를 사용하여 비디오 플레이어, 지도, 게임 등과 같은 대화형 기능을 강화할 것입니다.

예시

<link rel="stylesheet" href="**.css">
<script src="**.js"></script>

문서의 기본 언어 설정

페이지의 언어를 설정할 수 있고 실제로 설정해야 한다는 점을 언급할 가치가 있습니다.

이것은 여는 HTML 태그에 lang 속성 을 추가하여 수행할 수 있습니다

예시

<html lang="ko">

코드

<!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에 뭐가 들었어?02</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>사이트에 사용자 정의 아이콘 추가</h3>
    <p>사이트 디자인을 더욱 풍부하게 하기 위해 메타데이터의 사용자 정의 아이콘에 대한 참조를 추가할 수 있습니다.</p>
    <p>이는 특정 컨텍스트에서 표시됩니다.</p>
    <p>이들 중 가장 일반적으로 사용되는 것은 favicon(파비콘)입니다.</p>

    <h4>예시</h4>
<pre><code>&lt;link rel="icon" href="favicon.ico"&gt;
</code></pre>
    <img src="../img/html/파비콘.png" alt="">

    <h3>CSS와 JavaScript를 HTML에 적용하기</h3>
    <p>거의 모든 웹 사이트는 CSS 를 사용하여 멋지게 보이게 하고 JavaScript 를 사용하여 비디오 플레이어, 지도, 게임 등과 같은 대화형 기능을 강화할 것입니다.</p>
    
    <h4>예시</h4>
<pre><code>&lt;link rel="stylesheet" href="**.css"&gt;
&lt;script src="**.js"&gt;&lt;/script&gt;
</code></pre>
    <img src="../img/html/HTML에 적용.png" alt="">
    
    <h3>문서의 기본 언어 설정</h3>
    <p>페이지의 언어를 설정할 수 있고 실제로 설정해야 한다는 점을 언급할 가치가 있습니다.</p>
    <p>이것은 여는 HTML 태그에 lang 속성 을 추가하여 수행할 수 있습니다</p>

    <h4>예시</h4>
<pre><code>&lt;html lang="ko"&gt;
</code></pre>
</body>
</html>

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

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

UP NEXT : Web Guides/HTML

댓글
© 2018 webstoryboy