Skip to content

HTML.md

Latest commit

 

History

History
201 lines (154 loc) · 5.36 KB

HTML.md

File metadata and controls

201 lines (154 loc) · 5.36 KB
Raw

HTML (HyperText Markup Language)

HTML이란?

HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)의 약자로, 웹 페이지의 구조와 내용을 정의하는 표준 마크업 언어입니다. 웹의 기본 구성 요소로, 모든 웹 페이지의 기반이 됩니다.

HTML의 특징

1. 마크업 언어

  • 프로그래밍 언어가 아닌 마크업 언어
  • 문서의 구조와 의미를 표현
  • 태그(Tag)를 사용하여 콘텐츠를 마크업

2. 하이퍼텍스트

  • 문서 간 연결을 위한 하이퍼링크 지원
  • 웹 페이지들을 연결하여 웹을 구성
  • 인터넷의 핵심 기능

3. 플랫폼 독립성

  • 모든 운영체제와 브라우저에서 동작
  • 표준화된 형식으로 이식성 높음
  • 어디서나 접근 가능

4. 시맨틱 마크업

  • 의미 있는 태그로 구조 표현
  • 검색 엔진 최적화 (SEO) 지원
  • 접근성 향상

5. 확장성

  • CSS와 결합하여 스타일링
  • JavaScript와 결합하여 동적 기능 추가
  • 다양한 미디어 타입 지원

HTML의 활용 분야

웹 페이지 개발

  • 정적 웹사이트
  • 블로그, 포트폴리오
  • 랜딩 페이지

웹 애플리케이션

  • SPA (Single Page Application)의 기반
  • React, Vue, Angular 등 프레임워크와 함께 사용
  • 동적 콘텐츠 표시

이메일 템플릿

  • HTML 이메일 디자인
  • 마케팅 이메일
  • 뉴스레터

문서화

  • API 문서
  • 기술 문서
  • 온라인 매뉴얼

HTML 버전

HTML 4.01

  • 1999년 표준화
  • 전통적인 HTML 구조

XHTML

  • XML 기반의 HTML
  • 엄격한 문법 규칙
  • 현재는 HTML5로 대체

HTML5

  • 2014년 표준화
  • 현대적 웹 표준
  • 시맨틱 태그, 멀티미디어 지원
  • 현재 널리 사용되는 버전

HTML Living Standard

  • WHATWG에서 관리
  • 지속적으로 업데이트되는 표준

학습 경로

기초 단계

  1. HTML 문서 구조
  2. 기본 태그 (제목, 문단, 링크)
  3. 리스트 (ul, ol, li)
  4. 이미지와 미디어
  5. 테이블

중급 단계

  1. 폼 요소 (input, textarea, select)
  2. 시맨틱 태그 (header, nav, article, section)
  3. 메타 태그와 SEO
  4. 접근성 (ARIA 속성)
  5. HTML5 API

고급 단계

  1. 웹 컴포넌트
  2. 템플릿과 슬롯
  3. 마이크로데이터
  4. 성능 최적화
  5. 프레임워크와의 통합

예제 파일 구조

HTML 기초

  • 기초/: 00_setup_intro.md, 01_document_structure.html, 02_headings.html
  • 기본태그/: 03_paragraphs_links.html
  • 리스트와미디어/: 04_lists.html, 05_images_tables.html

HTML 심화

  • 폼과시맨틱/: 06_forms.html, 07_semantic_tags.html
  • 메타와접근성/: 08_meta_seo.html, 09_accessibility.html
  • html5고급/: 10_html5_api.html, 11_template_slot.html, 12_microdata.html

HTML 개발 도구

텍스트 에디터

  • VS Code: 가장 인기 있는 에디터
  • Sublime Text: 가벼운 에디터
  • Atom: GitHub 개발 에디터
  • Notepad++: Windows용 에디터

통합 개발 환경 (IDE)

  • WebStorm: JetBrains의 웹 개발 IDE
  • Visual Studio: Microsoft IDE
  • Brackets: Adobe 개발 에디터

브라우저 개발자 도구

  • Chrome DevTools
  • Firefox Developer Tools
  • Safari Web Inspector
  • Edge DevTools

HTML의 핵심 개념

태그와 요소

  • 태그: <tag> 형식의 마크업
  • 요소: 시작 태그부터 종료 태그까지
  • 속성: 태그에 추가 정보 제공

문서 구조

  • DOCTYPE 선언
  • html, head, body 요소
  • 메타데이터와 콘텐츠 분리

시맨틱 HTML

  • 의미 있는 태그 사용
  • header, nav, main, article, section, footer
  • 검색 엔진과 스크린 리더를 위한 구조

하이퍼링크

  • 문서 간 연결
  • 앵커 태그 (<a>)
  • 상대 경로와 절대 경로

HTML의 장점

  1. 간단함: 배우기 쉬운 문법
  2. 표준화: W3C 표준으로 일관성
  3. 호환성: 모든 브라우저에서 지원
  4. 확장성: CSS, JavaScript와 결합 가능
  5. 접근성: 웹 접근성 표준 준수 가능

HTML의 단점

  1. 정적: 동적 기능은 JavaScript 필요
  2. 스타일링 제한: CSS 없이는 기본 스타일만
  3. 브라우저 차이: 브라우저마다 렌더링 차이
  4. 검증 필요: 문법 오류 검증 필요
  5. 보안: XSS 공격 등 보안 고려 필요

HTML과 다른 기술의 관계

CSS

  • HTML: 구조와 내용
  • CSS: 스타일과 레이아웃
  • 함께 사용하여 완성된 웹 페이지

JavaScript

  • HTML: 정적 구조
  • JavaScript: 동적 기능
  • DOM 조작을 통해 상호작용

XML

  • HTML은 XML의 전신
  • XHTML은 XML 기반 HTML
  • 구조화된 데이터 표현

웹 표준과 접근성

웹 표준

  • W3C (World Wide Web Consortium) 표준
  • WHATWG (Web Hypertext Application Technology Working Group)
  • 크로스 브라우저 호환성

웹 접근성

  • WCAG (Web Content Accessibility Guidelines)
  • 스크린 리더 지원
  • 키보드 네비게이션
  • ARIA (Accessible Rich Internet Applications) 속성

결론

HTML은 웹의 기초가 되는 언어입니다. 모든 웹 페이지는 HTML로 시작하며, 웹 개발의 첫 번째 단계입니다. 간단한 문법이지만, 시맨틱 마크업과 접근성을 고려한 올바른 사용이 중요합니다. CSS와 JavaScript와 함께 사용하여 현대적인 웹 애플리케이션을 구축할 수 있는 핵심 기술입니다.