마크업 언어는 문서의 구조와 내용을 표시하고 표현하기 위해 사용되는 언어입니다.
주로 웹 페이지의 구조와 스타일을 정의하는 데에 사용되며, 웹 개발에서 많이 활용됩니다.
여기에서는 가장 널리 알려진 두 가지 마크업 언어인 HTML과 XML에 대해 알려드리겠습니다.
1. HTML (HyperText Markup Language)
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
웹 브라우저는 HTML 문서를 해석하여 문서의 요소들을 파싱하고 표시합니다.
HTML은 태그(Tag)라는 특수한 구조로
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<h1>제목</h1>
<p>문단입니다.</p>
</body>
</html>
위의 예시에서 `<html>`, `<head>`, `<title>`, `<body>`, `<h1>`, `<p>`는 HTML 태그입니다.
각 태그는 특정한 의미와 역할을 가지며, 브라우저에게 어떻게 표시해야 할지 알려줍니다.
2. XML (eXtensible Markup Language)
XML은 데이터를 구조화하고 전달하기 위한 마크업 언어입니다.
HTML과 비슷하게 태그를 사용하지만, HTML처럼 고정된 태그 집합을 사용하는 것이 아니라 사용자가 직접 태그를 정의할 수 있습니다.
XML은 데이터의 의미와 구조를 설명하는 데에 중점을 둡니다. 예를 들면 다음과 같습니다.
<book>
<title>책 제목</title>
<author>작가 이름</author>
<year>출판 연도</year>
</book>
위의 예시에서 `<book>`, `<title>`, `<author>`, `<year>`은 XML 태그입니다. 이러한 태그를 사용하여 데이터의 필드와 값을 표현하고 구조화할 수 있습니다.
XML은 데이터를 저장하고 전송하는 데에 널리 사용되며, 웹 서비스 통신, 구성 파일, 데이터 교환 등 다양한 용도로 활용됩니다.
마크업 언어는 단순한 텍스트보다 더 많은 정보를 전달할 수 있으며, 컴퓨터 시스템이나 브라우저 등에서 이해하고 처리하기 쉽습니다.
이러한 특성으로 인해 마크업 언어는 웹 개발과 데이터 관리에 필수적인 도구로 사용되고 있습니다.
HTML이란?
HTML( HyperText Markup Language)은 웹 페이지의 구조와 콘텐츠를 표시하기 위해 사용되는 마크업 언어입니다.
HTML은 웹 브라우저에게 문서의 구조를 알려주고, 텍스트, 이미지, 링크, 테이블 등 다양한 요소를 포함할 수 있도록 합니다.
HTML은 태그(Tag)라 불리는 특수한 구조로 이루어져 있습니다.
각 태그는 '<'와 '>'로 둘러싸여 있으며, 시작 태그와 종료 태그로 구성됩니다.
시작 태그는 '<' 다음에 요소의 이름이 오고, 종료 태그는 '</' 다음에 요소의 이름이 오며, 요소의 이름은 대소문자를 구분하지 않습니다.
예를 들어, 다음은 간단한 HTML 문서의 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<h1>제목</h1>
<p>문단입니다.</p>
<a href="https://www.example.com">링크</a>
<img src="image.jpg" alt="이미지">
</body>
</html>
위의 예시에서 각 태그는 다음과 같은 역할을 수행합니다.
- `<!DOCTYPE html>`: 문서의 형식을 정의하는 선언부입니다.
- `<html>`: HTML 문서의 루트 요소를 나타냅니다.
- `<head>`: 문서의 헤더 부분을 정의합니다. 이 부분에는 문서 제목, 외부 스타일 시트, 스크립트 등이 위치할 수 있습니다.
- `<title>`: 문서의 제목을 정의합니다. 웹 브라우저의 타이틀 바에 표시됩니다.
- `<body>`: 문서의 본문 부분을 정의합니다. 웹 페이지의 실제 내용은 이 부분에 위치합니다.
- `<h1>`: 제목(Heading)을 정의합니다. `<h1>`부터 `<h6>`까지 다양한 수준의 제목을 사용할 수 있으며, 숫자가 작을수록 더 큰 제목을 의미합니다.
- `<p>`: 문단(Paragraph)을 정의합니다.
- `<a href="https://www.example.com">`: 링크를 정의합니다. `href` 속성은 링크의 주소를 지정합니다.
- `<img src="image.jpg" alt="이미지">`: 이미지를 정의합니다. `src` 속성은 이미지 파일의 경로를 지정하고, `alt` 속성은 이미지에 대한 대체 텍스트를 제공합니다.
HTML은 다양한 태그와 속성을 활용하여 웹 페이지의 구조와 내용을 자유롭게 표현 할 수 있습니다. 또한 CSS(Cascading Style Sheets)와 함께 사용하여 웹 페이지의 스타일링 및 레이아웃을 지정할 수도 있습니다.
'IT 이야기' 카테고리의 다른 글
| 전자정부 표준프레임워크 eGovFrame (0) | 2023.06.24 |
|---|---|
| 객체 지향 프로그램의 특징 및 종류 (0) | 2023.06.24 |
| 도메인 설명 및 도메인 구매처 알아보기 (0) | 2023.06.18 |
| 인터넷이란? (0) | 2023.06.17 |
| 자바(Java)는 객체지향 프로그래밍 언어 (0) | 2023.06.17 |
