HTML과 XML은 둘 다 데이터를 마크업하는 데 사용되는 언어이지만, 그 목적과 사용 방식에서 중요한 차이점을 가지고 있습니다. 쉽게 예를 들어 설명해 드릴게요.
HTML (HyperText Markup Language): 웹 페이지의 뼈대와 내용
HTML은 웹 페이지를 만들고 그 내용을 구조화하는 데 사용되는 언어입니다. HTML은 미리 정의된 "태그"들을 사용하여 텍스트, 이미지, 링크 등을 브라우저가 어떻게 보여줄지 지시합니다. 중요한 점은 HTML 태그는 정해져 있고, 그 목적이 웹 브라우저가 콘텐츠를 시각적으로 렌더링하는 데 있다는 것입니다.
예시:
당신이 친구에게 "오늘 날씨가 정말 좋아!"라고 말하고 싶다고 가정해 봅시다. HTML은 이 말을 웹 페이지에 예쁘게 보여주기 위해 다음과 같이 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<title>날씨 정보</title>
</head>
<body>
<h1>오늘의 날씨</h1>
<p>오늘 날씨가 <span style="color: blue;">정말 좋아</span>!</p>
<img src="sunny.jpg" alt="맑은 날씨">
<a href="https://www.weather.com">더 많은 날씨 정보 보기</a>
</body>
</html>
- <h1>, <p>, <img>, <a> 등은 모두 HTML이 미리 정의해 놓은 태그입니다.
- <h1>은 제목을, <p>는 단락을, <img>는 이미지를, <a>는 링크를 나타냅니다.
- 웹 브라우저는 이 태그들을 보고 "아, 이건 제목이구나!", "이건 이미지를 보여줘야겠군!" 하고 이해하여 화면에 해당 요소를 렌더링합니다.
XML (eXtensible Markup Language): 데이터의 의미와 구조 정의
XML은 데이터를 저장하고 전송하는 데 사용되는 언어입니다. HTML과는 달리 XML은 미리 정의된 태그가 없습니다. 대신 사용자가 직접 태그를 정의하여 데이터의 의미와 구조를 명확하게 나타냅니다. 중요한 점은 XML은 데이터를 표현하는 데 중점을 두며, 데이터가 어떻게 보여질지에 대해서는 관여하지 않습니다.
예시:
당신이 친구에게 "오늘 날씨가 25도이고, 맑아"라는 정보를 전달하고 싶다고 가정해 봅시다. 이 정보를 기계가 이해하기 쉽도록 구조화하려면 XML을 사용할 수 있습니다.
<날씨정보>
<도시>서울</도시>
<날짜>2025-07-22</날짜>
<온도 단위="섭씨">25</온도>
<상태>맑음</상태>
</날씨정보>
- 여기서 <날씨정보>, <도시>, <날짜>, <온도>, <상태>는 제가 임의로 만든 태그입니다. XML은 이렇게 사용자가 필요에 따라 태그를 직접 만들 수 있습니다.
- 이 XML 파일은 "서울의 2025년 7월 22일 날씨 정보가 섭씨 25도이고 맑다"는 것을 명확하게 보여줍니다.
- XML 자체는 이 정보를 어떻게 보여줄지에 대한 지시가 없습니다. 이 XML 데이터를 받아들이는 프로그램이 이 정보를 해석하고 원하는 방식으로 사용하게 됩니다 (예를 들어, 웹 페이지에 표시하거나, 다른 시스템으로 전송하거나).
HTML과 XML의 주요 차이점 요약:
| 특징 | HTML (HyperText Markup Language) | XML (eXtensible Markup Language) |
| 목적 | 웹 페이지의 내용과 구조를 정의하고 표시 | 데이터 저장 및 전송, 데이터의 의미와 구조 정의 |
| 태그 | 미리 정의된 고정된 태그 사용 | 사용자가 필요에 따라 태그를 직접 정의 |
| 유연성 | 제한적 | 매우 유연함 (데이터 구조를 자유롭게 정의) |
| 용도 | 웹 페이지 디자인 및 렌더링 | 데이터 교환, 설정 파일, 웹 서비스 등 |
| 주요 초점 | 콘텐츠가 어떻게 보이는가 | 데이터가 무엇인가 |
쉽게 다시 비유하자면:
- HTML은 웹 페이지라는 책을 만드는 규칙서와 같습니다. 책의 제목, 단락, 그림 등을 어디에 어떻게 배치할지 정해진 규칙(태그)에 따라 작성합니다.
- XML은 어떤 종류의 정보든 담을 수 있는 빈 종이와 같습니다. 당신이 정보를 담을 상자(태그)를 직접 만들고, 그 상자 안에 정보를 넣습니다. 이 상자는 다른 사람이나 프로그램이 당신의 정보를 쉽게 이해하고 활용할 수 있도록 돕습니다.
결론적으로, HTML은 웹 브라우저가 정보를 시각적으로 표현하는 데 특화되어 있고, XML은 다양한 시스템 간에 데이터를 효율적으로 교환하고 구조화하는 데 특화되어 있다고 이해하시면 됩니다.
XML 소스를 메모장에 복사해서 확장자를 .xml로 저장하고 웹 브라우저로 열면, 대부분의 브라우저에서는 태그 모양이 그대로 노출됩니다. 이는 브라우저가 XML 파일을 처리하는 방식 때문입니다.
왜 태그가 그대로 나올까요?
- XML은 "데이터"이지 "표시"가 아닙니다: 앞서 설명했듯이 XML의 주 목적은 데이터를 구조화하고 저장하는 것입니다. HTML처럼 "이 태그는 제목이고, 저 태그는 단락이니 이렇게 보여줘!"라고 브라우저에게 지시하는 것이 아닙니다. XML 파일 자체는 그저 순수한 데이터의 집합일 뿐입니다.
- 브라우저의 기본 XML 처리 방식: 웹 브라우저는 XML 파일을 열었을 때, 기본적으로 XML의 트리 구조를 보여주려 합니다. 이는 개발자나 사용자에게 XML 파일의 내용과 구조를 쉽게 파악할 수 있도록 돕기 위함입니다. 즉, "이런 데이터 구조를 가지고 있어!"라고 보여주는 것이지, HTML처럼 예쁘게 렌더링하려는 의도가 아닙니다.
- 스타일 정보의 부재: XML 파일 자체에는 어떻게 표시되어야 할지에 대한 스타일 정보가 전혀 없습니다. HTML은 CSS(Cascading Style Sheets)와 같은 스타일 정보를 사용하여 태그들을 시각적으로 예쁘게 꾸밀 수 있지만, XML은 기본적으로 그러한 정보를 포함하지 않습니다.
그럼 XML 데이터를 웹 브라우저에서 예쁘게 보려면 어떻게 해야 할까요?
XML 데이터를 웹 브라우저에서 우리가 원하는 형식으로 보려면 다음과 같은 방법들을 사용해야 합니다.
- CSS (Cascading Style Sheets)와 연결: XML 파일에 CSS 스타일시트를 연결하여 데이터를 시각적으로 꾸밀 수 있습니다. 하지만 이 방법은 XML 파일이 매우 복잡해지거나, 표시 방식이 자주 변경될 때 비효율적일 수 있습니다.
그리고 style.css 파일에 다음과 같이 작성합니다:XML
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="style.css"?> <날씨정보> <도시>서울</도시> <날짜>2025-07-22</날짜> <온도 단위="섭씨">25</온도> <상태>맑음</상태> </날씨정보> -
CSS
날씨정보 { display: block; border: 1px solid #ccc; padding: 10px; margin: 10px; } 도시, 날짜, 온도, 상태 { display: block; margin-bottom: 5px; } 도시 { font-weight: bold; color: blue; } 온도 { color: red; } - 예시:
- XSLT (eXtensible Stylesheet Language Transformations) 사용: XSLT는 XML 문서를 다른 XML 문서, HTML 문서, 또는 일반 텍스트로 변환하는 데 사용되는 언어입니다. XML 데이터를 HTML로 변환하여 웹 브라우저에서 볼 수 있도록 하는 가장 일반적이고 강력한 방법입니다.
그리고 transform.xsl 파일에 다음과 같이 작성합니다 (XML 데이터를 HTML 테이블로 변환하는 예시):이렇게 XSLT 파일을 연결하면 브라우저는 XML 데이터를 XSLT 규칙에 따라 HTML로 변환하여 렌더링하므로, 예쁜 HTML 페이지처럼 보이게 됩니다.XML
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="transform.xsl"?> <날씨정보> <도시>서울</도시> <날짜>2025-07-22</날짜> <온도 단위="섭씨">25</온도> <상태>맑음</상태> </날씨정보> -
XML
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/날씨정보"> <html> <head> <title>날씨 정보</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <h2>날씨 상세 정보</h2> <table> <tr> <th>도시</th> <th>날짜</th> <th>온도</th> <th>상태</th> </tr> <tr> <td><xsl:value-of select="도시"/></td> <td><xsl:value-of select="날짜"/></td> <td><xsl:value-of select="온도"/> (<xsl:value-of select="온도/@단위"/>)</td> <td><xsl:value-of select="상태"/></td> </tr> </table> </body> </html> </xsl:template> </xsl:stylesheet> - 예시:
- 웹 애플리케이션에서 처리: 가장 흔한 방법은 웹 서버(예: Apache, Nginx)에서 동작하는 서버 사이드 스크립트 언어(예: Python, PHP, Java, Node.js)를 사용하여 XML 데이터를 읽어와서 HTML로 동적으로 생성하여 클라이언트(브라우저)에게 전송하는 것입니다.
- 이해를 돕기 위해 다시 강조하자면, XML 파일 자체는 "데이터"이며, 브라우저가 그것을 HTML처럼 예쁘게 "표시"해주지는 않는다는 점을 기억하시면 됩니다. 데이터를 예쁘게 보고 싶다면, 그 데이터를 HTML로 변환하거나 스타일을 적용하는 추가적인 작업이 필요합니다.
참고)
파일명 : style.css
날씨정보 {
display: block;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
도시, 날짜, 온도, 상태 {
display: block;
margin-bottom: 5px;
}
도시 {
font-weight: bold;
color: blue;
}
온도 {
color: red;
}
소스 해석)
날씨정보 {
display: block; /* 이 요소를 블록 레벨 요소처럼 동작하게 하여 사용 가능한 전체 너비를 차지하고 새 줄에서 시작하도록 합니다. */
border: 1px solid #ccc; /* 요소 주위에 연한 회색(#ccc)의 1픽셀짜리 실선 테두리를 추가합니다. */
padding: 10px; /* 요소 내용과 테두리 사이에 상하좌우로 10픽셀의 공간을 추가합니다. */
margin: 10px; /* 요소의 테두리 바깥에 상하좌우로 10픽셀의 공간을 추가하여 다른 요소로부터 떨어뜨립니다. */
}
도시, 날짜, 온도, 상태 {
display: block; /* 이 각 요소를 블록 레벨 요소처럼 동작하게 하여 각각 새 줄에서 시작하도록 합니다. */
margin-bottom: 5px; /* 이 각 요소 아래에 5픽셀의 공간을 추가하여 아래 요소와 분리합니다. */
}
도시 {
font-weight: bold; /* '도시' 요소 안의 텍스트를 굵게 만듭니다. */
color: blue; /* '도시' 요소의 텍스트 색상을 파란색으로 설정합니다. */
}
온도 {
color: red; /* '온도' 요소의 텍스트 색상을 빨간색으로 설정합니다. */
}
'컴퓨터 잡다학메모' 카테고리의 다른 글
| XML(기초및개념 질문2/3)-서버에 있는 데이터를 가지고 올때도, 데이터베이스에서 해당 데이터만을 가지고 xml의 해당 태그에 데이터를 넣어서 우리에게 보여주는건가요? (1) | 2025.07.22 |
|---|---|
| XML(기초및개념 질문1/3)-xml은 데이터 저장 및 전송이라고 하는데요. 데이터를 어디에 저장하고 전송한다는 건가요? (2) | 2025.07.22 |
| 포그컴퓨팅 및 포그노드에 대해 자세히 쉽게 설명 및 정리 (1) | 2025.07.18 |
| 클라우드 컴퓨팅에서의 게이트웨이 (0) | 2025.07.11 |
| 네트워크 게이트웨이에 대해 질문과 답변 정리(2) (2) | 2025.07.11 |
콘텐츠 내 자동삽입광고