<html lang="kr">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="HTMl과 CSS 배우기">
<meta name="author" content="Lee">
<meta http-equiv="refresh" content="30">
<title>Document</title>
<style>
body {
background-color: yellow;
color: blue;
}
</style>
<link rel="stylesheet" href="style.css">
<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>
</head>이번 시간에는 head요소들의 여러가지 태그들에 대해서 알아보자.
<html lang="kr">html의 문서는 2행의 <html>부터 시작한다고 하였다. 이 요소에도 속성을 사용 할 수 있는데 특히
lang 속성을 사용하는 경우가 많다. 위의 예시는 한국어를 주 언어로 하는 경우의 예이다.
<meta charset="UTF-8" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="HTMl과 CSS 배우기">
<meta name="author" content="Lee">
<meta http-equiv="refresh" content="30">meta의 요소들은 여러 정의에 사용된다.
먼저 charset은 브라우저가 사용할 문자셋을 정의한다. 대부분 "UTF-8"을 사용한다.
두번째로 keywords는 검색엔진이 사용할 keyword를 정의한다.
세번째로 description은 사용자가 검색을 하였을때 나타나는 웹페이지 설명이다.
네번째로 author는 웹페이지의 저자를 표시한다.
마지막으로 refresh는 위에 나와있는 코드를 해석하면 30초마다 웹페이지를 Refresh한다는 뜻으로 해석된다.
<title>Document</title>title의 요소는 문서의 제목을 정의한다. 이 제목은 웹브라우저의 탭에 표시된다.
<style>
body {
background-color: yellow;
color: blue;
}
</style>
<link rel="stylesheet" href="style.css">css를 나타내는 방식은 두가지가 존재한다.
1. html문서에 직접 서술
2. css문서를 만들어 link로 연결
위의 코드에서는 두가지 방식 모두 다 보여주고있는데
<style></style>을 이용하여 HTML문서 내에 직접 정의를 해주고 있다.
두번째로 <link>를 이용하여 css파일을 연결하여 문서를 따로 기술해주고있다.
<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script><script></script>같은 경우는 JS코드를 HTML문서 내에 직접 기술해주는 방식이다.
이는 <head>의 내부에 작성을 하여야한다.
물론 JS도 css와 같이 따로 문서에 기술한 뒤 연결을 할 수 있다. 하지만 이 방식은 head가 아닌 body에서 진행하므로
JS와 body공부를 할때 따로 기술을 하도록 하겠다.
'Web > HTML' 카테고리의 다른 글
| #6. 이미지 & 멀티미디어 (0) | 2023.02.27 |
|---|---|
| #5. List & Table (0) | 2023.02.24 |
| #4. HTML의 핵심 Link (0) | 2023.02.24 |
| #3. 텍스트 관련 태그들 정리 (0) | 2023.02.24 |
| #1. HTML의 기본 문법 (0) | 2023.02.21 |
