⚡ Web - HTML과 XML

🔹 HTML

__HyperText Markup Language__의 약자로, 웹 페이지를 만들기 위한 표준 마크업 언어

• HyperText: 다른 문서나 웹 페이지로 연결되는 링크 따위의 텍스트
• Markup Language: 문서의 구조를 태그를 이용해 표시하는 언어
• 웹 브라우저에 텍스트, 이미지 등을 표시하기 위함
• 정해진 태그만 사용 가능(<div>, <h1>, <p> 등)
• 의미보다는 화면 표시에 초점

🔹 XML

__eXtensible Markup Language__의 약자로, 확장 가능한 마크업 언어

• eXtensible: 고정된 문서 구조를 따르지 않고, 개발자나 시스템이 자신만의 태그와 구조를 정의할 수 있도록 확장 가능
• 데이터를 저장하고 전달하기 위함
• 사람도 읽을 수 있고, 기계도 읽을 수 있음
• HTML처럼 태그 기반이지만, 의미 중심
• 브라우저가 직접 렌더링하지 않음

💡 비유로 이해하는 HTML vs XML

두 언어의 차이를 가장 쉽게 이해하는 방법은 ‘포장지’와 ‘내용물’로 생각하는 것

• HTML은 “이 글자는 빨간색으로, 이 이미지는 가운데에 배치해줘!”라고 말하며 어떻게 보여줄지를 고민하는 **포장 전문가**
• XML은 “이 데이터는 이름이고, 이건 가격이야.”라고 말하며 이게 무엇인지를 정의하는 데 집중하는 **분류 전문가**

📌 면접용 핵심 가공

1. 목적의 차이

• HTML: 데이터를 브라우저 화면에 시각적으로 표현하는 것이 목적
• XML: 데이터를 효율적으로 저장하고 전송하며, 데이터의 구조를 설명하는 것이 목적

2. 태그의 유연성

• HTML: <p>, <div>처럼 이미 약속된 태그만 사용해야 함. 브라우저가 이 태그를 해석하는 방법을 이미 알고 있기 때문임
• XML: 사용자가 직접 <name>, <price>처럼 태그를 만들 수 있음. 데이터의 성격에 맞게 태그명을 정의할 수 있다는 점이 가장 큰 특징

3. 문법의 엄격함

• HTML: 오타가 나거나 태그를 닫지 않아도 브라우저가 어느 정도 유추해서 보여줌
• XML: 대소문자 구분, 닫는 태그 유무 등을 엄격하게 따짐. 데이터의 무결성이 중요하기 때문임

✅ 한 문장 요약

“HTML은 __데이터를 어떻게 보여줄 것인가__에 집중하는 언어라면, XML은 __데이터가 무엇인가__를 정의하고 전달하는 데 집중하는 언어다.”

🛠 예시

HTML

<h1>아이폰 15</h1>
<p>가격: 1,250,000원</p>

• “아이폰 15를 큰 제목으로 쓰고, 그 아래에 가격 정보를 써라.”

XML

<product>
    <name>아이폰 15</name>
    <price currency="KRW">1250000</price>
</product>

• “이 상품의 이름은 아이폰 15이고, 가격은 한화로 125만 원이다.”