ProgrammingHTML

HTML 기초 알아봅시다!

DOCTYPE, DOCTYPE html, HTML 기초, HTML 기초적인 구조, 웹 브라우져

HTML에 기초부터 배워 봅시다.

오늘은 HTML에 대해서 배워봅시다. 정말 쉽고 간단하니 누구가 배울 수 있습니다. 차근차근 알아봅시다!

HTML 기초적인 구조

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>제목을 쓰는 태그 H1</h1>
<p>내용을 작성할 때 사용하는 p 태그</p>

</body>
</html>

위에서 사용한 태그 설명

  • <!DOCTYPE html> : 이 문서를 html로 정의 합니다.
  • <html> : html 페이지의 루트 요소 입니다.
  • <head> : 문서에 대한 메타 정보가 포함되어 있습니다.
  • <title> : 문서의 제목을 지정합니다.
  • <body> : 표시되는 페이지 내용이 포함되어 있습니다.
  • <h1> : 클 글씨를 작성할 수 있습니다. 주로 제목을 쓸 때 사용합니다.
  • <p> : 내용을 작성할때 주로 사용 됩니다.

HTML 태그

Html 태그는 보통 아래와 같이 생겼습니다.

<태그 이름>내용을 적습니다…</태그 이름>

  • html 태그는 보통 짝을 이루어 사용 됩니다. 작성하실 내용 앞과 뒤에 사용하실 태그를 이렇게 <p>내용</p> 붙이면 됩니다.
  • 첫 번쨰 태그는 시작태그, 두번째 태그는 끝 태그라 부릅니다.

웹 브라우져

웹브라우져(크롬, 인터넷익스플로어, 파이어 폭스, 사파리)의 목적은 html태그를 읽고 보여주는 것입니다.

브라우져는 html 태그를 보여주지는 않지만 그 태그를 사용하여 사용자에게 어떻게 보여줄지 결정합니다.

위의 결과를 브라우저에서 보면 아래와 같습니다.

결과

HTML 페이지 구조

html 페이지 구조

주의 : <body> 태그안에 흰색으로 칠해진 부분만 브라우져에 표시 됩니다.

<!DOCTYPE html> 이 무엇이지??

<!DOCTYPE> 자체가 문서의 타입을 나타냅니다. 그래서 브라우져가 웹페이지를 정확하게 보여줄 수 있죠.
딱 한번만 사용하고 보통 html 문서에 맨 위에 작성됩니다. (html 태그를 사용하기 전에 사용하면 됩니다.)
대문자 소문자 상관없이 사용하셔도 괜찮습니다. HTML5 에서는 <!DOCTYPE html>으로 정의 합니다.

다음은 html 에디터에 대해서 알아 봅시다. 궁금하신 점 있으면 물어봐 주세요.

HTML에디터 (jsFiddle,메모장)
Share