HTML과 XML의 차이점은 무엇인가요?


AWS 계정 생성
AWS 기반 무료 개발자 도구 서비스
클라우드에서 개발자 도구 서비스에 대한 무료 오퍼 보기
개발자 도구 서비스 확인
가장 포괄적인 개발자 도구 서비스 세트로 보다 빠르게 혁신
개발자 도구 교육 찾아보기
AWS 전문가가 작성한 콘텐츠로 개발자 도구 교육 시작하기
개발자 도구 블로그 읽기
최신 AWS 개발자 도구 제품 뉴스와 모범 사례에 대한 글 읽기
HTML과 XML의 차이점은 무엇인가요? HTML과 XML의 유사점은 무엇인가요? 주요 구문 차이점: HTML과 XML 기타 주요 차이점: HTML과 XML HTML과 XML을 사용해야 하는 경우 HTML과 XML을 함께 사용하는 방법 주요 차이점 요약: HTML과 XML AWS는 HTML 및 XML 요구 사항을 어떻게 지원하나요?

HTML과 XML의 차이점은 무엇인가요?

HTML과 XML은 애플리케이션 개발과 웹 개발에서 널리 사용되는 두 가지 마크업 언어입니다. 이름은 비슷하지만 사용 사례는 다릅니다. HTML은 주로 애플리케이션의 UI를 개발하는 데 사용됩니다. 웹 사이트 또는 애플리케이션에서 볼 수 있는 텍스트, 이미지, 버튼, 확인란 및 드롭다운 상자를 렌더링합니다. 반면 XML의 주요 목적은 데이터 교환 및 전송입니다. 기계와 사람이 모두 읽을 수 있는 형식으로 데이터를 인코딩합니다. XML은 데이터가 무엇인지 설명하는 반면 HTML은 데이터를 최종 사용자에게 표시하는 방법을 결정합니다.

XML에 대해 읽어보기 »

HTML과 XML의 유사점은 무엇인가요?

XML과 HTML은 LaTeX, SVG, Markdown, SGML과 같은 다른 언어와 함께 마크업 언어라는 프로그래밍 언어 계열에 속합니다.

마크업 언어는 사람과 다른 소프트웨어 프로그램 모두에 데이터를 설명하는 시스템입니다. 데이터의 구조, 유형, 속성, 부품 간의 관계, 표시 및 의미를 정의하는 읽기 쉬운 구문을 사용합니다. 

마크업 언어로서 HTML과 XML은 몇 가지 유사점을 가지고 있습니다.

구문

마크업 언어는 일반적으로 태그와 속성을 비롯한 구문이 비슷합니다.

태그

태그는 대괄호, 쉼표, 마침표와 같은 기호로 표시됩니다. 데이터 요소에 구조와 유형을 제공합니다. 콘텐츠의 각 요소의 시작과 끝을 정의합니다. XML 및 HTML에서 태그는 꺾쇠 괄호로 묶이고 각 요소는 두 개의 여는 태그와 닫는 태그 사이에 있습니다.

속성

속성은 이미지 URL과 같은 요소에 대한 추가 정보를 제공합니다. HTML과 XML에서는 시작 태그 내에 요소의 속성을 정의합니다.

잘 정의된 구조

올바른 처리를 위해 HTML과 XML 문서 모두 지정된 언어의 구문 규칙을 준수해야 합니다. 규칙을 따르는 문서를 잘 구성된 문서라고 합니다. 잘 구성된 문서에는 다음이 필요합니다.

  1. 단일 루트 요소
  2. 모든 요소의 닫기(또는 자동 닫힘) 태그
  3. 다른 태그로 묶인 태그를 사용한 올바른 중첩
  4. 특수 문자에 대한 올바른 설명(예: & 기호에 대한 &)

개발자는 텍스트 편집기 애플리케이션 또는 통합 개발 환경(IDE)을 사용하여 구문을 작성하고 확인합니다.

IDE에 대해 읽어보기 »

사용

개발자는 일반적으로 HTML 또는 XML 마크업 언어를 단독으로 사용하지 않습니다. 이러한 언어는 스크립팅 언어와 결합되어 동적 웹 페이지 및 애플리케이션을 생성합니다. 새로 들어오는 데이터로 인해 동적 애플리케이션이 변경됩니다.

HTML의 경우 애플리케이션 페이지는 새 HTML을 생성하는 스크립팅 언어를 통해 동적입니다. XML의 경우 스크립팅 언어는 새 정보를 사용하여 매개 변수를 업데이트합니다.

플랫폼 독립성

플랫폼 독립성은 언어가 다른 운영 체제 및 플랫폼에서 수정 없이 작동할 수 있는 능력입니다. XML과 HTML은 모두 텍스트 기반이며 간단한 구문을 사용합니다. 따라서 다양한 소프트웨어 애플리케이션 및 운영 체제에서 쉽게 해석할 수 있습니다. XML 및 HTML 코드는 브라우저 및 다양한 모바일 플랫폼에서 그대로 작동합니다.

주요 구문 차이점: HTML과 XML

HTML과 XML의 핵심 차이점은 태그에 있습니다. HTML에는 모든 사람이 사용해야 하는 사전에 정의된 태그가 있습니다. HTML을 작성하는 동안에는 태그를 직접 만들 수 없습니다. 반면 XML은 문서 작성자로서 정의할 수 있는 사용자 지정 태그를 사용합니다.

다음으로 HTML과 XML의 태그가 어떻게 다른지에 대해 자세히 설명합니다.

사전 정의된 태그

HTML에는 사전에 정의된 태그가 있습니다. 즉, 태그 자체가 HTML 표준에 정의된 세트 목록에서 가져온 것입니다. 현재 HTML 표준은 HTML5 입니다. 

사전 정의된 HTML5 태그의 예는 다음과 같습니다.

  • <header>는 문서 헤더의 태그입니다.
  • <p>는 단락의 태그입니다.
  • <h1>~<h6>는 제목의 6가지 레벨의 태그입니다.
  • <a>는 하이퍼링크의 태그입니다.
  • <img>는 이미지의 태그입니다.
  • <div>는 다른 요소를 그룹화하기 위한 컨테이너 요소의 태그입니다.
  • <body>는 메인 콘텐츠를 정의하는 태그입니다.

반대로 XML의 경우 태그는 확장이 가능하므로 문서 목적에 맞게 맞춤 제작됩니다. 문서 작성자는 태그와 속성을 정의합니다. 문자와 숫자의 모든 조합이 될 수 있습니다.

일반적으로 문서 작성자는 데이터를 설명하는 일반 단어를 사용합니다. 문서 검증 및 이해 공유를 위해 태그와 속성을 정의하는 XML 스키마를 작성해야 합니다.

다음 테이블에는 HTML 및 XML 구문의 몇 가지 예가 나와 있습니다.

HTML

XML

<p class="body_paragraph">이것은 단락입니다</p>

class=는 요소에 스타일을 적용하는 데 사용할 수 있는 class 속성인 body_paragraph가 있음을 나타냅니다.

<country language="English">캐나다</country>

country는 국가 요소를 나타냅니다. language는 요소에 English 언어 속성이 있음을 나타냅니다.

<body>

<h1>이것은 제목입니다</h1>

<p class="body_paragraph">이것은 단락입니다</p>

<div>

<h2>이것은 부제목입니다</h2>

<p>이것은 또 다른 단락입니다</p>

</div>

</body>

<continent name="Europe">

<country language="English">

영국

<currency>GBP</currency>

</country>

<country language="German">

독일

<currency>EUR</currency>

</country>

</continent>

자동 닫힘 태그

HTML에서 일부 요소는 콘텐츠 부족으로 인해 닫힘 슬래시로 표시되는 자동 닫힘 태그를 사용할 수 있습니다. 제한된 수의 HTML 태그가 자동 닫힘 태그를 사용할 수 있습니다.

반대로 XML의 자동 닫힘 태그는 콘텐츠가 없는 모든 위치에 존재할 수 있습니다.

HTML

XML

<img src="my_image.jpg" alt="My image" />

<country name="영국" currency="GBP" />

기타 주요 차이점: HTML과 XML

유사성에도 불구하고 XML과 HTML에는 몇 가지 차이점이 있습니다.

목표

HTML은 일반적으로 웹 언어로 알려져 있습니다. HTML의 주요 목적은 텍스트 기반 문서에 제공된 콘텐츠를 브라우저에 그래픽 형식으로 표시하는 것입니다.

반면 XML을 사용하면 다양한 애플리케이션이 보편적으로 이해되는 방식으로 데이터와 그 구조를 교환하고 저장할 수 있습니다. XML의 주요 목적은 데이터베이스와 같은 다양한 유형의 애플리케이션이 동일한 데이터와 그 구조를 이해하고 사용할 수 있도록 하는 것입니다. 

타이핑

HTML은 런타임에 예상 데이터 유형과 비교하여 속성 유형을 확인하는 동적 타이핑을 사용합니다. 예를 들어, 속성이 숫자일 것으로 예상되지만 문자열로 입력되는 경우 런타임에 웹 페이지에 오류가 발생하거나 예기치 않은 동작이 발생할 수 있습니다. 동적 타이핑을 사용하면 새로 들어오는 데이터로 웹 페이지를 변경할 수 있습니다.

반면 XML은 정적 타이핑을 사용합니다. 정적 타이핑은 XML 스키마에서 속성 유형을 미리 정의하고 컴파일하거나 처리하기 전에 확인하는 방식입니다. 정적 타이핑을 하면 오류가 줄어들지만 동적 콘텐츠도 줄어듭니다.

스키마

Document type definitions(DTD) 또는 스키마는 유사한 문서에 대해 유효성을 검사하고 반복할 수 있는 구조를 제공합니다. 일반적으로 다음과 같은 정보가 포함됩니다.

  • 사용 중인 HTML 또는 XML 버전
  • 허용된 요소 및 특성
  • 문서 구조 및 요소 관계에 대한 규칙

HTML에서 DTD는 HTML 문서의 시작 부분에 포함되는 선언입니다.

XML에서 DTD는 별도의 파일입니다. XML 태그는 문서 작성자가 정의하므로 XML에서는 DTD가 더 중요합니다. DTD는 데이터 발신자와 수신자 간의 태그에 대한 이해를 공유하는 데 기여합니다.

HTML과 XML을 사용해야 하는 경우

HTML은 프레젠테이션 언어로 알려진 일종의 마크업입니다. 이름 표시 언어는 표시 목적이기 때문입니다. HTML을 사용하여 웹 페이지와 클라이언트측 웹 애플리케이션을 만들 수 있습니다. 일반적으로 스타일 지정을 위한 Cascading Style Sheets(CSS)와 동적 동작을 위한 JavaScript 프로그래밍 언어와 결합됩니다.

반대로 두 애플리케이션 또는 시스템 간의 데이터 교환에는 XML을 사용합니다. 동일한 형식을 이해하기 위해 애플리케이션에서는 XML 파일의 내용을 정의하는 XML 스키마를 공유했습니다.

XML은 여전히 널리 사용되고 있지만 데이터 교환을 위한 또 다른 경량 마크업 언어인 JSON은 빠른 파싱으로 인해 더 많이 사용되고 있습니다. JSON과 XML의 비교를 읽고 가장 적합한 데이터 교환 형식을 선택할 수 있습니다.

HTML과 XML을 함께 사용하는 방법

XML을 HTML에 임베드하고 JavaScript 프로그래밍 언어로 파싱하여 동적인 웹 페이지를 만들 수 있습니다. 마찬가지로 HTML은 필요한 경우 일반 텍스트용 문자 데이터(CDATA)를 사용하여 XML에 임베드할 수도 있습니다. 다음 예제를 참조하세요.

XML in HTML

HTML in XML

<html>

  <head>

    <title>임베디드 XML 페이지</title>

    <script type="text/xml">

      <data>

        <item>

          <name>사과</name>

          <price>1.00</price>

        </item>

        <item>

          <name>패션프루트</name>

          <price>2.00</price>

        </item>

      </data>

    </script>

  </head>

  <body>

    <h1>과일 가격 변동</h1>

    <div id="output"></div>

    <script>

      var xml = document.querySelector('script[type="text/xml"]').textContent;

      var parser = new DOMParser();

      var doc = parser.parseFromString(xml, "text/xml");

      var output = document.querySelector('#output');

      var items = doc.getElementsByTagName('item');

      for (var i = 0; i < items.length; i++) {

        var item = items[i];

        var name = item.getElementsByTagName('name')[0].textContent;

        var price = item.getElementsByTagName('price')[0].textContent;

        output.innerHTML += '<div><strong>' + name + '</strong>: ' + price + '</div>';

      }

    </script>

  </body>

</html>

<embeddedHTML>

    <title>XML에 임베드된 HTML 코드</title>

    <description><![CDATA[

        <div>

            <h1>임베디드 HTML 헤더</h1>

            <p>임베디드 HTML 단락.</p>

        </div>

    ]]></description>

</embeddedHTML>

Extensible HyperText Markup Language(XHTML)는 구문에서 HTML과 XML을 모두 결합하는 또 다른 마크업 언어입니다.

주요 차이점 요약: HTML과 XML

 

HTML

XML

무엇인가요?

주로 브라우저에서 구조화된 콘텐츠를 표시하는 데 사용되는 마크업 언어입니다.

주로 컴퓨터 시스템 간에 구조화된 데이터를 교환하는 데 사용되는 마크업 언어입니다.

출시 연도

1998년.

1993년.

목적

프레젠테이션 언어.

데이터 교환 언어.

사용 시기

클라이언트측 웹 페이지 또는 웹 앱 구축.

두 시스템 간에 데이터 교환(그러나 JSON이 더 나은 형식인지 확인).

태그

사전 정의된 태그.

확장 가능한 태그.

타이핑

동적.

XML 스키마를 사용할 때 수정됨.

AWS는 HTML 및 XML 요구 사항을 어떻게 지원하나요?

모든 Amazon Web Services(AWS) 데이터 통합 서비스는 XML 파일을 처리할 수 있습니다. 다음은 2가지 예입니다.

  • AWS Glue는 코드를 작성하지 않고도 대화형 포인트 앤 클릭 시각적 인터페이스로 데이터를 준비하는 데 사용할 수 있는 서버리스 데이터 통합 서비스입니다. AWS Glue DataBrew는 XML을 포함한 모든 유형의 파일 형식을 입력할 수 있습니다.
  • Amazon Simple Queue Service(Amazon SQS)는 모든 볼륨의 소프트웨어 구성 요소 간에 메시지를 전송, 저장 및 수신하는 데 사용할 수 있는 완전관리형 메시지 대기열 서비스입니다. Amazon SQS 메시지는 XML, JSON, 서식 없는 데이터 등의 텍스트 데이터를 최대 256KB까지 포함할 수 있습니다.

마찬가지로 AWS는 규모에 맞게 애플리케이션을 개발, 배포 및 운영할 수 있는 광범위한 도구 및 서비스 세트를 제공합니다. 예를 들어, 다음과 같은 두 가지 서비스를 사용할 수 있습니다.

  • AWS Amplify Studio를 사용하면 완벽한 픽셀 UI를 시각적으로 구축할 수 있습니다. 몇 번의 클릭만으로 프런트엔드 UI를 클라우드 백엔드에 연결합니다.
  • Amazon Lightsail을 사용하면 사전 구성된 개발 스택을 사용하여 단 몇 번의 클릭만으로 사용자 지정 애플리케이션 및 웹 사이트를 생성할 수 있습니다.

지금 바로 계정을 생성해 AWS에서 애플리케이션 개발을 시작하세요.

AWS 활용 다음 단계

HTML을 시작하는 방법 알아보기 

XML을 시작하는 방법 알아보기