콘텐츠 내 자동삽입광고

광고1

HTML과 XML의 차이점

컴퓨터 잡다학메모
posted by 초코생크림빵 2025. 7. 22. 13:35
반응형

HTML과 XML은 둘 다 데이터를 마크업하는 데 사용되는 언어이지만, 그 목적과 사용 방식에서 중요한 차이점을 가지고 있습니다. 쉽게 예를 들어 설명해 드릴게요.

HTML (HyperText Markup Language): 웹 페이지의 뼈대와 내용

HTML은 웹 페이지를 만들고 그 내용을 구조화하는 데 사용되는 언어입니다. 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을 사용할 수 있습니다.

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 파일을 처리하는 방식 때문입니다.

왜 태그가 그대로 나올까요?

  1. XML은 "데이터"이지 "표시"가 아닙니다: 앞서 설명했듯이 XML의 주 목적은 데이터를 구조화하고 저장하는 것입니다. HTML처럼 "이 태그는 제목이고, 저 태그는 단락이니 이렇게 보여줘!"라고 브라우저에게 지시하는 것이 아닙니다. XML 파일 자체는 그저 순수한 데이터의 집합일 뿐입니다.
  2. 브라우저의 기본 XML 처리 방식: 웹 브라우저는 XML 파일을 열었을 때, 기본적으로 XML의 트리 구조를 보여주려 합니다. 이는 개발자나 사용자에게 XML 파일의 내용과 구조를 쉽게 파악할 수 있도록 돕기 위함입니다. 즉, "이런 데이터 구조를 가지고 있어!"라고 보여주는 것이지, HTML처럼 예쁘게 렌더링하려는 의도가 아닙니다.
  3. 스타일 정보의 부재: XML 파일 자체에는 어떻게 표시되어야 할지에 대한 스타일 정보가 전혀 없습니다. HTML은 CSS(Cascading Style Sheets)와 같은 스타일 정보를 사용하여 태그들을 시각적으로 예쁘게 꾸밀 수 있지만, XML은 기본적으로 그러한 정보를 포함하지 않습니다.

그럼 XML 데이터를 웹 브라우저에서 예쁘게 보려면 어떻게 해야 할까요?

XML 데이터를 웹 브라우저에서 우리가 원하는 형식으로 보려면 다음과 같은 방법들을 사용해야 합니다.

  1. CSS (Cascading Style Sheets)와 연결: XML 파일에 CSS 스타일시트를 연결하여 데이터를 시각적으로 꾸밀 수 있습니다. 하지만 이 방법은 XML 파일이 매우 복잡해지거나, 표시 방식이 자주 변경될 때 비효율적일 수 있습니다.
    XML
     
    <?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<날씨정보>
    <도시>서울</도시>
    <날짜>2025-07-22</날짜>
    <온도 단위="섭씨">25</온도>
    <상태>맑음</상태>
</날씨정보>
    그리고 style.css 파일에 다음과 같이 작성합니다:
  2. CSS
     
    날씨정보 {
    display: block;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
}
도시, 날짜, 온도, 상태 {
    display: block;
    margin-bottom: 5px;
}
도시 {
    font-weight: bold;
    color: blue;
}
온도 {
    color: red;
}
  3. 예시:
  4. XSLT (eXtensible Stylesheet Language Transformations) 사용: XSLT는 XML 문서를 다른 XML 문서, HTML 문서, 또는 일반 텍스트로 변환하는 데 사용되는 언어입니다. XML 데이터를 HTML로 변환하여 웹 브라우저에서 볼 수 있도록 하는 가장 일반적이고 강력한 방법입니다.
    XML
     
    <?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<날씨정보>
    <도시>서울</도시>
    <날짜>2025-07-22</날짜>
    <온도 단위="섭씨">25</온도>
    <상태>맑음</상태>
</날씨정보>
    그리고 transform.xsl 파일에 다음과 같이 작성합니다 (XML 데이터를 HTML 테이블로 변환하는 예시):이렇게 XSLT 파일을 연결하면 브라우저는 XML 데이터를 XSLT 규칙에 따라 HTML로 변환하여 렌더링하므로, 예쁜 HTML 페이지처럼 보이게 됩니다.
  5. 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>
  6. 예시:
  7. 웹 애플리케이션에서 처리: 가장 흔한 방법은 웹 서버(예: Apache, Nginx)에서 동작하는 서버 사이드 스크립트 언어(예: Python, PHP, Java, Node.js)를 사용하여 XML 데이터를 읽어와서 HTML로 동적으로 생성하여 클라이언트(브라우저)에게 전송하는 것입니다.
  8. 이해를 돕기 위해 다시 강조하자면, 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

콘텐츠 내 자동삽입광고

티스토리툴바