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

처음부터 다시 배우는

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

양용석([email protected])

처음부터 다시 배우는 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 문서보다 좀더 명확하고 , 구조적인 특징을 가진다는 것을 의미합니다 .


HTML5 와 XHTML 1.0 의 차이점XHTML 은 기존 HTML4.0 보다 호환성과 확장성 면에서 유리하다 .

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

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

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


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

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

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


HTML5 와 XHTML 1.0 의 차이점다음은 XHTML1.0 과 비교해서 HTML5 에서 달라진 점 네 가지

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

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

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

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


HTML5 와 XHTML 1.0 의 차이점 구 분 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 에서 페이지 레이아웃을 잡을 때 다음과 같은 방식으로 표현 .

HTML5 에서는 아래와 같이 단순하게 표현할 수 있음 .

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

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

<header> </header><nav> </nav><article> </article><footer> </footer>


HTML5 에서 추가된 태그HTML 태그 속 성 브라우저 호환성

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

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

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

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

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


HTML5 에서 추가된 태그또한 HTML5 에선 input 과 관련된 요소에 많은 내용이 추가되었습니다 . HTML 문서에서 웹 페이지를 이용해 상호 소통하는 곳은 폼 양식을 이용한 게시판이나 트위터 또는 페이스북 같은 공간입니다 . 그런 곳에서는 사용자의 텍스트를 입력 받는 input 타입이 존재하는데 , HTML5 이전에는 input type 이 아래와 같이 10 가지 요소만 있었습니다 .

text | password | checkbox | radio | submit | reset | file | hidden | image | but-ton

HTML5 에서는 더욱 많은 요소가 추가되었습니다 .

하지만 현재 HTML5 에 추가된 input type 을 완벽하게 지원하는 브라우저는 아쉽게도 오페라밖에는 없습니다 .

다음장의 표는 HTML5 에서 추가적으로 지원하는 input type 입니다 .


HTML5 에서 추가된 태그

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


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

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

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


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


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

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


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

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

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

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


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

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


HTML5 에서 사라진 태그표현을 위해 필요했던 태그들이 대부분 사라졌습니다 .예를 들어 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 에서 사라진 태그


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

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

Technology

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