728x90
반응형
이번 포스트에서는 HTML로 작성된 파일의 구조에 대해서 알아보겠습니다.
크게 다음의 3가지 영역으로 구분지어 알아보도록 하겠습니다.
- <!DOCTYPE html> + <html> </html>
- <head> </head>
- <body> </body>
1) <!DOCTYPE html> 태그 + <html> </html> 태그
<!DOCTYPE html> 태그는 브라우저에게 문서의 타입이 HTML이라는 것을 알려주는 용도로 사용합니다.
따라서 모든 HTML 문서는 <!DOCTYPE html> 태그로 시작하는 것이 좋습니다.
html 태그는 모든 html 문서의 최상위 루트를 의미합니다.
따라서 문서에서 사용되는 모든 태그들은 html 태그의 안에 배치되어야 합니다.
정리하면 html 문서는 <html> 태그부터 시작하여 </html>로 끝나게 됩니다.
2) <head> </head> 태그
head 태그는 문서의 머리말을 의미하는 태그입니다.
주로 문서의 제목이나 문서의 설정등을 작성하는 용도로 사용합니다.
<head>
<meta charset="utf-8">
<style>
.myDiv {
order : 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
<title>현재 문서의 제목</title>
</head>
위와 같이 작성할 수 있습니다.
위의 코드를 보면 현재 head 안에
- meta 태그 : 현재 html 문서의 정보
- style 태그 : css로 만든 스킨
- title 태그 : 현재 html 문서의 제목
과 같은 세부 설정을 기록한 것을 볼 수 있습니다.
3) <body> </body> 태그
body 태그는 문서의 본문을 의미하는 태그입니다.
<body>
<p> 새로운 문서입니다.</p>
<div class = myDiv>
<h2>div 태그입니다.</h2>
<p>div 태그를 사용하였습니다.</p>
</div>
</body>
위와 같이 작성할 수 있습니다.
위의 코드에서 보이는 div 태그는 하나의 구역을 나누기 위해 사용하는 태그입니다.
4) 최종 완성
최종 완성 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.myDiv {
order : 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
<title>현재 문서의 제목</title>
</head>
<body>
<p> 새로운 문서입니다.</p>
<div class = myDiv>
<h2>div 태그입니다.</h2>
<p>div 태그를 사용하였습니다.</p>
</div>
</body>
</html>
실행한 결과는 다음과 같습니다.
728x90
반응형