XML을 HTML로 표시

Naila Saad Siddiqui 2023년6월20일
  1. 확장 가능 마크업 언어(XML) 소개
  2. XML 코드를 HTML로 표시
XML을 HTML로 표시

이 문서에서는 XML 코드를 HTML 페이지에 있는 그대로 표시하는 방법을 소개합니다.

확장 가능 마크업 언어(XML) 소개

HTML과 같은 마크업 언어이지만 내장 태그가 없습니다. 대신 사용자의 요구 사항에 따라 사용자가 태그를 만듭니다.

나중에 다른 끝점에서 빠르게 액세스하고 검색하고 공유할 수 있는 구조적 방식으로 데이터를 저장하는 효율적인 방법입니다.

가장 중요한 것은 XML 구문이 표준화되어 있기 때문에 직접 또는 웹을 통해 플랫폼이나 시스템 간에 XML을 공유하거나 전송하더라도 수신자는 여전히 데이터를 구문 분석할 수 있습니다.

HTML과의 차이점

둘 다 태그와 함께 사용되기 때문에 HTML과 다소 비슷하지만 XML에는 사전 정의된 태그가 없다는 차이점이 있습니다. 대신 모든 태그는 사용자의 필요와 요구 사항에 따라 만들어집니다.

이러한 태그에는 한 태그에서 다른 태그로 전송할 적절한 데이터 형식이 있습니다. 또한 HTML은 웹 페이지의 모양에 중점을 두고 향상시키는 데 반해 XML은 누군가에게 보내는 정보나 데이터의 일부일 뿐입니다.

XML 코드를 HTML로 표시

XML도 태그와 함께 작동하기 때문에 XML 코드는 HTML 태그를 조작하여 XML 태그도 조작하므로 HTML 페이지에 있는 그대로 XML 코드를 표시하기가 어렵습니다.

따라서 HTML 페이지에 XML 코드를 표시해야 하는 경우 <xmp> 태그로 묶거나 <textarea>에 작성할 수 있습니다.

두 경우 모두 HTML 페이지를 렌더링하는 동안 XML 태그가 조작되지 않지만 전체 코드가 표시됩니다.

<xmp> 태그를 사용하여 HTML 페이지에 XML 코드 표시

예제 코드:

<h1> Example to display XML code in HTML </h1>
<xmp>
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <article>
        <data>
            <title>Test HTML page</title>
            <author>NSS</author>
            <country>Pakistan</country>
            <year>2022</year>
        </data>
    </article>
</xmp>

위의 HTML 코드는 <xmp> 태그를 사용하고 이 태그에 XML 데이터를 포함합니다. XML 데이터에는 일부 데이터가 포함되어 있습니다. XML의 각 태그는 그 안에 보관된 데이터의 이름입니다.

이제 <xmp>의 효과는 이 XML 코드가 해석 없이 그대로 표시된다는 것입니다. 둘 사이의 차이점을 표시하기 위해 코드에 HTML 태그도 사용했습니다.

그러나 문제는 <xmp> 태그가 이제 HTML 3.2 이후에 더 이상 사용되지 않는다는 것입니다. 따라서 현재 HTML 버전에서 직접 사용하는 것은 권장하지 않습니다.

<textarea> 태그를 사용하여 HTML 페이지에 XML 코드 표시

XML 코드를 표시하는 또 다른 방법은 <textarea>에 포함하는 것입니다. <textarea>도 이와 같은 기능을 합니다. 그것은 그것을 조작하지 않고 있는 그대로의 모든 텍스트를 표시합니다.

<텍스트 영역>의 크기를 설정하기 위해 행과 열의 수를 지정할 수 있습니다. <textarea>를 사용하여 사전 형식화된 스타일로 화면에 XML을 표시하는 아래 예를 살펴보십시오.

예제 코드:

<h1> Example to display XML code in HTML </h1>
<textarea cols="35" rows="20" style="border:none;">
    <?xml version="1.0" encoding="ISO-8859-1"?>
<article>
    <data>
        <title>Test HTML page</title>
        <author>NSS</author>
        <country>Pakistan</country>
        <year>2022</year>
    </data>
</article>
</textarea>

border: none을 적용하여 textarea 상자를 숨기고 표시하지 않습니다. 그것의 출력을 살펴보자.

따라서 HTML 페이지에 태그를 렌더링하지 않고 XML 코드를 그대로 표시해야 하는 경우 이 두 가지 방법 중 하나를 사용할 수 있다고 말할 수 있습니다.