본문 바로가기

YouTube/웹프로그래밍

[HTML/CSS/JS] #1. HTML 기본 구조 및 DOM 트리 구조

반응형

HTML 이란?

 

 

HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.

 

 

HTML 문서의 기본적인 구조

 

요소(element), 요소명(element), 요소 내용(Content),
시작 태그(StartTag), 종료 태그(EndTag),
속성(attribute), 값(value)으로 구성됩니다.

 

1. 요소 : 문서를 구성하는 각 내용을 해당 의미나 성질에 따라 '요소'로 분류
2. 태그 : 해당 부분이 어떤 요소인지를 '태그'라는 표시를 붙여 나타냄
① 태그에는 <시작 태그>와 <종류 태그>가 있으며, 이 둘 사이에 '요소 내용' 을 넣어 기술
② 위 그림에는 'a' 요소명으로 분류되므로 칭할 때 "a 태그" 라고 합니다.
다른 예로 <h1>큰 제목</h1> 형태의 요소가 있다면 이 경우에는 "h1 태그" 라고 합니다.

 

 


 

 

DOM 트리 구조

 

DOM(Document Object Model)이란?

문서 객체 모델은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.
DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.
DOM은 또한 W3C가 표준화한 여러 개의 API의 기반이 된다.

 

 

DOM Tree (간단한 트리 구조 예시)

HTML 문서는 전체가 html 요소를 기준점(루트)으로 하는 계층 구조로 되어 있습니다.
이러한 구조를 '트리 구조(나무 구조)'라고 합니다.

 

이미지 출처 : 위키백과

 

 

위의 html 문서를 Dom Tree 구조로 표현하면 아래 그림과 같습니다.

 

 

이미지 출처 :위키백과

 

 

HTML5 기본 - template.html 형태 예시

 

DOCTYPE 선언

HTML5에서는 DOCTYPE 선언을 아래와 같이 합니다.
"문서 형식 선언"(Document Type Declaration) 또는 DOCTYPE이란?
어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것이다.

 

<!DOCTYPE html>

 

 

문자 인코딩 지정 방법

HTML5에서는 문서를 인코딩할 때 "UTF-8"을 사용합니다.
UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로, 켄 톰프슨과 롭 파이크가 만들었다.
UTF-8은 Universal Coded Character Set + Transformation Format – 8-bit 의 약자이다.

 

<meta charset="UTF-8">

 

 

HTML5 기본 - template.html 형태 예시

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>제목</title>
    </head>
    <body>
        본문 시작...
    </body>
</html>

 

 


※ 유튜브 영상으로 보기
반응형

위로 가기