치춘짱베리굿나이스
HTML vs XML 본문
HTML과 XML 비교하기
익숙한 HTML과 조금 생소한 (사실 안드로이드 할 때 조금 했었던…) XML을 비교하며 각각의 특성을 알아볼라구 한다
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>하이? 이것은 테스트이다</span>
<div>작은 프론트엔드 개발자들아</div>
</body>
</html>- Hyper Text Markup Language
- 가장 최신 버전은 HTML5이다
- 데이터의 표현에 주 목적을 두고 있다
- 웹 페이지 및 웹 응용 프로그램의 구조를 손쉽게 정의하기 위한 마크업 언어이다
- 어느 데이터가 어느 위치에 들어갈지를 정의했다고 생각하면 쉽다
- 페이지를 표현하기 위해 사전 정의된 태그 세트가 있고, 각 태그별로 의미도 이미 정의되어 있다 (정적)
- 따라서 이미 정의된 태그 내에서만 사용해야 한다
- 브라우저들은 이 태그들을 읽어 해독하고, 이에 맞춰서 페이지를 표현한다
- 간단한 작성 오류 (태그 안 닫은 등) 정도는 눈감아준다
- whitespace를 다 지워버린다
- 대소문자를 구분하지 않는다
- 닫을 필요가 없는 태그도 있다
br,hr등
- 비교적 용량이나 코드 길이가 짧다
- 자바스크립트 코드를 파싱하는 데 추가적인 어플리케이션이 필요치 않다
XML
<head>
<hair>머리카락</hair>
<face>👁👄👁</face>
</head>
<neck />
<body>
<arm>팔</arm>
<arm>팔</arm>
<breast>가슴</breast>
<stomach>배</stomach>
</body>
<leg />
<leg />
- Extensible Markup Language
- 데이터의 전달에 주 목적을 두고 있다
- 플랫폼 독립적이며, 비단 웹이 아니더라도 XML 태그 번역만 가능하다면 어디서든 사용할 수 있다
- 데이터베이스, 프로그램 및 응용프로그램, 모바일 등 정보 교환이 필요한 장치 및 플랫폼간 데이터 전달을 위해 사용한다
- 사용자가 원하는 대로 태그를 정의할 수 있다 (동적)
- 따라서 태그 종류에 제한이 없다
- 미리 정의된 태그도 없다
- 작성 오류를 용납치 않는다
- whitespace를 지우지 않는다
- 대소문자를 구분한다
- 사용된 태그를 모두 닫아주어야 한다
- 비교적 코드 길이가 긴 편이다
- 자바스크립트 코드를 파싱하려면 DOM (Document Object Model) 이 필요하다
공통점
- 마크업 언어이다
- SGML (Standard Generalized Markup Language) 로부터 파생된 마크업 언어이다
- 태그 쌍 (또는 단일 태그 -
self-closing tag) 들로 문서가 구성된다
참고 자료
'ClientSide > html css' 카테고리의 다른 글
| [토막상식] CSS에서 형제 클래스는 우선순위가 동일하다 (0) | 2023.06.16 |
|---|---|
| Semantic하게 HTML 작성해보기 (0) | 2022.12.02 |
| 가상선택자 ::before, ::after (0) | 2022.05.09 |
| CSS 선택자 (0) | 2022.05.09 |
| 미디어 쿼리 (2) | 2022.04.06 |
'ClientSide/html css' Related Articles
more
Comments