[멋사 프론트엔드 부트캠프 14기] HTML에 대하여 🔎

마크업과 마크다운

• Markup (마크업)
  → 문서 구조를 설계하는 언어.
  → 예시: HTML
• Markdown (마크다운)
  → 간편하게 문서를 작성할 수 있는 경량 마크업 언어.
  → 예시: README.md

HTML은 마크업 언어이다~!

---

HTML 버전 역사

• HTML 최초 버전: 1993년
• HTML4.01: 1999년 등장
• XHTML1.0: 1999년 등장
• HTML5
  • 2004년: WHATWG( Web Hypertext Application Technology Working Group/애플, 모질라, 오페라) 주도로 개발 시작
  • Microsoft, Google도 합류
  • 2007년: W3C가 XHTML2.0 실패 인정 → HTML5 표준 수용
  • 현재: WHATWG Living Standard로 관리됨

위와 같은 과정을 거쳐서 만들어진 HTML5를 배우게 되었다!

---

HTML5 이전 기술

HTML5 이전에는 풍부한 기능(동영상, 애니메이션 등)을 구현하려면 플러그인에 의존해야 했다.

이를 위해 플래시(Flash), 플렉스(Flex), 실버라이트(Silverlight)와 같은 비표준 기술이 등장했다.

 

위 기술들은 브라우저 외부 프로그램(서드파티)에 기반했으며, 이것을 X Internet 또는 데스크톱 애플리케이션 수준의 UX를 웹에서 제공하는 기술인 RIA (Rich Internet Application)라고 불렀다.

 

그러나 보안 문제, 모바일 부적합, HTML5 등장, 성능 한계 등의 이유로 쇠퇴하였고, RIA의 요구사항은 WebAssembly(WASM), Progressive Web Apps(PWA), SPA 프레임워크(React/Vue) 등으로 계승되었다.

---

HTML5 특징

• 콘텐츠 모델(Content Model)이라는 개념이 도입되어 요소를 의미별로 분류한다.
• 태그 사용 규칙이 더 유연해졌기에 문법 검사가 중요하다.

 

| 문법 검사 방법

• Chrome 익스텐션 Web Developer 설치
  • Tools → Validate HTML 클릭
  • 현재 사이트의 HTML 문법 오류를 검사할 수 있다.

 

 

| HTML5에서 유연하게 허용되는 것 예시

Nesting (중첩)

• HTML 요소를 서로 안에 넣는 것
• 예시:

<p><a>텍스트</a></p> <!-- OK -->

• <p>: Block 요소 / <a>: Inline 요소
• HTML4.01에서는 다음과 같은 중첩이 Syntax Error였다.

<a><p>텍스트</p></a> <!-- 오류 -->

• 하지만 HTML5부터는 유연해져서 허용된다. 

---

기타

• Settings Hide Node Modules
  • node_modules 폴더를 숨겨 프로젝트 구조를 깔끔하게 관리할 수 있음.
• Vendor
  • 웹 브라우저 제조사 (ex. Chrome, Safari, Firefox, Edge)
• 개발 공부 시, 참고하기 아주 좋은 사이트 - HTML Living Standard / Resources for Developers,
  by Developers

 

---

요약

• HTML5는 Living Standard로 계속 업데이트된다.
• Web Developer, HeadingsMap 같은 도구를 활용해 문법과 구조를 항상 점검하자!!