HTML - 기본 구조의 HTML 문서 만들기
HTML - 기본 구조의 HTML 문서 만들기
가장 기본적인 구조의 HTML 문서를 만들어 보겠습니다.
HTML 문서 만들기 |
<!doctype html> <html> </html>
첫 번째 줄에 <!doctype html>이라고 입력후 중간에 빈 줄을 두고 웹 문서의 시작과 끝을 나타내는 <html> 태그와 </html> 태그를 입력합니다.
* <doctype html>은 이문서는 HTML5로 작성하는 문서라는 뜻입니다.
<!doctype html> <html> <head> </head> <body> </body> </html>
<html> 태그 안에 들여쓰기 한다음에 <head>태그 <body> 태그를 입력합니다.
* 모든 html 문서는 head 부분과 body 부분으로 나뉩니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>First create html document</title> </head> <body> </body> </html>
<head>태그 안에 위 코드와 같이 입력합니다.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>First create html document</title> </head> <body> <img src="/img/html.png"> <p>what is html</p> </body> </html>
<body> 태그 아래 들여쓰기를 합니다.
<img> 태그는 이미지를 표시하기 위한 태그이고 <p> 태그는 화면에 문단을 표시하기 위한 것입니다.
지금 입력한 'html.png'라는 이미지와 'what is html'라는 글자를 표시하는 것입니다.
[화면 출력]
지금까지 입력한 소스코드의 출력물 입니다.
title부분 'First create html document' 이미지, 이미지에 대한 글자가 모두 잘 표시되는것을 확인할 수 있습니다.
HTML 문서의 기본구성 |
웹 문서는 아무리 길더라도 다음과 같은 기본 구조로 이루어져 있있으며 <head> ~ </head> 부분과 <body> ~ </body> 부분에 대부분의 소스가 표시됩니다.
HTML 문서와 DOCTYPE
웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용하는 것이 '문서 유형(document type)'을 지정하고 <!doctype> 태그입니다. 문서 유형은 웹 브라우저에서 이제 부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라고 알려주는 것입니다.
시작은 <html> 태그
문서 유형은 선언한 후에 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html> 태그입니다.
<!doctype html> <html lang="ko"> ...... </html>
<html> 태그에서는 lang이라는 속성을 사용하여 문서에서 사용할 언어를 지정할 수 있습니다. 예로 한국어라면 korea의 약자인 ko를 사용하시면 됩니다.
<head> 브라우저에게 정보를 주는 태그
웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 모두 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다.
<title> 태그 - 문서제목
title태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고, 해당 페이지를 방문하는 방무자나 검색엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내요을 추측 할수 있습니다.
<meta> 태그 - 문자 인코딩 및 문서 키워드, 요약정보
<head> 태그 안에서 <meta> 태그는 여러 용도로 사용됩니다 그중에서 가장 중요한 것은 문자 인코딩을 지정하는 것입니다.
<body> 태그 - 문서의 몸통
문서 유형을 정의하고 문서 정보까지 입력하였다면 <body> 태그와 </body> 태그사이에 실제 브라우저에 표시될 내용을 입력합니다.
