Jeongchul Kim
HTML5 - 03 HTML5와 HTML4.01의 차이 본문
HTML5 - 03 HTML5와 HTML4.01의 차이 HTML 4.01 개요 HTML4.01 개요 HTML4.01은 1999년 W3C에서 개정한 HTML표준 문서로 이전 버전의 오류 등을 수정하고 일부는 새로운 기능이 추가되었습니다. 주요 보완된 기능으로는 스타일 시트, 스크립트, 프레임, 테이블 그리고, 폼의 기능 보완 등이 있습니다. HTML4.01이 갖는 특징은 무엇이 있는지 살펴보겠습니다. HTML4.01은 이전 버전에 비해 국제화, 접속성, 스타일시트, 스크립트, 그리고 기타 특징을 선보였는데, 하나씩 차례대로 설명드리겠습니다. 먼저 국제화와 관련된 부분부터 설명 드리겠습니다. HTML은 HTML4.01 시기에 와서야 비로서 국제화를 이루었습니다. 많은 국제화 분야 전문가들의 참여하여 전 세계 언어를 모두 수용할 수 있게 되었고, 문서 검색 엔진, 고급 인쇄술 등의 발달로 효과적인 문서의 색인이 가능해졌습니다. HTML4.01은 또한 접속성의 특징을 갖고 있습니다. 모든 사용자들이 접속하기 쉬운 웹을 만들 수 있게 발전하였고, 다음의 기능들이 가능하게 된 것입니다. 첫째. 개선된 문서의 구조와 표현의 구분이 가능하게 되었습니다. 둘째, 개선된 form기능을 사용할 수 있게 되었습니다. 셋째, 새로운 사용자측의 이미지맵 기능이 추가되어 제작자는 이미자와 텍스트를 결합할 수 있게 되었습니다. 넷째, 이미지에 포함 된 대체 문장을 표시할 수 있게 되었으며, 다섯째, 모든 Element에 title과 lang 애트리뷰를 지원하는 기능이 추가되었습니다. 여섯째, 스타일시트에서 사용하는 폭 넓은 목표 미디어를 지원할 수 있게 되었고, 마지막 일곱번째로 개선된 Table 기능으로 Caption, 컬러그룹, hidden기능을 사용할 수 있게 되었습니다. HTML4.01은 CSS를 지원하여, 웹 디자인을 바꾸는 계기를 제공하였습니다. 스타일시트가 등장하면서 문서 전체의 일관성을 유지할 수 있게 된 건 물론 일일이 스타일을 지정할 필요가 없어졌습니다. HTML작성을 간단히 하고 표현의 신빙성을 향상시켰으며, 제작자와 사용자에게 폰트, 정렬, 색상 등 문서의 표현을 제어할 수 있게 되었습니다. 또한 스타일 정보는 개별 Element나 그룹을 구체적으로 정의할 수 있게 되었고, HTML문서 안이나 외부 스타일 시트에서도 정의할 수 있게 되었습니다. 예를 들면 어떤 브라우저든지 웹 페이지에서 F12키를 누르면, 다음과 같이 스타일시트의 정보를 확인할 수 있습니다. 이 밖에도 HTML4.01은 스크립트 부분에서 기존 버전과 차이가 있습니다. HTML4.01의 스크립트는 웹 페이지의 주요 기능을 담당하는 로직으로서, 이를 사용하여 웹 페이지를 제작할 수 있게 되었으며, HTML문서가 네트워크 상에서 동작할 수 있게 되었습니다. 기타 주요 특징으로는 제작자들이 표의 구조와 배치에 있어 폭의 넓이나, 데이터의 표현 등을 다양하게 제어할 수 있게 되었고, 문서 안에 이미지, 비디오, 사운드, 수식계산 등의 기능을 구현할 수 있게 되었으며, 제작자를 위한 다양한 포맷의 인쇄가 가능해졌습니다. HTML4.01버전에서는 많은 요소들과 속성들을 권장하지 않고 있습니다. 그 이유는 HTML4.01버전으로 바뀌면서 다른 방법으로도 동일한 작업을 할 수 있기 때문이죠. 그럼 HTML4.01에서 권장하지 않은 요소는 어떤 것들이 있는지 자세히 알아보겠습니다. HTML4.01에서 권장하지 않은 요소를 크게 두 가지의 형태로 구분할 수 있는데, 먼저 스타일 시트의 사용으로 인하여 권장되지 않는 요소부터 살펴보겠습니다. 스타일 시트 사용으로 인하여 권장되지 않는 요소로는 기본 폰트를 변경하는 basefont, 가운데 정렬을 나타내는 center, 폰트 변경을 나타내는 font와 텍스트 가운데 선을 그어 삭제표시를 나타내는 strike 또는 s, 그리고 텍스트 하단에 밑줄을 긋는 u가 있습니다. 반면, 대체 요소의 등장으로 권장되지 않는 요소로는 자바 애플릿을 나타내는 applet, 디렉토리 리스트를 나타내는 dir, 입력 프롬프트를 나타내는isindex, 메뉴 리스트를 나타내는 menu가 있는데, 이들은 각각 object, ul, 그리고 input과, ul을 사용합니다. HTML4.01은 문서 작성시 다음과 같은 3가지 원칙을 준수해야 합니다. 첫째 구조와 표현이 분리되어야 합니다. 이는 문서구조와 표현 Element들이 분리되어야 한다는 것을 의미합니다. 두 번째로, 범용 웹 접속성을 고려하여 모든 사람들이 제한 없이 웹에 접근할 수 있어야 설계되어야 합니다. 마지막 세 번째로, 점진적인 표현을 통해 사용도구가 문서를 더 빨리 볼 수 있도록 하기 위한 표현 방법인 주석 등을 사용해야 합니다. HTML4.01의 문서 타입 규칙에 대해 알아보겠습니다. HTML4.01의 문서타입 규칙으로는 모두 7가지가 있는데, 먼저 <html> 엘리먼트 부터 살펴보도록 하겠습니다. <html> 엘리먼트를 사용하기 위해서는 모든 웹 페이지가 DOCTYPE으로 시작해야 하고, 그 다음에 오는 <html>엘리먼트가 웹 페이지의 가장 상위 혹은 루트 엘리먼트가 되어야 하는데, 여기서 사용되는<html> 엘리먼트는 <html>태그로 페이지를 시작해서 </html>태그로 페이지를 끝내야 합니다. 두 번째 규칙은 <head>와 <body>를 반드시 사용해야 한다는 것으로, 오직 <head>와 <body>만이 <html>엘리먼트 안으로 곧바로 들어갈 수 있습니다. 세 번째 규칙은 <head>엘리먼트와 관련된 부분으로, 항상 <head>엘리먼트에는 <title>엘리먼트를 넣어야 합니다. 이외에도 <head>엘리먼트는<meta>엘리먼트와 <style>엘리먼트를 넣을 수 있는 유일한 장소라는 특징이 있습니다. 네 번째 규칙은 <body>엘리먼트와 관련된 내용으로 곧바로 <body>엘리먼트로 넣을 수 있는 것은 오직 <h1>~<h6>와 <p> 엘리먼트와 같은 블록 엘리먼트들 뿐이라는 것입니다. 다섯 번째 규칙은 블록엘리먼트는 인라인 엘리먼트 밖에 두어야 한다는 것입니다. 인라인 엘리먼트 안에는 반드시 인라인 엘리먼트와 텍스트만이 들어올 수 있습니다. 그렇기 때문에 인라인 엘리먼트 안에는 블록 엘리먼트가 들어올 수 없는 것이죠. 여섯 번째 규칙은 리스트는 리스트 항목만 자식으로 포함된다는 것입니다. 따라서 <ol>과 <ul>의 자식으로는 오직 <li> 엘리먼트만 사용될 수 있습니다. 마지막 일곱 번째 규칙은 엘리먼트에는 무엇이든 넣을 수 있다는 것으로, 텍스트, 인라인 엘리먼트, 블록 엘리먼트 등 어떤 타입의 엘리먼트인지 구분없이 무엇이든 넣을 수 있습니다. HTML 문서의 첫 줄이 어떻게 시작하는지 알고 계신가요? 그렇습니다. <Doctype>이라는 문장으로 HTML문서의 시작을 알리는데, 이와 같은DOCTYPE을 DTD라고 합니다. DTD란 Document Type Definition의 약어로 작성된 내용이 HTML 표준에 의거하여 작성되었음을 웹 브라우저에게 알려주는 것을 의미합니다. 그렇다면 모든 문서에 필수적으로 사용해야 하는 것일까요? 그렇지는 않습니다. 선언을 하지 않아도 대부분의 웹 브라우저는 알아서 태그를 해석하여 보여줍니다. DTD는 특별히 웹 브라우저가 자체적인 계산에 의한 것에 의해 보여주는 것은 아닙니다. 다만, W3C에서 제공한 HTML 표준에 따라 보여주도록 권고하고 있을 뿐입니다. HTML4에서는 모두 세 가지의 DTD 모드를 지원하는데, 각 모드별로 하나씩 살펴보겠습니다. 첫 번째는 Strict DTD(엄격모드)입니다. 이 모드는 엄격한 HTML 표준을 따르며, <font>와 같은 사용이 금지된 요소와 <frameset>을 사용할 수 없습니다. 엄격 모드를 적용하기 위한 코딩은 다음과 같습니다. 두 번째는 Transitional DTD(호환모드)입니다. 이 모드는 <font>와 같은 사용이 금지된 요소 등을 사용할 수 있으나 <frameset>을 사용할 수 없습니다. 호환모드를 적용하기 위한 코딩은 다음과 같습니다. 세 번째는 Frameset DTD(프레임셋 모드)입니다. 이 모드는 Transitional DTD(호환모드)와 유사지만, <frameset>을 사용할 수 있습니다. 프레임셋 모드를 적용하기 위한 코딩은 다음과 같습니다. 이외에도 DTD를 사용할 때 주의해야 할 사항들이 있는데, 다음과 같습니다. HTML5와 HTML4.01 차이점 HTML5와 HTML4.01 차이점 HTML5와 HTML4.01의 차이점을 살펴보겠습니다. HTML5와 HTML4.01의 주요차이점으론 Contents Model, Syntax, Language, 그리고 API가 있습니다. 그럼 어떠한 차이인지 하나씩 살펴보겠습니다. 먼저 Contents Model 부터 살펴보도록 하겠습니다. Contents Model이란 HTML문서작성의 큰 구조로써, 어떤 요소가 어떤 콘텐츠 또는 요소를 포함할 수 있는 지에 관한 정의를 말합니다. HTML5 이전의 문서만해도, Block Level Element와 Inline Element로 구분되어지는 태그를 가지고 표현을 하였습니다. 즉 Tree형태의 계층구조를 이루는 문서의 Outline을 구성하고, 그 구조에 따라 Contents에 접근하였죠. 하지만 HTML5문서에서는 Contents Model이라는 개념이 추가되어 문서의 Outline을 잡고 Contents를 구성할 수 있게 되었습니다. 이로 인해 기존의 HTML보다 훨씬 더 시멘틱한 웹 구성이 가능해졌습니다. HTML5에서는 Metadata Content, Flow Content, Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content와 같은 Contents Model이 추가되었습니다. Metadata Content는 나머지 Contents의 Presentation이나 behavior를 설정하거나 현재문서와 다른 문서와의 관계를 설정할 때 사용하고, Flow Contents는 문서와 Application의 Body에서 사용되며, Sectioning Content는 Headings과 Footers의 범위를 정의할 때 사용합니다. 그리고 Heading Content는 Section의 Header를 정의할 때 사용하며, Phrasing Content는 문서의 Text 및 Text를 intra-paragraph level로 Markup 할 때 사용합니다. 또한 Embedded Content는 문서의 다른 Resource를 삽입할 때, Interactive Content는 사용자의 상호작용을 위해 특별하게 의도할 때 각각 사용합니다. HTML5와 HTML4.01의 두 번째 차이점은 바로 Syntax입니다. 이 부분에 대해서는 예제를 통해 설명 드리겠습니다. 예제의 첫 번째 라인을 보시면 <!DOCTYPE html>이라고 인코딩된 부분을 확인하실 수 있는데요, DOCTYPE은 기존 문서와 크게 다른 점이 없지만HTML문서를 작성하는데 있어 가장 기본이 되는 구문으로 화면에 작성된 구문은 HTML문법에 따라 작성된 문서라는 표시를 의미합니다. 이외에도 네 번째 라인의 <meta charset“UTF-8”>이라는 문장은 기존 HTML문서에서 작성하려면 다음과 같이 인코딩을 해야 했지만, HTML5로 진화하면서 인코딩 기법의 간소화는 제작자에게 편의성을 제공하고 있습니다. HTML4.01에서 HTML5로 개정이 되면서 이전의 문서들과는 다르게 새롭게 추가되거나, 변경된 Element 및 attribute들이 나타났습니다. 그럼 이에 대해 새롭게 추가된 Element, 새롭게 추가된 attribute, 그리고 변경된 Element와 attribute로 구분하여 살펴보겠습니다. 먼저 새롭게 추가된 Element 중 Sementic 요소적 Element부터 살펴보겠습니다. HTML5에서는 Sementic 요소 중심으로 새로운 Element가 추가되어 기존의 막연하고 무의미했던 Contents들이 한층 더 유용한 정보로 탈바꿈된 특징을 보입니다. HTML5에서 추가된 Sementic 요소적 Element는 총 9개로서, Header는 문서의 Header를, Footer는 문서의 Footer를 나타낼 때 사용하고, Nav는 Navigation요소가 있을 때 사용합니다. Section은 문서의 영역을 구성할 때, 문서의 구조를 구성하는 H1~H6와 함께 사용하고, Article은 뉴스기사나 블로그같은 독립된 Contents를 표시할 때 사용합니다. Aside는 주요 콘텐츠 이외의 참고될 수 있는 콘텐츠를 구성할 때, Hgroup은 각 Section의 Header를 나타낼 때, Figure는 그림, 비디오를 포함한 콘텐츠의 Caption을 표시할 때 사용하며, Figcaption은 그림 요소의 캡션을 정의할 때 사용됩니다. 다음 그림을 보시면 새롭게 추가된 Element에 대해 한눈에 알아볼 수 있습니다. 그림에서 설명한 부분들이 바로 새롭게 추가 된 Element를 실제 웹 상에서 동작시켰을 때의 화면입니다. 다음으로 sementic적인 요소 이외의 Element를 살펴보겠습니다. Audio, Video는 HTML5 Element 중 가장 관심을 받고 있는 Element 중의 하나로서 멀티미디어 콘텐츠를 표시하는데 사용되고, Embed는 plugin 콘텐츠를 표시할 때 사용되며, Mark는 별도로 표시한 문자를 표시하는데 사용됩니다. 또한 Progress는 작업 진행 상황을 나타낼 때, Meter는 Meter측정값을 표시할 때, Time은 날짜와 시간을 표시할 때 사용되며, Ruby, rt, rp는 Ruby, rt, rp Ruby 언어를 나타낼 때 사용됩니다. 이외에도, Canvas는 Bitmap Graphic을 표시할 때, command는 사용자가 호출할 수 있는 명령어를 표시할 때, Details는 사용자 요청에 따라 얻은 콘트롤이나 추가적인 정보를 표시할 때 사용하고, Datalist는 List Attribute와 함께 사용하여 ComboBox를 만들 때, kegen은 key pair를 생성할 때 각각 사용하며, output은 스크립트의 계산 결과와 같은 실행 결과를 표시하는데 사용합니다. 이번에는 새롭게 추가된 Attribute들에 대해 알아보겠습니다. 먼저 Contenteditable은 편집 가능한 구역을 나타내고, Contextmenu는 작성자가 제작한 Context Menu를 지정하는데 사용되며, data-*는 접두사 “data”를 가진 속성으로 추후 HTML 버전 충돌 없이 사용자 태그로 이용하거나 추후 브라우저가 지원하게 되었을 때 사용합니다. 이외에도 draggable은 새로운 Drag&Drop API에서, hidden은 요소가 아직 또는 더 이상은 관련이 없을 때, role, aria-*는 보조기능을 가리키는데 각각 사용하며, spellcheck는 맞춤법 검사기능을 제공할지의 여부를 지정할 때 사용합니다. 마지막으로 변경된 Element와 Attribute를 살펴보겠습니다. 이중에서는 변경된 Element부터 먼저 살펴보도록 하겠습니다. 변경된 Element는 모두 9개 정도로, Element A는 href속성 없이 사용할 경우 “placeholder link”를 나타내고, address는 sectioning의 새로운 개념으로 범위를 나타냅니다. Element B는 문자열 강조 뿐 만 아니라 제품소개 중 제품명 키워드 같이 특별히 중요하지 않으나 일반적인 강조를 위해 사용하며, hr은 단락 수준의 주제 바꿈에 사용됩니다. i는 기존 기능처럼 문자의 기울임 뿐만 아니라 음성, 분류명, 기술용어, 다른언어의 숙어구, 생각 등을 표현하고, label은 기존 플랫폼 user interface 표준이 아닐 경우 label에서 control로 focus를 이동시켜서 안됩니다. menu는 툴바와 context menu용으로, small은 세부주석과 법적 인쇄물 같은 작은 인쇄를 나타낼 때, strong은 기존 strong의 기능보다 더 중요한 것을 표시할 때 사용합니다. 먼저, img의 border가 부분이 변경되었습니다. Border값은 0일 때만 사용하고, CSS 또한 사용할 수 있게 되었습니다. a의 name은 name속성을 id속성으로 바꾸어 사용할 수 있게 되었고, table의 summary는 다른 대안을 정의하고 있으며, script의 language에서는 language값이 Javascript에만 사용하고, type속성과 함께 쓰지 않고 생략할 수 있도록 변경된 것이 특징입니다. 마지막으로 API에 대해 살펴보겠습니다. API란 Application Programing Interface의 약어로 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말합니다. HTML5버전에서는 새롭게 사용할 수 있는 API 기능이 몇 가지 추가되었는데, 하나씩 살펴보겠습니다. 먼저 Video 및 Audio API 기능이 추가되어, Video 및 Audio Element먼트와 함께 Video와 Audio를 재생할 수 있게 되었으며, Offline Web Application 즉, Offline을 지원하는 API 기능이 추가되었습니다. 또한 Web Application이 특정 프로토콜이나 Media Type을 등록할 수 있는 API와, 편집 API, Drag & Drop API, History 정보를 노출하는 API기능을 사용할 수 있게 되었습니다.1. HTML 4.01 이란?
2. HTML 4.01의 특징
3. HTML 4.01에서 권장하지 않는 기능
4. HTML 4.01 문서 작성의 3가지 원칙
5. HTML 4.01 문서 타입의 규칙
1. Contents Model
2. Syntax (구문)
3. Language (언어)
4. API
'Web프로그래밍' 카테고리의 다른 글
| HTML5 05 시맨틱 태그 - 이미지, 비디오, 오디오 (0) | 2016.04.20 |
|---|---|
| HTML5 04 HTML5 기본 구조 및 문법의 기초 (0) | 2016.04.20 |
| HTML5 02-2 HTML5 기초 - HTML5 표준문서 (0) | 2016.04.19 |
| HTML5 02-1 HTML5 기초 HTML, XHTML (0) | 2016.04.19 |
| HTML5 01-2 HTML5 개요 웹 개발 방법론의 이해 (0) | 2016.04.19 |