<--HTML5의 기본 구조를 알아 봅시다!-->
<!DOCTYPE html>
<html>
<head>
<title>타이틀 명</title>
</head>
<body>
HTML5의 코드 들이나 자바 스크립트 등이 들어간다.
</body>
</html>▲기본 구조는 위와 같다
<--HTML5문서의 규칙-->
1.HTML문서는 <html>로 시작하여 </html>로 끝나여 하고, 그 사이에는 <body>와 </body> 가 있다.
2.<head>영역은 <head>로 시작해서 </head>로 끝난다. 일반적으로는 웹 문서의 제목, 키워드 문자셋, 등 웹브라우저나 검색 엔진에 제공할 정보를 입력한다.
3.<head>영역 사이에는 <title>로 시작해서 </title>로 끝나는 태그가 올 수 있다. 여기에는 웹브라우저의 제목 표시줄에 나타나는 내용을 입력한다.
4.<body>영역에는 웹 문서의 실질적인 코드를 입력한다.
※사실 대부분 <이름>로 시작해서 </이름>으로 끝난다.
<--HTML5연습 하기-->
<!DOCTYPE html>
<html>
<head>
<title>Hello Html5!</title>
</head>
<body>
<p>Hello Html5 world</p>
</body>
</html>
▲위는 간단하게 title제목을 Hello Html5라고 했고, body에는 Hello Html5 world를 웹에 띄워주는 코드이다.
-Tip : 처음 빈 화면에서 html이라고 친 뒤 Tap키를 누르면 자동완성 기능이 작동한다.
-서브라임택스트를 사용하기 때문에 코드를 쓴 뒤 Ctrl+S를 눌러 저장하고 실행하였음.
<--Meta 태그-->
메타 태그는 일반적으로 <head>태그 안에 들어가는 태그인데, 웹 문서의 키워드, 주제 , 문자 셋 등을 정의 할 때 사용된다.
▲위에 보이는 빨간 박스가 그 예이다.
<--Meta 태그 구성-->
<!DOCTYPE html>
<html>
<head>
<title>Meta tag</title>
</head>
<body>
<meta name = "generator" content = "Edge Code">
->웹 사이트를 제작할 떄 어떤 툴을 사용했는지 표시
<meta name = "author" content = "MS_Kim">
->웹 사이트의 저작자를 표시
<meta name = "keywords" content = "HTML5 CSS3">
-> 검색엔진에서 검색할 웹 사이트의 키워드를 표시한다.
<meta name = "descroption" content = "Make Web">
-> 웹 사이트의 주제를 표시합니다.
<meta http-equiv="content-type" content="text/html charset=euc-kr">
->문자 셋을 표시한다.
</body>
</html>
▲태그의 구성은 위와 같이 되어있다.
<--Meta 태그 -->
속성 |
값 |
설명 |
name |
application-name |
웹의 이름을 표시. |
author |
문자의 저자를 표시 . |
|
description |
문서의 설명 표시. |
|
generator |
제작 툴을 표시. |
|
keywords |
문서의 키워드를 표시. |
|
http-equiv |
content-type |
문서의 인코딩을 선언 . |
default-style |
대체 스타일시트를 선언 . |
|
refresh |
문서의 새로 고침 주기 및 이동을 선언. |
|
content |
텍스트 |
http-equiv나 name의 속성 값을 표시. |
charset |
문자 셋 |
문서의 문자 셋을 선언. |
Tip: Html에서 한국어가 깨질 때 가있다. 그럴때 <meta charset="utf-8">을 <head>에 넣어 주면 깨지지 않고 잘 작동 될 것 이다.
'Programming > Html5 + CSS' 카테고리의 다른 글
| CSS3 기초 (1) | 2015.12.02 |
|---|---|
| 여러 태그03 (0) | 2015.12.02 |
| 여러 태그02 (0) | 2015.11.29 |
| HTML5 시멘틱 구조 및 여러 태그 (0) | 2015.11.25 |
| Html5+CSS3 시작! (0) | 2015.11.25 |
KimMinSung