처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차

처음부터 다시 배우는

HTML5&CSS3
실전 웹 표준 사이트 제작까지

양용석(ugpapa@gmail.com)

처음부터 다시 배우는 HTML5 & CSS3

강의 목차

1. HTML5와 XHTML1.0의 차이점

2. HTML5에서 추가된 태그

3. HTML5에서 사라진 태그


HTML 5와 XHTML 1.0의 차이점

그림에서 볼 수 있듯이 현재 가장 많이 사용하는 버전은 HTML 4.01과
XHTML 1.0입니다.

거의 모든 웹사이트가 현재 이 버전으로 구축되어 있으며, 향후 2~3년은 이
버전이 계속 이용될 것으로 생각됩니다.

하지만 현재 IE9, 사파리, 크롬, 파이어 폭스 등 최신의 모든 브라우저에서
HTML5를 지원하기 때문에, 이전 버전의 HTML에서 HTML5으로의 이전은 세
계적인 추세입니다.


HTML5와 XHTML 1.0의 차이점
대부분의 사이트는 XHTML1.0 규격으로 되어 있어서 여기서는 XHTML1.0
과 HTML5에 대한 차이점을 설명하고자 합니다.

HTML3.2가 널리 보급되면서 웹 개발에 엄청난 가속이 붙기 시작한다. 이에 좀
더 발전된 HTML 기술이 요구됨에 따라 HTML4.0이 출현하게 되었습니다.
웹 표준화를 담당하는 W3C에서는 HTML4.0을 발표한 직후, 더 큰 모듈(Module)
성, 유연성과 성능이 필요하게 되었다. 왜냐하면 초기에 HTML 문서는 단순한 정
보를 사용자에게 보여주는 것을 목적으로 했지, 엄청나게 많은 문서와 각종 미디
어 파일, 그리고 다양한 브라우저에서 사용되리라곤 생각을 하지 못했기 때문입
니다. 이러한 사용자의 요구에 따라 2000년에 나온 언어가 XHTML입니다.

XHTML이란 eXtensible Hypertext Markup Language의 약자입니다.
HTML을 대체하기 위해서 만들어졌지만, W3C에서 만든 HTML4.01의 규약에 거
의 준한 규격을 가진다. 이 말은 XHTML이란 문서가 HTML 문서보다 좀더 명확
하고, 구조적인 특징을 가진다는 것을 의미합니다.


XHTML은 기존 HTML4.0보다 호환성과 확장성 면에서 유리하다.

이 말은 XHTML 문서는 XML 애플리케이션과의 호환성이 좋다는 것을 의미합니
다. XML 애플리케이션이라는 말은 프로그래밍 언어로 작성된 프로그램을 말한다.
이런 프로그래밍 언어는 기계어이다. 기계가 인식하는 것은 단순한 코드만 인식합
니다.
즉 기존 HTML 문서들이 표현을 위해 각종 태그를 이용했다면, 그 표현을 위한 태
그는 기계가 인식하지 못합니다.

우리가 시각적인 표현을 사용한 글꼴 모양, 색상, 레이아웃 등과 관계된 태그들은
HTML 문서 내부에서 배제되어야 한다는 것입니다.

기계는 사람과 달라서 이게(표현을 위한 태그) 왜 필요한지 이해하지 못하기 때문
에, XHTML에서는 이런 호환성을 위해 표현과 구조를 엄격하게 분리하게 된 것입
니다.


이렇게 XHTML이 등장하면서 웹사이트 유지 보수 비용 또한 감소하는 효과를 가
져왔습니다. 웹 문서의 표현과 구조가 분리되었기 때문에 XHTML 이전에 일일이
HTML 문서를 수정했던 것을 CSS 파일만 수정하면 모든 웹 문서에 적용되기 때
문입니다.
XHTML이 이러한 장점을 가지고 있지만, 2000년에 개발된 언어이고, 그 동안 엄
청나게 기술이 발전하고 스마트 폰과 같은 더 다양한 기기(스마트 폰 등)에서다
양한 구성의 웹 페이지를 구현할 필요가 생기게 됩니다.

HTML5는 기존 XHTML에서 HTML 자체에서 처리해주지 못하는 여러 멀티미디
어적인 요소, 기존 XHTML 문서보다 더 구조화된 문서 구조 등, 다양한 기술적
요구가 나오게 되자, W3C가 아닌 다른 단체(WHATWG)에 의해 먼저 HTML5의
규격이 만들어지고 나중에 W3C에서 수용하게 된 것입니다.

특히 HTML5는 애플에서 적극적으로 밀고 있는데, 이것은 현재 어도비의 플래시
기술과 마이크로소프트에서 개발한 실버라이트 그리고 썬의 자바 FX와 같은 비
표준화 기술을 대체하기 위함입니다.


다음은 XHTML1.0과 비교해서 HTML5에서 달라진 점 네 가지

1. 웹 브라우저마다 기존의 HTML을 해석하는 방식의 차이에서 오는 오류와 혼란
을 피하기 위해 구현되는 방식을 단순화하였습니다. 즉 <!DOCTYPE html>이라
는 DOCTYPE을 가지게 되면 모든 브라우저에서 각 요소와 속성이 정확하게 동
작하게끔 처리된다.

2. 새로운 HTML 태그들이 도입됐습니다. 웹사이트의 레이아웃을 담당하는
<header>, <nav>, <footer> 같은 태그를 포함해서 기존에 <div id="header">와
같은 방식으로 처리했던 번거로움을 제거.

3. HTML5에서 가장 편리하게 바뀐 것이 웹 애플리케이션 개발용 요소들이 추가
된 점입니다. 특히 web form에 다양한 속성이 추가.

4. 다음의 표와 같이 XHTML1.0과 HTML5 문서 내부 태그 서술 방식에서 차이점


구 분 XHTML 1.0 HTML5

태그 소문자 대문자, 소문자 가능

태그 닫힘 반드시 필요 옵션

단독 태그 시 닫힘 반드시 필요 옵션

[표] XHTML1.0과 HTML5 문서 내부 코드 적용 차이점

XHTML1.0에서는 모든 태그는 소문자여야 한다.
예를 들어 이미지 삽입의 경우 <img src="..." />와 같이 써야 유효한 태그로 인정받을 수 있지만,
HTML5에서는 <img src="..." > 또는 <IMG SRC="..." > 둘 다 유효한 태그입니다.

태그 닫힘의 경우 XHTML에서는 <li> 태그가 있다면 반드시 </li>로 닫아줘야 한다. 하지만
HTML3.0이나 4.0 버전을 사용해 본 분이라면 <li>만 적용해도 된다는 것을 알 겁니다. HTML5에서
는 다시 반드시 태그를 닫아주지 않아도 동작하게끔 처리된다.

XHTML의 경우에는 <img> 태그와 같이 단독으로 사용하는 태그도 반드시 닫아줘야 한다.
<img src="..." />, <br />와 같이 이렇게 단독으로 사용하는 태그도 반드시 닫아야 했지만 HTML5에
서는 <img src="..." >, <br>와 같이 처리해도 작동한다.


HTML5에서 추가된 태그
HTML5에서 대표적으로 추가된 HTML 태그 중에는 기능적인 요소보다는 화면
레이아웃을 잡을 때 사용하는 태그가 많이 도입되었음.

XHTML1.0에서 페이지 레이아웃을 잡을 때 다음과 같은 방식으로 표현.

<div id="header"> </div>
<div id="nav"> </div>
<div id="content"> </div>
<div id="footer"> </div>

HTML5에서는 아래와 같이 단순하게 표현할 수 있음.
<header> </header>
<nav> </nav>
<article> </article>
<footer> </footer>

이렇게 HTML5의 코드를 사용하게 되면, 훨씬 보기도 편하고 코드 양도 줄어 웹
페이지가 아주 가벼워집니다. -> 웹 문서의 시멘틱(Semantic)화


HTML 태그 속성 브라우저 호환성

<article> 웹 페이지의 본문을 정의할 때 사용됩니다 IE9, FF4, S5, CH11, OP11

Article의 내용을 보충해 주는 역할을 하는 콘텐츠를 넣을 때 사
<aside> IE9, FF4, S5, CH11, OP11
용합니다.

<audio> 오디오를 재생할 때 사용합니다. IE9, FF4, S5, CH11, OP11

그래픽을 보여줄 때 사용합니다. (스크립트 언어를 사용해서
<canvas> IE9, FF4, S5, CH11, OP11
구현됩니다.)

<command> 명령 버튼을 만들 때 사용합니다. IE9, S5

<datalist> 드롭다운 리스트를 만들 때 사용합니다. FF4, OP11

<details> 상세한 내용을 보여줄 때 사용합니다. 현재 지원안함

<embed> 플러그인이나 플래시 요소를 보여줄 때 사용합니다. IE9, FF4, S5, CH11, OP11

<figure> 와 함께 사용되며, <figure>의 캡션을 추가할 때 사용
<figcaption> IE9, FF4, S5, CH11, OP11
됩니다.



<figure> 이미지나 사진, 코드 등을 보여줄 때 사용됩니다. IE9, FF4, S5, CH11, OP11

<footer> 푸터를 정의할 때 사용합니다. IE9, FF4, S5, CH11, OP11

<header> 헤더를 정의할 때 사용합니다. IE9, FF4, S5, CH11, OP11

<hgroup> H1부터 H6 의 그룹을 만들 때 사용됩니다. IE9, FF4, S5, CH11, OP11

폼에서 사용되며, 로컬상에 보안 키를 저장하고 공개키는 서버로
<keygen> FF4, CH11, OP11
보냅니다.

<mark> 텍스트에 마크 펜으로 칠한 효과를 줍니다. IE9, FF4, S5, CH11, OP11

길이를 나타내줍니다. 그래픽적으로 어느 정도 길이인 것을 나타
<meter> CH11, OP11
내 줍니다.

<nav> 메뉴를 정의할 때 사용합니다. IE9, FF4, S5, CH11, OP11

<output> 계산된 결과를 나타낼 때 사용됩니다. CH11, OP11



<progress> 다운로드 같이 몇 %가 남아있는지 표시할 때 사용됩니다. CH11, OP11

<section> 섹션을 정의할 때 사용합니다. IE9, FF4, S5, CH11, OP11

오디오, 또는 비디오 태그와 같이 사용되며, 소스를 나타낼 때 사
<source> IE9, FF4, S5, CH11, OP11
용됩니다.

<summary> Details 태그와 같이 사용되며, 상세한 내용의 요약을 나타냅니다. 현재 지원안함

<time> 문서 내부에 시간을 정의할 때 사용합니다. IE9, FF4, S5, CH11, OP11

<video> 비디오를 재생할 때 사용합니다. IE9, FF4, S5, CH11, OP11

문서의 내용이 길어서 다음 라인으로 표시될 때, 영문인 경우 같은
<wbr> IE9, FF4, S5, CH11, OP11
라인에 문장을 표시해야 하는 경우 사용됩니다.



Input type 의미 Input type 의미

<input type="search"> 검색 <input type="url"> URL

<input type="number"> 숫자 <input type="email"> 이메일

<input type="range"> 범위 <input type="date"> 일

<input type="color"> 색상 <input type="month"> 월

<input type="tel"> 전화번호 <input type="week"> 주

<input type="time"> 시간 <input type="datetime"> 날짜와 시간

<input type="datetime-local"> 현재 있는 곳 날짜와 시간( 글로벌 사이트에서)

HTML5에 추가된 input type


현재 사용하는 브라우저가 위의 input type을 지원하는지는 아래의 url에서 확인
할 수 있습니다.

http://miketaylr.com/code/input-type-attr.html

HTML5의 새로운 input type을 지원하지 않는 IE9 HTML5의 모든 input type을 지원하는 오페라 11


IE9에서 지원하지 않는다고 HTML5의 새로운 input type을 사용할 필요가 없지
않느냐라고 생각할 수도 있지만, IE10부터는 본격적으로 HTML5의 새로 추가된
input type이 적용될 것이라고 생각합니다.
그렇기 때문에 이러한 input type이 있다는 것을 알아야 할 필요가 있습니다.
오페라를 제외한 다른 브라우저에서도 일부 요소는 사용할 수 있지만, 대부분 지
원하지 않습니다.


하지만 브라우저에서 지원하지 않는다고 이런 input type을 사용할 데가 없는 것은 아닙니
다. 특히, 모바일 웹 환경에서 엄청나게 편리하게 사용할 수 있습니다. PC 환경에서는 키
보드라는 입력 도구가 있기 때문에 input type에 따른 차이점을 느끼지 못할 수도 있습니다.
하지만 스마트 폰의 경우에는 키보드 없이 화면을 터치하면 터치 방식의 키보드가 나타나
게 되는데, 이게 작은 화면에 키보드가 보이게 되다 보니 제한된 사이즈의 키보드가 나타
납니다.

HTML5 input type에 따른 아이폰 키보드 변화


이렇듯 HTML5는 PC 환경뿐만 아니라 스마트폰을 포함한 모바일 환경에서도 동
시에 사용 가능한 언어라고 할 수 있습니다.

특히 HTML5는 현 시점에서 모바일용 웹 앱 개발 언어로써 최고의 조건을 갖추
었습니다.

현시점에서 HTML5 태그를 완벽하게 지원하는 브라우저는 없습니다.

HTML5는 현재 진행형입니다. 지속적으로 표준안을 만들기 위해서 노력하는 중
이며, 브라우저 개발 기업도 HTML5의 모든 기능을 담기 위해 빠른 시일 내에 새
로운 버전을 내놓을 것으로 예상됩니다.


HTML5에서 사라진 태그
HTML5에서 사라진 태그는 HTML5 문서에서는 더 이상 사용할 수 없기 때문에 이전
버전의 HTML에서 습관적으로 없어진 태그를 사용했던 개발자는 유의해서 살펴 볼
필요가 있습니다.

frame 태그가 사라졌습니다.
HTML3 버전에서는 상당히 많은 사이트가 frame 태그를 이용해서 만들어지곤 했습
니다. 현재는 사용을 많이 하지 않지만, 몇몇 어드민 페이지 또는 매뉴얼로 제공되
는 웹 페이지에서 현재도 사용되곤 합니다. 하지만 HTML5에서는 더 이상 사용할
수 없습니다. 따라서 frameset, frame, noframes라는 태그도 사용할 수 없습니다.
하지만 iframe은 HTML5에서도 여전히 사용할 수 있습니다. iframe은 항상 논란이
많은 태그 중 하나였습니다. iframe을 사용하게 되면 웹사이트 사용자가 원하지 않
는 스팸 광고를 집어 넣거나, 부정적인 목적으로 스파이웨어를 심어 놓을 수도 있기
때문입니다.
하지만 이런 논란에도 여러 가지 편리성(대표적으로 유튜브의 영상을 블로그나 웹
사이트에 불러 오는 경우 iframe을 사용합니다) 때문에 HTML5에서 iframe은 여전
히 사용할 수 있게 해놓았습니다.


표현을 위해 필요했던 태그들이 대부분 사라졌습니다.
예를 들어 basefont, big, center, font, s, strike, tt, u 등은 글꼴 표현에 많이 사용했던 태그이지만 대부분
CSS로 대체되었습니다. 더 이상 필요성이 없어진 탓인지 HTML5에서 제외되어 이제는 사용할 수 없습
니다. 하지만 <b>와 <i>는 여전히 사용할 수 있습니다.
태그 속성

<acronym> 영문 축약형 사용시 예를 들어 NATO, NASA, GUI 등

<applet> 임베디드 애플릿 사용시

<basefont> 글꼴의 형태를 정의해 줍니다.

<big> 글꼴의 크기 지정

<center> 텍스트 위치 중앙 정렬

<dir> 디렉토리 리스트

<font> 글꼴

<frame> 프레임

<frameset> 프레임 부속 태그

<noframes> 프레임 부속 태그

<strike> 글꼴 효과 ( 글 취소 효과)

<tt> 글꼴 효과 (타자기 효과)

<u> 글꼴 효과 언더라인

<xmp> pre 태그와 동일 효과



HTML5라고 해서 완전히 새롭게 만들어진 언어가 아니라, 기존에 사용되었던
HTML 언어의 연장선에서 디자인적인 요소로 많이 사용되었던 것들은 HTML5
의 태그로 편입시키고, 구조를 위해 불필요하게 html 태그에서 표현을 담당했던
태그들은 퇴출했습니다.

또한 동영상 재생이나 오디오 파일 재생을 위해 따로 웹 브라우저에서 플러그 인
을 설치할 필요 없이 브라우저에서 구현해 주기 때문에 개발자도 웹사이트 개발
시 빠른 시간에 개발할 수 있고, 사용자들 또한 별도의 플러그 인을 설치할 필요
가 없어 시스템에 무리를 주는 일도 없게 되었습니다.

처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차 (20)

처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차