박코딩

박코딩

공부기록 블로그

문서의 구조

1 minute read

문서의 구조

HTML 문서는 파일의 확장자가 html 또는 htm 이다.

메모장으로 소스코드를 작성하고 확장자를 html이나 htm으로 바꾸어주면 작성한 페이지를 웹 브라우저에 띄워준다.

작성한 소스코드를 실시간으로 확인하기 편한 사이트 JSFIDDLE

아니면 Atom같은 무료 에디터를 사용하는것도 편하다.

소스코드

<!DOCTYPE html>
<html>
  <head>
    <!--문서를 정의하는 데이터 위치-->
    <title>page struct</title>
    <meta charset = "utf-8">
  </head>

  <body>
    문서에 표시되는 컨텐츠 <br/>
  </body>
</html>


페이지 정보와 본문

페이지는 크게 페이지의 정보를 저장하는 공간과 웹 브라우저에 표시되는 본문으로 구분된다.

head 태그와 body 태그로 구분시킨다. 이 두 분류를 묶어주는 가장 큰 개념이 html 태그이다.

<html> ~ </html> : 웹페이지의 시작과 끝을 정의한다.

<head> ~ </head> : 웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용한다.

<title> ~ </title> : 웹 페이지의 탭에 표시되는 제목

<body> ~ </body> : 브라우저에 실제 표시되는 내용이 들어오는 곳이다.

헤드의 내용 중 <meta charset=”UTF-8”>은 해당 문서의 문자 인코딩 방식을 명시하는 것으로 이 문장을 적지 않으면 페이지의 전체 문자가 깨져서 나오는 경우가 생긴다.

html에서 주석은 <!– 내용 –> 으로 작성할 수 있다.


DOCTYPE

Document Type Declaration 의 약어이다.

자신이 작성한 html 코드가 어떤 방식의 html 코드로 작성됐는지 선언하는 방식이다.

DOCTYPE

즉 html이 처음 등장하고 지금 까지 다양한 버전이 나오면서 버전마다 포함하고 있는 태그도 다르기 때문에 명시적으로 사용할 html의 버전을 표시하는 것이다.

하지만 html5에 들어서면서 다른것들은 신경쓸 필요없이 웹페이지를 작성할 때 첫 문장을

<!DOCTYPE html>

으로 시작해주면 된다.

You may also enjoy