1. HTML의 탄생

- HTML5가 탄생하기 이전까지 HTML의 최초 버전은 1993년에, 최신 버전은 1999년에 발표 됨

- W3C가 XHTML1.0을 구체화 하기 위해 XHTML2.0 작업을 진행 중이었으나 하위 호환상에 치명적인 문제가 있었음

- 2004년 애플, 모질라 재단, 오페라 소프트웨어가 공동으로 설립한 공개 그룹인 WHATWG(Web Hypertext Application Technology Working Group)가 W3C와 별개로 Web Application 1.0과 Web Forms 2.0을 만들어 냄

- 2007년 3월 W3C가 공개적으로 XHTML 2.0의 실패를 인정한 후 새롭게 HTML을 개발하기로 결정하면서 WHATWG의 표준안을 대부분 수용하여 HTML5가 탄생하게 됨

2. HTML5란?

- HTML 문서는 요소(element)와 태그(tag) 그리고 콘텐츠로 구성되어 있으며, 요소는 HTML의 의미를 가진 개념이라고 할 수 있음

- HTML5는 HTML4.01이나 XHTML1.0 문법을 모두 허용하기 때문에 기존에 사용하던 마크업 문법을 그대로 사용할 수 있음. 가령 HTML4.01에서 종료 태그의 생략을 허용했던 방식이나 XHTML1.0에서 빈 요소 선언 시 <요소명 /> 형식으로 기술했던 방식 모두를 허용함. 이는 하위 호환성을 위한 정책으로, 과거 HTML4.01로 제작된 문서가 문법적인 느슨함으로 인해 발생했던 문제가 되풀이될 수 있기 때문에 좀 더 엄격한 규칙을 정하고 마크업 문서를 작성하는 것이 바람직함

1) 태그

- 태그는 시작 태그와 종료 태그로 나눌 수 있으며 "<"와 ">"로 둘러싸여 있음

- 기본 형식은 시작 태그의 경우 <tag>의 형태를 가지며, 종료 태그의 경우에는 </tag> 형태를 가짐

- 시작 태그와 종료 태그 모두를 포함하여 ‘요소(element)’라고 함

- 일부 태그의 경우, 종료 태그를 가지지 않는 경우도 있는데, 이를 ‘빈 요소(empty element)’라고 함

2) 속성

- 시작 태그는 필요에 따라 정해진 속성을 가지며, 사용할 수 있는 속성은 태그마다 다를 수 있음

- 시작 태그 내 여러 속성을 선언할 수도 있는데, 이 경우 속성과 속성은 공백으로 구분하여 지정해야 함

- 속성에는 값을 가지지 않는 논리 속성도 있으며 논리 속성의 경우 XHTML1.0에서는 값을 생략할 수 없기 때문에 속성명을 값으로 지정해야 함

3. HTML의 기본구조

1) Doctype

- HTML4.01이나 XHTML1.0에서는 HTML 문서의 첫줄에 문서형 선언을 기술했으며 이러한 문서형 선언은 해당 HTML 문서의 버전과 문서 타입을 명시했지만, HTML5에서는 문서의 버전 및 문서 타입이 생략된, 간소화된 형식을 가짐. 그 이유는 기존 HTML 문서형 선언의 목적과 달리 모든 웹 브라우저에서 표준 모드(Standards Mode)로 렌더링 될 수 있도록 하는 역할만을 담당하기 때문임

2) Html 요소

문서의 루트 요소로, 모든 HTML 요소는 루트 요소 내에 포함되어야 함

3) Head 요소

문서의 메타데이터 집합 요소로, 문서 제목, 스타일 파일 연결, 자바스크립트 삽입을 위한 요소들을 포함할 수 있음

4) title 요소

문서의 제목으로 텍스트만 포함할 수 있음

5) Body 요소

문서의 본문 요소로, 문서 내에서 한 번만 사용할 수 있음

6) 그 외 자주 사용되는 요소

• <h1> ~ <h6> 요소 : 콘텐츠 블록의 제목을 정의할 때 사용

• <p> 요소 : 단락 콘텐츠를 정의할 때 사용

• <div> 요소 : 콘텐츠 블록의 시맨틱한 의미를 가지고 있지는 않지만, 디자인이나 개발 이슈로 인해 콘텐츠 블록을 그룹화 하고자 할 때 사용

• <link> 요소 : 문서에 외부 문서를 연결할 때 사용

• <script> 요소 : 문서에 자바스크립트 파일을 삽입하거나 자바스크립트 코드를 기술할 때 사용

• <nav> 요소 : 문서의 주요 내비게이션을 정의할 때 사용

• <article> 요소 : RSS 피드로 재배포할 가치가 있는 독립된 콘텐츠를 정의할 때 사용. 이때 반드시 RSS로 재 배포할 것 인지의 여부는 중요하지 않음

• <aside> 요소 : 본문 콘텐츠와 연관성이 적은 콘텐츠를 정의할 때 사용

• <ul> 요소 : 비 순서형 목록을 마크업 할 때 사용

• <ol> 요소 : 순서형 목록을 마크업 할 때 사용

• <li> 요소 : 순서형 또는 비순서형 목록의 목록 항목을 정의할 때 사용

• <figure> 요소 : 이미지, 오디오, 비디오, 표 등을 포함하는 그룹 영역을 의미

• <figcaption> 요소 : <figure> 요소에 포함된 콘텐츠에 대한 캡션을 정의할 때 사용

• <blockquote> 요소 : 인용 콘텐츠 블록을 정의할 때 사용

• <meta> 요소 : 다양한 문서 정보를 나타낼 때 사용

• <style> 요소 : CSS를 문서 내에 직접 기술할 때 사용

4. CSS란?

- 1996년 W3C의 주도하에 첫 번째 CSS 버전인 CSS Level 1이 발표

- 1998년에 CSS Level 2가 등장하면서 대부분의 웹 브라우저들이 CSS Level 2를 지원하기 시작

- 그 후 CSS Level 2의 버그를 수정한 CSS Level 2.1이 2006년에 발표되면서 현재까지 표준으로 사용되고 있음

- CSS Level 3는 CSS Level 2.1과 달리 모든 명세가 포함된 버전이 아닌 모듈 단위로 개발되고 있으며, 표 준화가 모듈 단위로 진행되고 있음. 이 중 몇몇 모듈은 현재 Recomendation(권고안) 단계에 있으며, Working Draft(초안) 단계에 머물러 있는 모듈도 있음

- CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어로, HTML과

목록