<head></head>안에서 사용하는 태그들은 HTML 문서의 정보를 가지고 있다.
1. TITLE(웹 페이지의 제목)
HTML 문서의 제목을 정의한다.
웹 브라우저의 각 사이트 탭에서 이름으로 표시된다.
<head>
<title>네이버</title>
</head>
2. META(웹 페이지의 정보)
HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공한다.
빈(Empty) 태그이다.
<head>
<meta charset = "UTF-8">
<meta name = "author" content = "홍길동">
<meta name = "description" content = "우리의 사이트가 최고!">
</head>
<!--다음과 같이 이해할 수 있다.-->
<문서의정보범위>
<정보 문자인코딩방식 = "UTF-8">
<정보 정보종류 = "사이트제작사" 정보값 = "홍길동">
<정보 정보종류 = "사이트설명" 정보값 = "우리의 사이트가 최고!">
</문서의정보범문자인코딩방식이란 문자가 화면에 출력되는 방식이다. UTF-8은 아시아권 언어를 표현하는데 특화되어있는 문자인코딩방식이다.
<meta>에서 사용할 수 있는 속성은 다음과 같다. 각 태그는 자신이 사용할 수 있는 속성과 값이 정해져 있다. 어떤 속성을 사용할 수 있고, 사용할 수 없는지 구분할 수 있어야 한다. 잘 사용하지 않는 속성도 있기 때문에 당장 모든 속성과 값을 암기할 필요는 없다. ('전역(Global) 속성')이라고 해서 어느 태그에서나 사용할 수 있는 속성들도 있지만 지금은 확인할 필요가 없다.
| 속성 | 의미 | 값 |
| charset | 문자인코딩 방식 | UTF-8, EUC-KR 등.. |
| name | 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터) | author, description, keywords, viewport 등.. |
| content | name이나 http-equiv 속성의 값을 제공 |
name은 검색엔진이나 브라우저에 특정한 정보를 제공하기 위해서 작성하는 속성이다.
3. LINK(CSS 불러오기)
외부 문서를 연결할 때 사용한다.
특히 HTML 외부에서 작성된 CSS 문서(xxx.css 파일)를 불러와 연결할 때 사용한다.
빈(empty)태그 이다.
<head>
<link rel = "stylesheet" href = "./css/main.css">
<link rel = "icon" href = "./favicon.png">
</head>
<!--다음과 같이 이해할 수 있다.-->
<문서의정보범위>
<외부문서연결 관계 = "CSS" 문서경로 = "./css/main.css">
<외부문서연결 관계 = "사이트대표아이콘" 문서경로 = "./favicon.png">
</문서의정보범위>href는 hypertext reference이고 favicon은 favorite icon이라는 뜻이다.
| 속성 | 의미 | 값 |
| rel | (필수)현재 문서와 외부 문서와의 관계를 지정 | stylesheet, icon 등.. |
| href | 외부 문서의 위치를 지정 | 경로 |
3. LINK(CSS 불러오기)
CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTML문서 내부에 작성할 때 사용한다.
<style>
img{
width : 100px;
height : 200px;
}
p{
font-size : 20px;
font-weight : bold;
}
</style>
<!--다음과 같이 이해할 수 있다.-->
<스타일정의>
<!--css 코드-->
</스타일정의>무조건 CSS코드는 style태그 안에서만 사용해야한다.
4. SCRIPT(JS 불러오거나 작성하기)
HTML 문서에서는 CSS는, 작성된 CSS를 <link>로 불러오거나 <style></style>안에 작성할 수 있다.
JS는 <script></script>로 이 2가지 방식을 모두 사용할 수 있다.
<!-- 불러오기 -->
<script src = "./js/main.js"></script>
<!-- 작성하기 -->
<script>
function windownOnClickHandler(event){
console.log(event);
}
window.addEventListener('click', windownOnClickHandler);
</script>
<!--다음과 같이 이해할 수 있다.-->
<!-- 불러오기 -->
<자바스크립트 문서경로 = "./js/main.js"></자바스크립트>
<!-- 작성하기 -->
<자바스크립트>
<!-- JS 코드 -->
</자바스크립트>
'HTML > 기초' 카테고리의 다른 글
| BODY 태그(div, image), feat.웹 표준 검사 --> HTML 문서의 구조 (0) | 2020.12.22 |
|---|---|
| HTML 문서의 범위 & DOCTYPE(DTD) (0) | 2020.12.22 |
| 빈 태그(Empty tag) (0) | 2020.12.22 |
| 부모요소(Parent Element) & 자식 요소(Child Element) (0) | 2020.12.22 |
| 속성(Attribute)& 값(Value) (0) | 2020.12.22 |