HTML 기본 템플릿
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>브라우저 상단 탭에서 보여지는 제목</title>
</head>
<body>
<h1>HTML 기본 템플릿</h1>
<p>안녕! 친구야 ~ 정말 반가워 ~</p>
</body>
</html>
오늘 할 내용을 먼저 영상으로 한번 보시죠..^^
abc.html 이라는 아이콘이 [ 그림 1 ] 과 같이 생성되었을 텐데
필자는 기본 브라우저가 크롬이여서 [ 그림 1 ]과 같은 이미지로 아이콘이 만들어졌습니다.
[ 그림 1 ]
이 아이콘을 더블클릭하면 [ 그림 2 ] 와 같은 화면이 나오면서 기본 화면이 나타날 것입니다.
[ 그림 2 ]
[ 그림 2 ] 를 보는 바와 같이 기본 템플릿을 가지고 제목과 내용을 가진 HTML 페이지를 쉽게 만들어 볼 수 있습니다.
이제 위의 소스를 분석(?) 해 보겠습니다.
<!DOCTYPE html> <----- 이 문서는 HTML 문서입니다. 라는 뜻입니다.
HTML은 tag 로 시작해서 tag 로 끝나도록 정해져 있습니다. ( 예외도 있지만 예외는 나중에 차근차근 알아가 봅시다. )
<html> ... </html> <----- html 로 시작하는 태그(tag) 이며 문서의 시작과 끝을 정해줍니다.
<head> ... </head> <----- head 태그는 html 태그 사이 body 태그 위에 생성합니다.
<body> ... </body> <----- body 태그는 html 태그 사이 head 태그 아래에 생성합니다.
이렇게만 우선 적용해 보면.. 아무것도 없는 가장 기본적인 뼈대 모양을 갖춥니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
여기에 추가적으로
<meta charset="utf-8"> <----- head 태그 사이에 문서의 인코딩 타입을 정해줘야 파일의 글자들이 깨지지 않습니다. 기본적으로 utf-8 을 선언해 줍니다.
<title>브라우저 상단 탭에서 보여지는 제목</title> <----- title 태그는 말 그대로 문서의 제목과 같은 것으로 브라우저 상단의 탭 형태로 보여지는 문서의 제목을 말합니다.
<h1>HTML 기본 템플릿</h1> <----- h1 태그는 (heading) HTML 문서 내의 제목을 나타내며 h1 태그부터 h6 까지 다양하게 있습니다.
<p>안녕! 친구야 ~ 정말 반가워 ~</p> <----- p 태그는 (paragraph) 단락을 나누고 여백을 주며 p 태그 안에 내용을 적을 수 있습니다.
이제 전체 내용을 다시 한번 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>브라우저 상단 탭에서 보여지는 제목</title>
</head>
<body>
<h1>HTML 기본 템플릿</h1>
<p>안녕! 친구야 ~ 정말 반가워 ~</p>
</body>
</html>
다시 보니 내용을 정확히 알 수 있으시죠..?
코드를 눈으로 읽으실 수 있으시면 이해 되신겁니다.
'Program > HTML' 카테고리의 다른 글
| 따라하며 배우는 HTML - #6 ( HTML Style) (0) | 2018.10.07 |
|---|---|
| 따라하며 배우는 HTML - #5 ( a 태그 ) (0) | 2018.10.06 |
| 따라하며 배우는 HTML - #4 ( ul 태그 / ol 태그 ) (0) | 2018.10.06 |
| 따라하며 배우는 HTML - #3 ( 줄바꿈 / 엔티티코드 ) (0) | 2018.10.06 |
| 따라하며 배우는 HTML - #2 ( 이미지 넣기 ) (0) | 2018.10.06 |