XML + XSLT HTML 변환 완전 예제
두 개의 파일을 준비하세요:
students.xml:학생 정보를 저장하는 원본 XML 문서transform.xsl:XML을 HTML 페이지로 바꿔주는 XSL 스타일시트
브라우저에서students.xml을 불러오면 XSLT 규칙을 자동으로 참조해 웹페이지로 렌더링합니다.
XML 파일 인코딩이
ISO‑8859‑1(서유럽 문자 집합)으로 선언되어 있으면 영어 외 문자가 정상적으로 저장되지 않아 깨진 글자가 생깁니다. 코드에서 UTF‑8로 통일 수정해야 문자 깨짐 문제를 완전히 해결할 수 있습니다.
students.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<class>
<student>
<name>Tom</name>
<age>12</age>
<height>145</height>
</student>
<student>
<name>Jack</name>
<age>16</age>
<height>175</height>
</student>
<student>
<name>Smiths</name>
<age>22</age>
<height>245</height>
</student>
</class>Code language: HTML, XML (xml)
주요 설명:
<?xml-stylesheet ... ?>처리 지시:브라우저에 transform.xsl을 사용해 현재 XML을 변환하라고 알려줌encoding="UTF-8":모든 언어 문자를 지원하며 문자 깨짐 방지
transform.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Student List</title>
</head>
<body>
<h3>Student Name List</h3>
<ul>
<!-- class/student 노드를 모두 반복 읽기 -->
<xsl:for-each select="class/student">
<li>
<xsl:value-of select="name"/>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>Code language: HTML, XML (xml)
핵심 문법 설명
<xsl:stylesheet>:XSLT 루트 태그, 네임스페이스 선언<xsl:template match="/">:XML 루트 노드와 매치, 변환 진입점<xsl:for-each select="class/student">:각 학생 노드를 순회<xsl:value-of select="name"/>:<name>노드의 텍스트 내용 추출
3、실행 방법
- 두 파일을같은 폴더에 넣기
- 브라우저로
students.xml직접 열기 - XSLT 엔진이 자동 변환을 실행하고 HTML 목록 페이지가 렌더링됨
문자가 깨질 경우
- XML 헤더에
encoding="ISO‑8859‑1"이 적혀있으면 해당 문자 집합은 비영어 문자를 지원하지 않음; - HTML meta 태그 인코딩과 파일 실제 인코딩이 불일치;
- 파일 저장할 때 편집기 인코딩이 UTF‑8이 아님;
전체 학생 정보 보여주기
이름, 나이, 키를 함께 보고 싶다면 반복문 부분을 교체하세요:
<xsl:for-each select="class/student">
<li>
Name: <xsl:value-of select="name"/> ,
Age: <xsl:value-of select="age"/> ,
Height: <xsl:value-of select="height"/>
</li>
</xsl:for-each>Code language: HTML, XML (xml)

XSLT 예제