티스토리 뷰

Best IT/웹 프로그래밍

HTML 기본 구조

정보킹 2020. 12. 9. 22:20
반응형

 

HTML 문서의 기본 구조

 

HTML 문서를 작성하기 위해서는 먼저 기본 구조에 대하여 알아야 합니다.

 

HTML 문서의 골격 즉, 기본이 되는 구조는 크게 4가지로 구분됩니다.

 

1. 이 문서는 html 문서이다라고 선언하는 → <!DOCTYPE html>

2. html 문서의 시작과 끝을 나타내는 → <html> </html>

3. html 태그 안에 위치하여 문서의 머리 부분을 정의하는 head 태그 → <head> </head>

4. html 태그 안, head태그 아래에 위치하여 문서의 몸통 부분을 나타내는 body 태그 → <body> </body>

 

이 중 코딩의 핵심이 되는 부분은 두 가지 부분입니다.

문서의 머리 부분인 head 부분과 문서의 몸통 부분으로 문서의 실제 내용을 포함하는 body 부분이죠.

<!DOCTYPE html>
<html lang="ko">
   <head>
      제목, 메타태그, 스타일시트, 자바스크립트 등
   </head>      
   <body>
      본문(텍스트, 이미지, 동영상, 자바스크립트 등)
   </body>
</html>

head 부분

웹브라우저의 타이틀에 나타나는 내용 또는 대부분 보이진 않지만 웹페이지의 속성 정의 등 다양한 정보를 담고 있습니다.

body 부분

웹브라우저의 body부분에 나타납니다.

문서의 몸통부분으로 대부분 눈에 보이는 것인 텍스트, 이미지, 동영상 등을 담고 있습니다.

 

위 이미지의 파란 부분은 head 부분 안에 정의 해 놓은 제목이 표시됩니다.

또한 빨간 부분은 브라우저의 body 부분으로, HTML 파일의 body 부분에 입력 한 내용들이 보이게 됩니다.

기본 구조에서 몇몇 태그들을 추가 한, 조금 더 구체적인 코딩 예를 보면 아래와 같습니다.

<!DOCTYPE html>
<html lang="ko">
   <head>
      <title>웹페이지 제목</title>
      <meta charset="utf-8">
      <style>
         .textType1 {
             font-size:20px;
         }
         .textType2 {
             font-size:30px;
         }
         .textType3 {
             font-size:40px;
         }
      </style>
      <script>
          function hi() {
             alert("할수있다!")
          }
      </script>
   </head>      
   <body>
      웹페이지만들기
      <div class="textType1">도전</div>
      <div class="textType2">당신은</div>
      <div class="textType3" onclick="hi()">클릭</div>
   </body>
</html>

'클릭'이라는 단어를 클릭하면 아래와 같은 결과가 나타나죠.

위 예제처럼 head 부분과 body 부분에 다양한 태그를 사용하며 웹페이지를 만들어 가게 됩니다. 

다양한 태그에 대하여는 차근차근 하나씩 배워 간다면 쉽게 사용할 수 있게 될 것입니다.

 

오늘은 HTML 문서의 기본 골격이 되는 기본 구조에 대하여 알아보았습니다.

728x90
반응형
저작자표시

'Best IT > 웹 프로그래밍' 카테고리의 다른 글

HTML파일 여는 법(웹 &소스 확인 하기)  (1) 2020.12.24
HTML 태그란 무엇인가  (2) 2020.12.02
[Web] 웹프로그램이란? 어디서부터 시작하면 될까!  (3) 2020.11.23
댓글