[WebDevCurriculum] HTML/XML

Hyo Kyun Lee·2021년 10월 18일

목록 보기

3/44

개요

어플리케이션을 구성하는 HTML에 대해 이해한다.

Checklist

HTML header
→ <title> 문서제목.
→ <script> 문서세부내용.
→ <meta> 문서정보.
HTML body
→ <head> 웹페이지 제목, 검색엔진영역.
→ <nav> 해당 웹페이지에서 다른 페이지로 이동할 수 있는 링크를 모아둔 영역.
→ <section> 웹페이지 본문영역, 주요 내용들이 보여진다.
→ <article> 웹페이지 본문영역, 부가적인 내용들이 보여진다.
body tag detail
→ <div> division, 내용 등에 따라 본문 구획을 나눈다.
→ <h1> 본문을 나타내는 제목으로, 검색엔진에 노출되기 위해 필수적으로 사용하는 body tag의 일종.
→ <h2> 본문내용을 나타내기 위해 사용하는 tag, 글자크기에 따라 h2~h5 등 여러 종류의 tag 사용가능.
→ <p> 주로 문단, 요약 등 정보기술을 위해 별도의 문단을 확보하기 위한 tag.

기본개념

HTML/XML
→ HTML(Hyper Text Markup Language) : 웹페이지를 구성하는 요소를 구현하고 설명하기 위해 고안된 언어.
→ XML(eXtensible Markup Language) : Markup Language, 즉 text 형식의 언어를 바탕으로 여러 특수한 기능과 목적을 구현하기위해 고안된 언어.
HTML
→ UI 구현, data를 웹 페이지에 보여주기 위한 요소(element)를 구성하는 언어이며, HTML에서 제공하는 문법과 element의 기능 등은 정해져있다.
→ tag('<>')를 이용하여 여러 기능과 웹페이지 구성요소를 구현한다.
XML
→ 데이터 저장 및 전송을 중심으로 이루어진 HTML로, javascript 환경에 맞게 변화한 언어라고 생각하면 이해가 쉽다.
→ React 및 UI구현을 위해 html에 javascript기능을 구현한 문법이 XML이다.
→ tag를 이용한다는 점에서는 유사하지만, data에 저장과 전달에 초점을 맞춘 언어가 XML이다.

참고개념

XML과 HTML은 tag구성이나 전체적인 형식으로 보았을 때는 유사할 수 있으나, 엄연히 design purpose가 다른 문법이다.

HTML은 data의 표현, XML은 data의 교환 및 저장에 중점을 둔 언어이다.

다른 언어를 사용하는 application 사이에서의 공통된 데이터 문법을 제공하기도 하며, 이에 따라 모든 브라우저 환경에서 동작이 가능하다.

반면 html은 웹브라우저 환경에서만 동작이 가능하다.

HTML에서 사용하는 tag는 그 의미가 이미 정해져있고, XML은 사용자가 정의하여 사용할 수 있다.

그렇기에 XML은 사실상 tag의 의미보다는 마치 class를 선언하는 것처럼 사용한다.

with node.js

node.js를 활용하여 어플리케이션과 서버를 구동한다면, 기본적으로 javascript 환경에서 사용하기 때문에 해당 환경과 적합한 특징을 지닌 문법사용이 필요하다.

이 경우 HTML보다는 XML문법을 활용하는 것이 좋다.

특히 React 환경에서 XML문법은 필수적으로 활용되므로, 어느 정도 그 개념을 알고 있어야 어플리케이션 구현이 수월해진다(node.js에서는 특히나 XML 문법을 활용하는 것이 logic 구현에 유리하다).

정리

0. why