마크업(Markup)은 문서나 텍스트에 구조와 형식을 부여하기 위해 사용하는 특수한 기호나 코드를 의미한다. 마크업 언어는 이러한 기호나 코드를 사용하여 문서의 내용을 구조화하고,
서식 정보를 제공하며, 데이터의 의미를 명학하게 한다.
HTML(HyperText Markup Language) 에서의 마크업
- HTML(HyperText Markup Language)은 웹 페이지를 작성하는 데 사용되는 마크업 언어이다. HTML은 문서의 구조를 정의하고, 텍스트, 이미지, 링크, 비디오 등 다양한 요소를 포함하여 웹 페이지를 구성한다.
- HTML 마크업의 주요 구성 요소는 태그이다. 태그는 요소의 시작과 끝을 표시하며, 요소의 의미와 역할을 정의한다. 예를 들어, <p> 태그는 단락을 나타내고, <a> 태그는 하이퍼링크를 나타낸다.
마크업의 예시
아래는 간단한 HTML 문서의 예이다.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a paragraph of text on my website.</p>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
이 예제에서 HTML 마크업은 다음과 같은 역할을 한다:
- <!DOCTYPE html>: 문서 형식을 선언.
- <html>: 문서의 루트 요소.
- <head>: 메타데이터를 포함하는 요소.
- <title>: 웹 페이지의 제목을 정의.
- <body>: 웹 페이지의 본문을 정의.
- <h1>, <p>, <a>: 각각 헤더, 단락, 링크 요소를 정의.
이러한 태그를 사용하여 문서의 구조를 정의하고, 브라우저가 이를 해석하여 웹 페이지를 렌더링하게 된다.
마크업 언어의 종류
HTML 외에도 다양한 마크업 언어가 존재한다. 예를 들어:
- XML (eXtensible Markup Language): 데이터의 구조를 정의하는 데 사용되는 마크업 언어, 주로 데이터 교환에 사용된다.
- Markdown: 간단한 텍스트 서식을 위한 마크업 언어로, 주로 문서화와 블로그 포스트에 사용된다.
- LaTeX: 학술 논문과 기술 문서를 작성하는 데 널리 사용되는 마크업 언어다.
마크업 언어는 문서의 내용에 구조와 의미를 부여하며, 이를 통해 문서를 더 쉽게 읽고 관리할 수 있게 한다.
DOM 구조 (Document Object Model)
*DOM(Document Object Model)*은 HTML, XHTML, XML 문서를 구조화하여 문서의 콘텐츠를 프로그래밍적으로 접근하고 수정할 수 있도록 하는 인터페이스다.
DOM은 문서를 트리 구조로 표현하며, 이 트리의 각 노드는 문서의 일부(요소, 속성, 텍스트 등)를 나타낸다.
DOM 트리의 구성 요소:
- 요소(Element) 노드 : HTML 태그를 나타내는 노드이다 . 예를 들어, <div>, <p>, <a> 등.
- 속성(Attribute) 노드 : 요소의 속성을 나타내는 노드이다. 예를 들어, 에서 href 속성.
- 텍스트(Text) 노드 : 요소 내의 텍스트 콘텐츠를 나타내는 노드.
- 주석(Comment) 노드 : HTML 주석을 나타내는 노드이다. 예를 들어, <!-- This is a comment -->.
DOM 트리 예시:
위의 HTML 마크업을 DOM 트리로 표현하면 다음과 같이 된다:
Document
├── html
│ ├── head
│ │ ├── title
│ │ │ └── "Example Page"
│ └── body
│ ├── h1
│ │ └── "Welcome to My Website"
│ ├── p
│ │ └── "This is a paragraph of text."
│ └── a (href="https://www.example.com")
│ └── "Visit Example.com"이 구조에서 html, head, body, h1, p, a는 모두 요소 노드이며, 각 요소 노드는 자식 노드를 가질 수 있다. 텍스트 노드는 요소 노드의 자식으로 위치하며, 요소 내의 텍스트 콘텐츠를 나타낸다.
DOM과 자바스크립트
DOM은 자바스크립트를 사용하여 동적으로 접근하고 수정할 수 있다. 이를 통해 웹 페이지의 내용과 구조를 실시간으로 변경할 수 있다. 예를 들어, 자바스크립트를 사용하여 특정 요소의 텍스트를 변경하거나 새로운 요소를 추가할 수 있다.
자바스크립트를 사용한 DOM 조작의 예:
<head>
<title>Example Page</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
var heading = document.querySelector("h1");
heading.textContent = "Hello, World!";
var newParagraph = document.createElement("p");
newParagraph.textContent = "This paragraph was added dynamically!";
document.body.appendChild(newParagraph);
});
</script>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
이 예제에서는 DOMContentLoaded 이벤트를 사용하여 DOM이 완전히 로드된 후에 자바스크립트가 실행되도록 한다. document.querySelector와 document.createElement 메서드를 사용하여 기존 요소를 선택하고 새로운 요소를 생성하여 DOM 트리에 추가한다.
요약하면, 마크업은 HTML 태그를 사용하여 웹 페이지의 구조와 콘텐츠를 정의하는 것이고, DOM은 이러한 HTML 문서를 트리 구조로 표현하여 프로그래밍적으로 접근하고 조작할 수 있게 하는 인터페이스이다. 이를 통해 개발자는 동적이고 상호작용적인 웹 페이지를 만들 수 있다.
'Web > HTML' 카테고리의 다른 글
| [HTML] HTML 정의와 태그와 요소 (0) | 2024.05.28 |
|---|
