국립중앙도서관 출판시도서목록(cip)†이... · 2015-10-01 · html이라는 마크업...

속이 깊은 HTML5 & CSS3 / 김명진 저. -- 파주 :생능출판사, 2014 p. ; cm

ISBN 978-89-7050-812-2 93000 : ￦28000

HTML[HyperText Markup Language]

004.583-KDC5004.678-DDC21 CIP2014014778

국립중앙도서관 출판시도서목록(CIP)

3

P

R

E

F

A

C

E

머리말

웹이 보급된 지 꽤 오랜 시간이 흘렀고, 일상생활에 일부로 완전히 뿌리를 내리

면서 눈을 떠서 잠자리에 들기까지 개인 홈페이지나 블로그 또는 SNS 등에서 많은

시간들을 보낼 정도로 항상 웹과 연결되어 있다. 이러한 웹 사이트를 만드는 것이

HTML이라는 마크업 언어이다. 예전에는 웹사이트 제작 도구나 텍스트 에디터를 사

용하여 HTML 태그를 의식하면서 작성했지만, HTML 버전이 4.01로 완성도가 높아지

면서 이 분야도 더 이상 눈에 띄는 발전이 없는 듯이 보였다. 그러나 기존 HTML의

다양한 기능 구현의 한계와 각 브라우저간의 호환성 및 버전 간의 호환성 문제로

인하여 웹 개발자들은 상당한 시간과 노력이 필요했다. 그러나 HTML5가 등장하면

서 이러한 문제들은 자연스럽게 해결되게 되었다. 이것이 바로 웹 표준의 장점이

라 할 수 있다.

최근에 HTML5가 주목 받는 이유는 엑티브 X(Active-X)를 설치하지 않아도 동일

한 기능을 구현할 수 있고, 특히 플래시(Flash)나 실버라이트(Silverlight), 자

바 FX(JAVA FX) 없이도 웹 브라우저에서 화려한 그래픽 효과 및 음악과 동영상을

자유롭게 감상할 수 있기 때문이다. 뿐만 아니라 산업 전반에 걸쳐 새로운 프레임

워크로 자리잡고 있기 때문이다.

요즘 대기업들과 정부 각 기관들도 일제히 HTML5 기반으로 한 사이트를 다시 구

축하고 있으며, 정부에서도 2017년까지 차세대 웹 표준 HTML5 전문 인력 3천명을

양성하겠다고 발표했다. 따라서 앞으로의 온라인 산업도 HTML5를 기반으로 재편

될 것이라 판단된다.

HTML5는 아직 최종 완성되지 않았지만, 차세대 웹 플랫폼으로 현재 HTML5의 많

은 기능들을 이미 여러 브라우저에서 사용할 수 있고, 브라우저들도 시간이 흐를

수록 빠르게 버전 업이 되고 있는 것을 볼 수 있다. 대학에서 HTML5와 관련 과목들

을 강의하고 있는 입장에서, 학생들의 입장을 고려하여 “어떻게 하면 HTML5를 좀

더 빨리 익숙하게 접근할 수 있을까? 라는 생각에서 접근하기 시작했고 가능하면

표준화 문서를 중심으로 내용을 구성하도록 하였다. 따라서, 이 교재와 함께 표준

화 문서를 함께 살펴보는 것도 좋은 방법이라 할 수 있다.

작성된 내용은 대부분 표준화 문서에 있는 내용들을 중심으로 이루어져 있기 때

4

P

R

E

F

A

C

E

문에 본 교재와 함께 표준화 문서를 함께 본다면, HTML5에 좀 더 쉽게 접근할 수

있으리라 생각된다. 그러나, HTML5의 기술이 워낙 방대한 양을 담고 있기에 본 교

재에서는 학생들에게 가장 우선적으로 필요한 내용들만 다루었다. 또한 내용을 학

습함에 있어서 아직 배우지 않은 내용들이 나올 경우에는 보충 설명을 통해 이해

를 돕도록 하였기 때문에 학습하는데 어려움이 없으리라 생각한다. 다만, 대학 교

재의 페이지 한계상 많은 내용들을 다룰 수 없었기에 추가적인 내용들은 추가적으

로 출간되는 필자의 책들을 참고해 보기를 권한다.

참고로, 표준화 명세서에 기술하고 있는 사용자 에이전트(User Agent)는 줄여

서 UA라고도 말한다. 이는 브라우저뿐만 아니라 소프트웨어에서도 명세서에 있는

HTML5 요소들을 사용할 수 있기 때문에 브라우저란 단어 대신에 사용자 에이전트

라는 용어를 사용하고 있다. 그러나 본 교재에서는 특별히 언급이 없는 한 표준 명

세서의 사용자 에이전트 용어를 웹 브라우저로 지칭하여 사용할 것이다. 그리고,

아직은 표준화가 진행 중이기 때문에(본 교재를 집필하는 순간에도 계속되는 업데

이트), 본 교재에서 언급되어 있는 예제들은 모두 다음과 같은 브라우저에서 테스

트를 하였으며, 구글 크롬 카나리아 개발자 버전을 중심으로(가장 많은 기능을 지

원하고 있기 때문에) 테스트 하였음을 밝혀둔다.

•크롬 버전 38.0.2074.0 canary(64-bit) / 크롬 버전 36.0.1985.18 beta-m

•파이어폭스 Nightly 33.0a1 / 파이어폭스 버전 30

•오페라 개발자 버전 23.0.1522.10

•인터넷 익스플로러 버전 11.0.9600.17126

그리고 본 교재에서 사용된 예제들은 모두 일반 텍스트 편집기를 사용하였기 때

문에 특별한 개발 도구가 필요 없지만, 텍스트 편집의 편리함을 제공해주는 노트

패드(Notepad++)만을 사용하였다. 노트패드는 http://notepad-plus-plus.org

에서 무료로 다운로드 받을 수 있다.

본 교재에서는 표준화 문서 이외에도 다음과 같은 많은 유용한 사이트를 참고하

였다.

•모질라 개발자 사이트 - developer.mozilla.org

•마이크로소프트 개발자 네트워크 - msdn.microsoft.com

•HTML5 ROCKS - html5rocks.com

5

P

R

E

F

A

C

E

•W3schools.com

•Korea HTML5 - www.koreahtml5.kr

•W3C HTML5 KIG(대한민국 관심그룹)

•기타 HTML5 관련 사이트

마지막으로, 본 교재가 출간될 수 있도록 해주신 하나님께 감사를 드립니다. 그

리고 교재의 기획과 아낌없는 조언으로 도와주신 한국방송통신대학교의 이관용

교수님께 깊은 감사를 드립니다. 또한, HTML5에 대한 최신 정보를 비롯하여 유용

한 기능들을 소개하는 W3C HTML5 KIG의 이원석 회장님을 비롯하여 그룹에 참여하

는 모든 분들에게도 감사를 드립니다. 본 교재가 잘 출간될 수 있도록 도와주신 출

판사 김민수 팀장님, 교정을 도와주신 김민보 대리님 이하 모든 분들에게도 감사

의 말씀을 드립니다. 마지막으로, 항상 곁에서 힘든 순간마다 격려해주고 도와준

사랑하는 아내에게 특히 고마움을 전합니다.

(참고로, 필자가 시삽으로 있던, 추억의 넷츠고 너른마당 운영진들은 필자에게

연락바랍니다.)

2014년 7월

저자 김명진

홈페이지(www.booksr.co.kr) 제공자료

•PDF 파일

CHAPTER 1~15 학습정리 및 연습문제

•예제 소스파일

생능출판사 홈페이지 접속 → [도서검색]에서 '도서명' 또는 '저자명'으로 검색 → [보조자료]에서 다운로드

HTML5

6

C

O

N

T

E

N

T

S

차례

HTML5 알아보기CHAPTER 01

Section 01 HTML5 API 및 관련 기술들 16

Section 02 HTML5의 주요 특징 18

Section 03 HTML5 미리 보기(Preview) 22

Section 04 HTML5 표준화 일정 25

Section 05 HTML5를 사용해야 하는 이유 27

Section 06 HTML5 콘텐츠 모델 33

Section 07 HTML5 문서의 기본 구조 36

Section 08 HTML5 요소(Element)의 확장 41

Section 09 HTML5에서 중단된 요소 및 속성 45

HTML5 시작하기CHAPTER 02

Section 01 들어가기에 앞서 50

Section 02 레이아웃을 위한 시맨틱 요소들 512.1 기존 DIV 요소를 이용한 문서의 구조 522.2 시맨틱 요소를 이용한 문서 레이아웃 꾸미기 56

Section 03 그룹핑 콘텐츠 요소들 73

Section 04 텍스트 레벨의 시맨틱 요소들 76

Section 05 상호작용(Interactive) 요소들 85

Section 06 변경된 요소들 93

폼, 드래깅, 텍스트편집CHAPTER 03

Section 01 폼(Form) 96

7

C

O

N

T

E

N

T

S

1.1 폼에 대한 이해 961.2 HTML5에서 추가된 폼 요소들 991.3 HTML5에서 추가된 폼 속성들 1061.4 기존 HTML4에서의 입력 타입 1071.5 HTM5에서 추가된 입력 타입 1081.6 HTML5에서 추가된 Input 요소의 속성 118

Section 02 드래그 앤 드롭(Drag and Drop) 1292.1 드래그 앤 드롭에 대하여 1292.2 드래그 속성 지정하기 1312.3 드래그 데이터 저장소(Drag Data Store) 1322.4 데이터전송(DataTransfer) 객체 1332.5 드래그 이벤트 처리하기 135

Section 03 텍스트 편집하기 1403.1 텍스트 편집 속성 1413.2 편집 API 사용 – 텍스트 편집하기 144

CSS3 Part-1 기본 및 선택자CHAPTER 04

Section 01 CSS3 사용하기 150

Section 02 선택자 이해하기 1612.1 기본적인 내용 이해 1612.2 단순 선택자(Simple Selector) 164

Section 03 가상 선택자 1763.1 가상 클래스(Pseudo-classes) 1793.2 가상 요소(Pseudo-elements) 196

Section 04 조합자 201

Section 05 선택자의 우선 순위 211

CSS3 Part-2 색상 및 글꼴 CHAPTER 05

Section 01 색상 이해하기 2141.1 색상 지정하기 2151.2 그라데이션 색상 지정 222

Section 02 글꼴 스타일 2332.1 기본 글꼴 스타일 233

8

C

O

N

T

E

N

T

S

2.2 글꼴 스타일 확장 2482.3 글꼴 기능 확장 262

CSS3 Part-3 텍스트 조작 및 장식CHAPTER 06

Section 01 쓰기 모드 – CSS Writing Mode Level 3 2741.1 쓰기 모드 이해하기 2741.2 가로 방향의 텍스트 2761.3 세로 방향의 텍스트 2811.4 인라인-레벨(Inline-level) 맞춤 2841.5 추상적인 박스 용어(Abstract Box Terminology) 286

Section 02 텍스트 조작하기 2932.1 텍스트 변환 및 공백 처리 2942.2 단어 및 줄 바꿈 처리 2982.3 텍스트 맞춤 처리하기 3022.4 글자 및 단어 사이의 공백 처리하기 3072.5 텍스트 가장자리 효과 지정하기 311

Section 03 텍스트 장식하기 – CSS Text Decoration Module Level 3 3143.1 텍스트 라인 장식(밑줄, 윗줄, 그리고 취소선) 3143.2 텍스트 강조하기 3203.3 텍스트 그림자 효과 지정하기 324

CSS3 Part-4 기본 레이아웃CHAPTER 07

Section 01 CSS 박스 모델 3281.1 CSS 박스 모델의 기초 3291.2 박스의 종류의 지정하기 (display 속성) 3321.3 박스의 외부 여백 지정하기 3331.4 박스의 내부 여백 지정하기 3351.5 박스의 크기(폭과 높이) 지정하기 3381.6 특정 요소의 크기 지정하기 3391.7 플로팅 박스(floating boxes) 3401.8 콘텐츠 넘침(Overflow) 제어하기 3461.9 만들어진 박스의 화면 표시 여부 지정하기 3481.10 박스 회전하기 349

Section 02 레이아웃 위치 지정하기 3502.1 박스 배치 방식 지정하기 351

9

C

O

N

T

E

N

T

S

2.2 박스 위치 지정하기 3522.3 논리적인 박스 위치 지정하기 3542.4 계층으로 된 표현 355

Section 03 배경 및 테두리 지정하기 3563.1 배경(Background) 지정하기 3563.2 테두리(Borders) 지정하기 3683.3 박스 모서리(Corners) 모양 지정하기 3723.4 박스 테두리를 이미지로 지정하기 3743.5 박스의 그림자 스타일 지정하기 381

CSS3 Part-5 고급 레이아웃CHAPTER 08

Section 01 유연한 박스 레이아웃(Flexible Box Layout) 3841.1 유연한 박스 모델과 용어 3841.2 유연한 컨테이너 3861.3 유연한 박스의 순서 및 방향 3871.4 유연성 3911.5 정렬 지정하기 3941.6 유연한 박스의 교차 축 지정하기 397

Section 02 그리드 레이아웃(Grid Layout) 3992.1 그리드 레이아웃 배경 4002.2 그리드 레이아웃 개념 및 용어 4032.3 그리드 컨테이너 및 항목 4062.4 그리드 레이아웃 만들기 4072.5 그리드 항목 배치하기 4172.6 그리드 정렬하기 4232.7 그리드 항목의 겹침 우선 순서 425

Section 03 사용자 인터페이스(User Interface) 4263.1 요소 아이콘(Element Icons) 4263.2 추가적인 박스 모델 4283.3 박스의 윤곽선 지정하기 4293.4 박스 크기 재조정(Resizing) 및 넘침(Overflow) 4333.5 포인팅 디바이스와 키보드 436

CSS3 Part-6 고급기능 다단, 변형, 트랜지션, 마키, 애니메이션CHAPTER 09

Section 01 다단 레이아웃(Multi-column Layout) 444

10

C

O

N

T

E

N

T

S

1.1 다단 문서의 개수 및 폭 지정하기 4441.2 열의 간격 및 구분선 스타일 지정하기 4461.3 다단 나누기 지정 4491.4 단의 확장 4501.5 단의 콘텐츠 균형 조정하기 451

Section 02 변형(Transform) 4522.1 좌표 시스템 4532.2 변형 함수 4532.3 변형 기준 및 원근감 459

Section 03 트랜지션(Transition) 4663.1 트랜지션 속성 지정하기 4673.2 트랜지션 시간 지정하기 4683.3 트랜지션 지정하기 471

Section 04 콘텐츠 움직임 지정 - 마키(Marquee) 4734.1 마키 스크롤 방법 지정하기 4734.2 마키 스타일 지정하기 4744.3 마키 특성 지정하기 476

Section 05 애니메이션(Animation) 4785.1 애니메이션 효과 적용 시점 4785.2 애니메이션 속성 480

Section 06 미디어 쿼리(Media Query) 4866.1 미디어 쿼리 사용의 배경 4866.2 미디어 쿼리의 사용 4876.3 미디어 쿼리의 문법 및 조건 4886.4 미디어 기능(Media Features) 489

캔버스 Part-1 캔버스 구성 및 기본 드로잉CHAPTER 10

Section 01 캔버스(Canvas) 기본 내요 5001.1 캔버스 요소의 좌표 시스템과 크기 지정하기 5011.2 캔버스 컨텍스트 5041.3 캔버스 상태 저장 및 복원 5051.4 드로잉 모델 5071.5 드로잉 기본 작업 508

Section 02 사각형 그리기 510

Section 03 선 그리기 513

11

C

O

N

T

E

N

T

S

3.1 패스와 서브 패스 5133.2 선 그리기 5163.3 선의 경계와 픽셀 경계 5183.4 다각형 그리기 5193.5 점선 그리기 5233.6 선 스타일 지정하기 527

캔버스 Part-2 드로잉 확장CHAPTER 11

Section 01 원 그리기 5341.1 원/원호 그리기 - arc() 메서드 5341.2 직선과 연결된 원호 그리기 - arcTo() 메서드 538

Section 02 베지에 곡선(Bezier Curve) 5432.1 2차 베지에 곡선 5442.2 3차(다항) 베지에 곡선 546

Section 03 스타일 지정하기 5503.1 채우기 스타일(Fill Style) 지정 5503.2 와인딩 규칙(Winding Rule) 5533.3 그라데이션(Gradient) 스타일 지정 5583.4 패턴(Pattern) 스타일 지정 5653.5 그림자 스타일 지정 568

캔버스 Part-3 드로잉 응용CHAPTER 12

Section 01 도형 합성 및 변환 5721.1 도형 합성하기 5721.2 도형 변환하기 576

Section 02 텍스트 그리기 5882.1 텍스트 테두리 및 채우기 5892.2 글꼴 설정 및 텍스트 배치하기 591

Section 03 이미지 처리하기 5963.1 이미지 그리기 5963.2 이미지 조작하기 6033.3 클리핑 610

Section 04 애니메이션 6134.1 기존 방법의 문제 613

12

C

O

N

T

E

N

T

S

4.2 스크립트 기반 애니메이션용 타이밍 컨트롤 6154.3 예제 응용하기 617

Section 05 히트 영역(Hit Regions) 620

오디오와 비디오 CHAPTER 13

Section 01 미디어 요소 6261.1 미디어 요소의 인터페이스 6271.2 미디어 컨트롤러(MediaController) 6301.3 텍스트 트랙(TextTrack) 6331.4 여러 미디어 트랙이 있는 미디어 자원 6381.5 재생 시간 범위 및 이벤트 641

Section 02 오디오 6432.1 오디오 요소 - audio 6432.3 다양한 포맷 지정 - source 요소 6462.3 오디오 제어하기 650

Section 03 비디오 6553.1 비디오 요소 - video 6553.2 비디오 제어하기 6583.2 자막처리 – 트랙(track) 요소 662

HTML API 1 - 오프라인 웹, 파일접근, 웹 스토리지CHAPTER 14

Section 01 오프라인 웹 애플리케이션 6701.1 소개 6701.2 매니페스트 파일 6731.3 이벤트 처리 676

Section 02 파일 API 6792.1 블롭(Blob) 인터페이스 6802.2 파일(File) 인터페이스 6822.3 파일 리더(File Reader) 인터페이스 6842.4 URL 인터페이스 687

Section 03 웹 스토리지 6893.1 웹 스토리지 개요 6903.2 웹 스토리지 인터페이스 691

13

C

O

N

T

E

N

T

S

3.3 세션 및 로컬 스토리지 6923.4 스토리지 이벤트 695

HTML API 2 - 웹 워커, 웹 소켓, 위치 정보CHAPTER 15

Section 01 웹 워커 7021.1 웹 워커 소개 7031.2 전용 워커(Dedicated Worker) 7041.3 공유 워커(Shared Worker) 7081.4 워커의 전역 범위 7111.5 워커에서 사용 가능한 API 713

Section 02 웹 소켓 7152.1 기존 방식의 문제점 7152.2 웹 소켓의 개념 7172.3 웹 소켓 API 718

Section 03 위치 정보를 위한 Geolocation 7243.1 위치 정보의 기초 7253.2 Geolocation API 사용 7273.3 구글 지도 활용하기 – Google Maps API v3 732

● 찾아보기 737

01HTML5 알아보기

CHAPTER

HTML5

HTML 4.01이 발표된 이후에 무려 10여 년 만에 새로운 HTML5 버전이 표준화로 돌아왔다.

이번 장에서는 HTML5의 특징에 대하여 간략히 살펴보도록 한다.

학습 목표

HTML5 API, HTML5 관련 기술, HTML5 주요 특징, 웹 표준, HTML5 표준화 일정, HTML 콘

텐츠 모델, HTML5 문서 기본 구조

Key Point

01 HTML5 API 및 관련 기술들 02 HTML5의 주요 특징 03 HTML5 미리 보기

04 HTML5 표준화 일정 05 HTML5를 사용해야 하는 이유

06 HTML5 콘텐츠 모델 07 HTML5 문서의 기본 구조

08 HTML5의 요소(Element) 확장 09 HTML5에서 중단된 요소 및 속성

Section

16

CHAPTER

HTML5 알아보기01HTML5

HTML5는 차세대 웹 표준으로 W3C(World Wide Web Consortium)에서 웹 표

준화를 위해서 진행중인 HTML의 새로운 사양으로, WHATWG(Web Hypertext

Application Technology Working Group)에서 웹 애플리케이션 1.0이라

는 이름으로 세부 명세 작업을 시작하여 현재에도 개발 중에 있다. 최근에

HTML5가 주목 받는 이유는 엑티브X(Active-X)를 설치하지 않아도 동일한 기

능을 구현할 수 있고, 특히 플래시(Flash)나 실버라이트(Silverlight), 자바 FX(JAVA FX) 없

이도 웹 브라우저에서 화려한 그래픽 효과 및 음악과 동영상을 자유롭게 감상할 수 있기 때문이

다. 뿐만 아니라 산업 전반에 걸쳐 새로운 프레임워크로 자리잡고 있기 때문이다. HTML5는 기

존 HTML 4.01과 XHTML 1.0, 그리고 DOM(Document Object Model) Level 2에서 CSS3(Cascading

Style Sheets 3)와 강화된 JavaScript API(Application Programming Interface)를 포함한

것을 말하며, 특정 클라이언트 소프트웨어(안드로이드 또는 애플의 앱(APP)과 같은 소프트웨

어를 네이티브(Native) 소프트웨어라 한다.)에서만 구현할 수 있었던 최신 멀티미디어 뿐만 아

니라 고기능의 애플리케이션을 웹 브라우저에서 쉽고 용이하게 볼 수 있게 하는데 목적을 두고

2014년(12월 예정) 기술표준으로 공식 발표할 예정이다. 이에 따라 애플(Apple), 마이크로소프

트(MS), 구글(Google), 페이스북(Facebook) 등의 글로벌 IT 기업들이 HTML5 시대의 주도권을

잡기 위해 치열한 경쟁을 하고 있다.

HTML5 API 및 관련 기술들Section 01

HTML5 기술은 현재 표준화가 진행되고 있는 기본 기술을 포함하여 다양한 관련 기술들이 다음

그림과 같이 논의되고 있다. 그림에서 보듯이, 일반적으로 표준화에서 논의되고 있는 기술들은

정해져 있지만, 이를 지원하기 위한 관련 기술들을 모두 포함하여 HTML5 기술들이라 할 수 있다.

17

CHAPTER


그림출처: 위키피디아

▣ 추가된 API

HTML5에 새롭게 추가된 API들을 살펴보면 다음과 같다.

•2차원 그래픽을 위한 Canvas 요소의 API

•미디어의 재생을 위한 API

•오프라인(Offline) 웹 애플리케이션을 위한 API

•드래그-앤-드롭(Drag-and-drop)을 위한 API

•웹 스토리지(Web Storage)를 위한 API

•인덱스 데이터베이스를 위한 API

•위치 정보(Geo-Location)를 위한 API

•파일 업로드와 관리 기능을 위한 API

•양방향 통신을 위한 웹 소켓(WebSocket)을 위한 API

18

속이 깊은 HTML5 & CSS3

HTML5의 주요 특징Section 02

기존 HTML의 다양한 기능 구현의 한계와 각 브라우저간의 호환성 및 버전 간의 호환성 문제로

인하여 웹 개발자들은 상당한 시간과 노력이 필요했지만, HTML5로 인하여 이러한 문제들은 자연

스럽게 해결되게 되었다. 이것이 바로 웹 표준의 장점이라 할 수 있다. 그러나 HTML5에 대한 내

용은 너무 방대하기 때문에 모두 살펴보지 못하고, 다음과 같은 특징들을 간략하게 살펴보고 이

후 2장부터 각 기능들에 대한 내용들을 좀 더 자세히 알아볼 것이다. 이에 대한 자세한 내용들은

http://www.w3.org/html/wg/drafts/html/CR/에서 확인이 가능하다.

▣ 웹 애플리케이션 개발을 위한 플랫폼

HTML5의 가장 큰 특징은 플래시나 실버라이트 같은 플러그-인(Plug-in)이 없이도 웹 문서뿐

만 아니라 웹 애플리케이션도 만들 수 있는 플랫폼이라는 것이다. HTML5에서는 이를 지원하는

다양한 API들을 제공하고 있으며, 주요 기능들을 살펴보면 다음과 같다.

웹 폼

(Web Form)

웹 양식을 지원하는 폼 태그로써, 달력 양식, 범위(Range) 양식, 그리고 Email 등의 새롭고 실용

적인 양식이 추가되어 입력 보조 수단이나 입력 값의 검증 등에도 활용이 가능(기존에는 스크립

트를 사용하여 구현할 수 밖에 없었던 기능적 요소)하다.

비디오(Video) 오디오(Audio)

비디오 또는 영화를 보여주기 위해 새롭게 추가된 <video> 태그와 사운드나 오디오 스트림을

표현하기 위해 추가된 <audio> 태그는 플러그-인을 이용하지 않고도 미디어를 웹 문서에 추가

할 수 있으며, HTML5를 지원하지 않는 웹 브라우저의 경우에도 기존 플래시 등과 같은 플러그-인을 이용하여 미디어 재생이 가능하게 하고 있다(코드 혼용 가능). 이러한 미디어들의 상황별

다양한 이벤트들을 이용하여 자바스크립트를 통해 직접 미디어를 제어할 수 있다. 그러나 미디

어 요소들의 명세는 라이센스 문제로 인하여 아직도 진행 중이며 여전히 코덱(MPEG4, VP8, WebM, H.264 등), 스트리밍(Streaming) 등에 대한 다양한 이슈들이 존재한다.

캔버스

(Canvas)

웹에서 즉시모드(Immediate mode)로 2차원 그래픽을 그리기 위한 API를 지원하여 선, 도형, 텍

스트, 이미지와 같은 그래픽을 표현할 수 있고 색상, 그림자, 패턴과 같은 효과도 적용이 가능하

다. 또한 캔버스 내 각종 객체를 회전, 변환, 그라데이션 및 이미지 생성 등의 각종 효과를 줄 수

있으며, 이미지 처리, 비디오 프레임 단위 추출, 동적 캔버스 이미지 추출 및 픽셀 단위의 제어를

할 수 있도록 기능을 지원하고 있어 HTML5의 기능 중에서 가장 많이 활용되고 있는 특징이다.

SVG(Scalable Vector

Graphic)

XML 기반의 2차원 벡터 그래픽을 표현하기 위한 언어로써(일부 래스터 그래픽 기능도 가능), 실질적이고 유연한 그래픽 포맷을 XML로 구현한다는 목표로 만들어졌다. 중첩된 변형, 클리핑 경

로, 알파 마스크, 래스터 필터 효과, 애니메이션, 줌 및 플래닝 뷰, 다양한 그래픽 명령어, 그룹핑,

스크립팅 등을 지원한다.

위치정보

(Geolocation)

디바이스의 지리적 위치 정보를 제공하는 API로써 구글의 Geolocation API라는 표준으로 정의

되어 있으며 모바일 환경에서 가장 많이 사용되는 API이다. 모바일 브라우저의 구현에 따라 IP Address, Wifi/Bluetooth MAC Address, GSM/CDMA의 셀-타워(Cell-tower) 정보 등으로부터

위치 정보를 제공한다.

19

CHAPTER


오프라인 웹 응용

(Offline Web Application)

인터넷 연결이 지원되지 않는 경우에도 웹 응용프로그램이 정상적으로 수행될 수 있도록 주요

구성요소인 HTML, JavaScript, CSS 등의 문서파일들과 각종 이미지 파일들을 브라우저의 임시

영역에 캐시(Cache)로 저장하고 브라우저가 새로 고침(Refresh) 되더라도 웹 응용프로그램이

로딩하도록 지원된다. 응용프로그램에 대한 캐싱과 데이터에 대한 캐싱으로 구성되어 있으며 현

재 각 도메인당 5M의 캐시 크기가 설정되어 있다(브라우저의 구현에 따라 다르고, 현재로서는 표

준의 크기가 제한되어 있지 않음).

웹 데이터베이스

(Web Database)

웹 브라우저에 데이터베이스 엔진을 이용하여 자바스크립트로 사용하는 기술로 웹 SQL 데이터베

이스와 인덱스 데이터베이스 기술(W3C 표준)이 존재하였지만, 웹 SQL 데이터베이스는 SQL과의

표준 문제로 HTML 표준 명세서에서 하차(deprecated)가 결정되어 현재는 W3C Note Track으로

만 남아있다.

로컬 저장소

(Local Storage)

기존의 쿠키(Cookie)의 단점(웹 브라우저의 최대 저장 크기가 4KB로 제한되어 있고 유효 기간

이 있으며, Request 호출시마다 헤더에 전송되므로 많은 양의 값들을 저장할 경우 웹 서버의 응

답시간에 영향을 줌)을 극복하기 위한 목적으로 개발된 기능이다. 웹 클라이언트에서 키와 값이

쌍으로 구성된 데이터가 영구적으로 저장되기 때문에 웹 브라우저 창을 닫아도 다른 모든 웹 브

라우저간에 데이터가 공유된다.

웹 소켓

(Web Socket)

웹 응용프로그램이 서버 측의 프로세스와 직접적인 양방향 통신을 위한 API로써, 비접속지향

(Connectless)인 HTML을 이용한 웹 응용프로그램 개발의 제약을 극복하기 위해서 도입한 기술

이다. 서버와 웹 브라우저가 지속적으로 연결된 TCP 라인을 통한 실시간 데이터 통신을 함으로써

HTTP 헤더에 불필요한 데이터가 줄어들어 데이터 통신 크기와 응답시간이 향상된다.

웹 워커

(Web Worker)

웹 응용을 위한 쓰레드(Thread) 기능에 대한 API로써, 싱글-쓰레드로 동작하는 자바스크립트의

코드 개발에 대한 제약을 극복하기 위한 방법으로 멀티-쓰레드의 개념을 도입한 기술이다. 다음

과 같은 특징이 있다.

•XmlHttpRequest 객체를 이용한 I/O 작업 가능

•생성된 쓰레드에서 다른 쓰레드를 생성하는 sub-workers 생성 가능

•전역(Global) 함수(Function)에 접근이 가능

•타임-아웃(Timeout)과 인터벌(Interval) 사용 가능

•다른 스크립트의 로딩이 가능: importScripts() 이용

•쓰레드를 생성한 생성자를 통해서만 메시지(Message) 통신이 가능

▣ 시맨틱 웹(Semantic Web)

기존 HTML로 작성된 문서의 내용을 웹 브라우저가 이해하는 것은 쉬운 일이 아니지만, 데이터

의 의미를 분명히 하고 그 의미를 웹 브라우저에서 활용할 수 있도록 하자는 목적으로 만들어진

것이 바로 "시맨틱 웹(Semantic Web)"이라고 한다. 이는 기존 HTML 문서에서의 표현은 태그를

사용하여 구조를 정의하였기 때문에 단순한 문서 표현에 불과하였다. 따라서 이러한 문서의 표

현 방식은 빅데이터를 중심으로 하는 검색 엔진이나 문서 해석기가 이를 판별하고 해석하는 데

는 문제가 될 수 있어, 자료 분석에 어려움이 따를 수밖에 없다. 따라서 W3C에서는 대표적인 의

미가 있는 구조를 가지고 있는 XHTML을 개발 및 발표하였고, 이를 HTML5가 이어받게 된 것이다.

20


현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-

의미 정보(Semanteme)를 컴퓨터가 처리할 수 있는 온톨로지형태로 표현하고, 이를 자동화된 컴퓨터가 처리하

도록 하는 프레임워크이자 기술(웹의 창시자 팀 버너스리, 1998년)

- http://ko.wikipedia.org/wiki/시맨틱_웹

▣ 웹 표준화(Web Standards)

우리가 지금까지 웹 사이트를 제작할 때 웹 표준이 없었기 때문에 여러 기술들을 사용해서 남

들에게 멋있고 화려하게 보이도록 제작을 하면서 회사의 이미지 제고에 많은 공을 들인 것이 사

실이다. 그렇게 제작된 웹 사이트가 여러 웹 브라우저에 정상적으로 보이게 하기 위해 많은 플

러그인 기술이나 확장 라이브러리를 사용하면서 크로스 브라우징 관련 라이브러리 기술들이 인

기를 누리고 있다. 또한 다양한 기기에서 웹 문서를 보기 위한 기술들이 더해지면서 웹 사이트

의 복잡성은 점점 심해지고, 이로 인하여 문서를 구성하는 내용물이 많아지고 네트워크 트래픽

이 증가하면서 웹 사이트가 무거워지고 느려진다. 그리고 이러한 관련 기술들을 안내하고 있는

많은 서적들이 계속해서 출간되고, 학원에서도 관련 기술들의 커리큘럼을 경쟁하다시피 만들고

있다. 이러한 관련 기술들을 배우는 학습자의 입장에서 보면 매우 혼란스러울 것이다. 대체 어

디서부터 무엇을 먼저 배워야 하며 추가적으로 배워야만 하는 관련 기술들은 어떤 것이 있을까?

하는 고민들을 가지고 먹이를 찾아 떠도는 하이에나처럼 웹 서핑을 통해 관련기술들을 습득하게

될 것이다. 이는 사회적으로 엄청난 시간과 비용이 낭비되는 것이라 할 수 있다. 만일 웹 표준이

있다면 어땠을까? 예를 들어, 우리가 매장에서 신발이나 옷을 구입할 때 정해진 규격이 없다면

어떻게 해야 할까? 매번 신어보거나 입어보거나 하는 번거로움이 있을 것이다. 따라서 지금의

홈쇼핑(TV 또는 웹사이트 등)은 지금까지와는 다른 양상을 보였을 수도 있다. 그러나 우리는 우

리 자신의 신체 사이즈에 맞는 규격을 알고 있기에 편하게 제품을 구입할 수 있게 되는 것이다.

웹을 구현하는데 있어 표준으로 사용되는 지침과 기술 방식이 바로 웹 표준이라 할 수 있으

며, 다양한 접속환경을 가진 인터넷 사용자들이 정보에 소외되지 않고, 모두가 동등하게 정보를

이용할 수 있도록 해야 한다. 따라서 국제 표준(Global Standard)에 따라 웹을 개발해야 하며,

웹 표준은 반드시 지켜져야 한다. HTML5는 바로 이러한 웹 표준에서도 중요한 역할을 하고 있다

고 할 수 있으며, 이에 대한 효과로는 다음과 같이 사업적인 부분, 웹 접근성 부분, 개발 지향적

부분, 디자인 지향적 부분 등에서 다양하게 나타날 수 있다.

21

CHAPTER


부문별 웹 표준화의 효과

부문별 표준화 효과

비즈니스

• 로딩 속도가 빠르다(트래픽 컨트롤 가능). – HTML 파일이 간결해진다

• 버전관리, 유지보수가 용이하다. – 규격에 맞는 콘텐츠와 디자인을 간편하고 편리하게 관리할 수

있기 때문에 투입되는 노력과 시간이 줄어든다.

• 더 넓은 확장성 및 신기술 도입이 용이하다. – 여러 다양한 도구에 쉽게 적용할 수 있어 유동적

웹 사이트 구축 관리 대응이 용이하다.

• 더 넓은 사용자층 확보가 수월하다. – 콘텐츠와 디자인이 분리되어 배포가 쉽기 때문에 콘텐츠를

빠르게 확산시킬 수 있다.

• 장애인, 노인 등을 위한 서비스 제공에 따라 기업 이미지 제고에 도움이 된다 – 장애인 등을 위한

리더기를 이용한다.

웹 접근성

• 멀티 플랫폼에 대한 웹 브라우징이 가능하다.

• 장애인, 저연령 및 고연령 층에서도 손쉽게 접근할 수 있다. – 검색자료를 빠르게 노출하게 하고

장애인 등을 위한 리더기를 이용한다.

• 특정 질병, 저소득층, 학습능력이 낮은 사람, 기타 특수 환경이나 조건에 있는 사람들도 쉽게 접근

할 수 있다.

개발지향적

• 로딩 속도가 빠르다(트래픽 컨트롤 가능). – HTML 파일이 간결해진다.

• 버전관리, 유지보수가 용이하다. – 규격에 맞는 콘텐츠와 디자인을 간편하고 편리하게 관리할 수

있기 때문에 투입되는 노력과 시간이 줄어든다.

• 더 넓은 확장성 및 신기술 도입이 용이하다. – 여러 다양한 도구에 쉽게 적용할 수 있어 유동적

웹 사이트 구축 관리 대응이 용이하다.

• DHTML / Ajax / Rich Internet Application / Semantic Web 등의 기술 개발이 용이하다.

• 코드의 유효성 검사가 용이하다. – 웹 문서가 만들어지는 동안 코드상의 오류를 점검할 수 있다.

디자인지향적

• 디자인 분리 관리가 용이하여 디자인 기간이 단축된다. – 동일한 디자인 요소의 제어가 손쉽고

기존 콘텐츠와 관계없이 디자인을 자유롭게 수정하거나 변경할 수 있다.

• 수정/변경이 자유롭다. – 규격에 맞는 콘텐츠와 디자인을 간편하고 편리하게 관리할 수 있기 때

문에 투입되는 노력과 시간이 줄어든다.

• 코드의 유효성 검사가 용이하다. – 웹 문서가 만들어지는 동안 코드상의 오류를 점검할 수 있다.

• 디자인 재활용이 가능하다.

22


HTML5 미리 보기(Preview)Section 03

HTML5를 학습하기 앞서 HTML5에서 할 수 있는 일들이 무엇이 있는지 미리 살펴봄으로써

HTML5에 대한 느낌을 직접 느껴보고, 이에 대한 필요한 기능들을 좀 더 자세히 학습하는 것이

학습하는데 도움이 될 것이다.

▣ 웹 브라우저 지원 현황

WHATWG의 주체는 브라우저의 벤더들이기 때문에 표준화의 핵심은 브라우저에서의 기능 구현

여부에 달려있다고 할 수 있으며, 각 브라우저에서 빠른 속도로 지원되고 있다. 다음은 태블릿

및 모바일 별 브라우저의 HTML5 지원 현황을 정리하여 나타낸 것이다.

태블릿 별 브라우저의 HTML5 지원 현황

모바일 별 브라우저의 HTML5 지원 현황

2014년 5월 현재 HTML5를 완벽하게 지원하는 브라우저는 없다. 다음 그림은 웹 브라우저의

HTML5 지원 현황을 보여준 것으로 크롬 브라우저의 개발자 버전인 카나리아 37.0.1995.1버전은

507/555 점수를 받았다. HTML5의 표준화 단계에 따라 기능이 추가될 수 있고 총 점수 555는 증

가될 수 있으며, 획득한 점수 507점은 브라우저의 지원 점수로써 벤더에서 브라우저의 버전업을

함에 따라 달라질 수 있다. 아직까지는 HTML5를 완벽하게 지원하는 브라우저는 없다. 그러나 각

23

CHAPTER


벤더에서 HTML5를 지원하는 범위를 계속해서 확대하고 있는 실정이다.

HTML5 Test - http://html5test.com/

▣ HTML5를 학습할 수 있는 사이트

다음 사이트들은 HTML5 요소에 대한 설명과 함께 간단한 예제를 살펴 볼 수 있으며, 관련된

내용들은 표준화 진행중인 W3C의 최신 문서와 연결되어 확인할 수 있다.

24


HTML5 Doctor - http://html5doctor.com/

♣ 실전 HTML5 가이드 - http://webstandards.or.kr/html5

♣ HTML5 동영상 가이드 - http://www.sqler.com/pHTML5

▣ HTML5를 느껴보기

•HTML5 Demos and Examples - http://html5demos.com

•HTML5 Rocks - http: http://www.html5rocks.com

•HTML5 Gallery - http://html5gallery.com/

•Apple HTML5 Showcase - http://www.apple.com/html5/showcase/gallery/

25

CHAPTER


HTML5 표준화 일정Section 04

W3C에서 HTML 4.01이후(1999년) XHTML 1.0이(2000년) 차세대 마크업 언어으로 채택되어 널

리 이용되고 있었지만, XHTML 2.0으로(2009년에 책정 중단) 큰 폭으로 변경되면서 호환성이 고

려되지 못해 웹 애플리케이션에 대한 수요에 대응하지 못했다. 이에 대하여 2004년 6월에 오페

라(Opera)의 이안 힉슨(lan Hickson), 모질라(Mozilla)의 데이비드 바론(David Baron), 그리

고 애플의 데이비드 하얏트(David Hyatt) 등이 주축이 되어 W3C와 별도로 표준안을 만들기 위

한 WHATWG를 결성하고 차세대 HTML 표준 제정을 독자적으로 추진하게 되었고, W3C가 그 동안의

방침을 바꿔 이 제정에 협력하면서 HTML5라는 이름이 탄생하게 되었다. 그리고 W3C에서 HTML5

에 대한 향후 로드맵을 밝히는 Plan 2014(http://dev.w3.org/html5/decision-policy/html5-

2014-plan.html)라는 문서를 외부에 공개했는데, 2014년 말에 HTML 5.0를, 2016년 말에 HTML

5.1의 순차적인 권고안 최종안을 마련한다는 내용이다.

▣ 표준화 일정

•2004년 06월 WHATWG 활동 시작

•2007년 05월 HTML5와 Web Forms 2.0 규격 채택 - 리뷰 기반으로

•2007년 11월 HTML5 디자인 원칙 작업 초안

•2010년 01월 HTML5 Last Call Working Draft 초안

•2010년 08월 HTML5 Working Draft 공개

- 수정된 HTML 5.0 개발 일정

- 2012년 4분기 - CR(Candidate Recommendation)

- 2014년 3분기 - LC(Last Call Working Draft)

- 2014년 4분기 - PR(Proposed Recommendation)

- 2014년 4분기(12월) - Rec(Recommendation)

•HTML 5.1 개발 일정

- 2012년 4분기 - FPWD(First publication Working Draft)

- 2014년 3분기 - LC(Last Call Working Draft)

- 2015년 1분기 - CR(Candidate Recommendation)

- 2016년 4분기 - Rec(Recommendation)

•WHATWG Community - http://www.whatwg.org/

•W3C Web Site - http://www.w3.org/

•W3C Process Document - http://www.w3.org/Consortium/Process-20010719/tr.html

•W3C 대한민국 사무국 - http://www.w3c.or.kr/

26


▣ HTML 5.1 표준을 벌써 만드는 이유

현재 HTML 5.0과 HTML 5.1의 표준화는 동시에 진행되고 있다. 이런 이유로는 W3C에서는 이미

정해진 일정에 따라 HTML5의 표준을 마감하고, 못다한 구성 요소의 표준화 작업을 속행하기 위

해 이후 버전으로 주요 이슈들을 분리하기 위해서라고 설명하고 있다. 이는 HTML 5.1이 HTML 5.0

과 구별되는 새로운 내용이라기보다는 기존 산업표준의 연장선에 놓인다고 할 수 있다.

윤석찬 한국 모질라 커뮤니티 리더

먼저 웹 기술 변화에 아주 큰 변화와 혁신이 일어나고 있는데 반해 웹 표준화 프로세스는 여전히 과거의 프로세스를

그대로 답습하고 있어서 빠른 변화를 능동적으로 수용하기에 한계가 있다(물론 W3C가 메일링리스트 외부 개방, 표준

문서 소스 콘트롤 활용, 커뮤니티 그룹으로 참여 확대 등 표준 제정 단계에 많은 변화를 받아들이는 점은 고무적이지

만...).이에 따라 HTML5의 표준 에디터였던 이안 힉슨(Ian Hickson)이 2012년 4월부터 표준안 혁신을 지속하려면 표준안

자체가 소프트웨어 개발 방식 같은 변화가 따라야 한다고 강조하면서 새로운 표준 개발 협업 방식을 제안했다. 요컨데

2004년 부터 2006년까지 W3C 이전에 HTML5 표준안 작업을 한 후 W3C에 제출 했던 WHATWG라는 표준 커뮤니티가 있다.

W3C HTML W/G이 만들어진 후에도 활동이 계속됐으나 이들 기능들이 빠르게 W3C 내부로 전달되어 포함되지 못했다. 따

라서 WHATWG에서 HTML의 개발 버전(Living HTML이라고도 명명하고 소스 개발상의 Trunk에 해당하는)을 담당하고

W3C가 외부 작업과 내부 작업을 병합해서 주기적으로 표준안 스냅샷을 내놓는(일종의 Branch 버전) 방법을 제안하

였다.

표준안 2012 2013 2014 2015 2016

Living HTML – – – – –

HTML 5.0 CR start CR, LC Rec

HTML 5.1 FPWD – LC+CR CR Rec

HTML 5.2 ? FPWD – LC+CR CR

HTML 6.0 ? FPWD – LC+CR

HTML 6.1 ? FPWD –

HTML 6.2 ? FPWD

HTML 5.1은 2014년 말까지 5.0 스펙을 표준안을 내야 된다는 강박관념(?) 때문에 어느 정도 이슈를 정리하고자 하는

의지에 따른 것이다. 표준이 제정 되려면 회원사들의 공감대가 필요하다. 각 단계에서 의견을 받아(Last Call) 이를

해결해야 하는데, 계속 반대와 토론이 계속되면 현실적으로 표준 제정이 어렵게 된다. HTML 5.1은 마치 중간 단계에서

스냅샷을 뜨는 것으로 향후 HTML6, 7의 전초 작업 형식이 될 것으로 보인다. 특히 Microdata, 2D Canvas 같은 논쟁이

많았던 표준들은 모듈화를 통해 HTML5에서 분리되어 내보내면서 기존 이슈를 최소화 하였다. 그러면서 HTML.next에서

제안된 다양한 기능은 5.1에서 채용될 것으로 보인다.

자료출처: http://blog.creation.net/533

이를 요약해보면 완성된 표준안은 W3C가 만들고 그 바탕이 되는 Living HTML 작업은

WHATWG에서 추진하면서, HTML 5.x를 통해 쌓이는 변화들은 HTML6와 HTML7 등에 반영될 수도

있다.

27

CHAPTER


HTML5를 사용해야 하는 이유Section 05

HTML5를 사용해야 하는 이유로는 여러 가지가 있지만 특히 애플과 구글이 웹 표준 기술에 적

극적으로 참여하고 있으며, 그 동안 가장 소극적이었던 MS도 새롭게 개발되는 기술들에 웹 표준

기술들을 적극적으로 지원하고 있기 때문이다. 애플의 스티브 잡스는 생전에 플래시는 폐쇄된

비표준 기술이기 때문에 공개되는 웹 표준 기술이 플래시를 대체할 수 있다고 언급한 바 있다

(플래시의 높은 CPU 사용과 메모리 누수 그리고 좋지 않은 터치감 등을 이유로 잡스가 플래시를

비난하며 아이팟이나 아이폰 등에 플래시를 지원하지 않은 사실은 널려 알려져 있다).

"표준이 아닌 것에 종속되면 그 말로가 어찌 되는지 우리는 잘 알고 있다."

– 스티브잡스(http://www.apple.com/hotnews/thoughts-on-flash/)

구글의 경우도 모든 플랫폼에 앱을 만들어서 지원하기에는 비용이 부족하다면서 2009년 Google I/O 컨퍼런스

에서 HTML5에 사활을 걸었다고 언급하였다. 그리고 구글의 Gears 개발을 중단하고 HTML5로의 방향을 전환하

였다.

- http://www.engadget.com/2009/12/01/google-halts-development-of-gears-makes-room-for-html-5/

HTML5 이전에는 회사를 위해 개발되는 서비스는 각종 디바이스에 대처하기 위해 웹 사이트를

별도 운영하거나(www.service.com, m.service.com, t.service.com과 같은), 각 디바이스에 맞

는 네이티브 앱(안드로이드 앱, 애플 앱 등과 같은)을 별도로 만들어야 했다. 이러한 일들은 결

국 인력과 시간의 중복 투자라는 낭비를 불러왔다. 만일 HTML5 및 웹 기술을 활용하게 되면 아이

폰, 안드로이드, 윈도우 8.x 같은 운영체제별로 별도의 앱을 만들지 않아도 된다. 모바일 웹 하

나로 데스크탑을 포함한 여러 운영체제에 대응 가능한 서비스 개발이 가능하기 때문이다. 이는

기존 네이티브 앱 개발과는 달리 다양한 운영체제에 대응이 가능하고 기업내의 인력 및 비용의

중복 투자를 줄일 수 있기 때문이다. 이는 역설적으로 국내 기업들의 웹 서비스의 개발 및 관리

의 문제점으로 지적되어 온 인력과 시간의 중복 낭비를 줄이기 위해 인력을 줄일 수 있다는 의

미이기도 하다. 따라서 기존 웹 개발자와 디자이너를 포함하여 현업에 종사하는 많은 개발자들

이 HTML5에 관심을 가지기 시작하였다(특히 플래시 개발자들의 자리가 없어지면서 HTML5 관련

개발 업무로 탈바꿈을 하고 있는 중이다).

▣ 모바일 앱 개발자들의 움직임 시작

전 세계적으로 안드로이드와 iOS는 아직까지 모바일 앱 개발자에게 인기가 높다는 것은 누구

28


나 알고 있는 사실이다. 그러나 미국과 유럽 외부 지역 일부에선 벌써부터 HTML5가 iOS보다 선

호되고 있다는 조사 결과가 나왔다. 2014년 1분기에 비전모바일이 6천명의 개발자를 대상으로

실시한 설문조사에서 남아시아, 남미, 중동, 아프리카 등에서 HTML5가 안드로이드 다음으로 대

중적인 모바일 환경으로 조사 발표되었다. 모질라의 경우, 파이어폭스 OS를 웹 앱에 초점을 맞

모바일 앱 개발자들의 개발 플랫폼 인지도

조사보고서 - http://www.visionmobile.com/product/developer-economics-q1-2014-state-

developer-nation/

국내 기사 - http://www.zdnet.co.kr/news/news_view.asp?artice_id=20140208093727

29

CHAPTER


춘 저사양 휴대폰용이라고 강조하고 파이어폭스 OS를 탑재한 저사양 스마트폰을 남미 시장을 중

심으로 퍼트리고 있다. 이렇게 HTML5 개발이 선호되는 건 모질라의 적극적 노력 덕분이 아닐까

하는 생각이 든다.

HTML5에 대해서는 전세계 모바일 개발자 37%가 브라우저를 위한 앱을 개발중이며, 15%가 하

이브리드 HTML5 앱을 개발한다고 답했다. HTML5는 모든 플랫폼에서 동시에 사용되는 가장 대중

적인 플랫폼이다. iOS나 안드로이드를 최우선으로 삼는 개발자 중 19%가 앱 안에서 웹 콘텐츠

를 보여주기 위해 HTML5를 사용한다고 답했다.

▣ 세계 시장 전망

2014년 1월 중순 가트너에

서 발표한 자료에 따르면, 2020

년까지 세계 사물인터넷(IoT,

Internet of Things) 기기가 260

억대에 이를 것이란 전망을 하였

다. 이는 2009년 9억대에서 약 30

배가 증가한 규모이다. 그리고

IoT제품과 서비스 공급업체의 수

익이 3천억 달러를 상회하며, 대

부분의 서비스 부문에서 창출될 것으로 예상했다. 이로 인해 창출되는 세계 경제적 부가가치는

1조 9천억 달러에 이를 것으로 전망했다.

가트너 "2020년 사물인터넷 기기 260억대"

IOT는 상태 감지, 내·외부 환경과의 통신과 상호 작용을 위해 임베디드 기술을 탑재한 물리적 사물들의 네트워크를

의미한다. 가트너 책임연구원인 피터 미들턴은 "IoT는 여타의 연결 기기의 성장을 곧 앞지를 것"이라며 "2020년이면

사용 중인 스마트폰, 태블릿, PC의 대수는 73억 대에 이를 것으로 예상되지만, IoT는 대략 260억 대에 이르게 될 것"이라고 밝혔다.

IoT 기능을 소비자 제품에 탑재하는 비용이 낮기 때문에 기하급수적으로 증가하는 IoT 탑재 제품과 더불어 인터넷에

연결이 안 되어 있는 '유령(ghost)' 기기도 일반화될 전망이다. IoT 기능이 탑재됐지만 연결을 활성화하기 위해 소프

트웨어가 필요하거나, IoT기능이 있지만 사용자가 적극적으로 활용하지 않는 제품들이 '유령' 기기에 해당된다.

기업의 경우 IoT 기술을 광범위하게 활용할 전망이다. 첨단 의료 기기, 공장 자동화 센서와 산업 로봇 애플리케이션,

농작물 수확량 제고용 센서 모트, 자동차 센서와 도로 및 철도 교통, 수자원 공급, 송전 등의 분야에 적용할 수 있는 인

프라 모니터링 시스템까지 폭넓은 시장을 대상으로한 다양한 제품이 판매될 것으로 예상된다.

… 이하 생략 …

자료출처 – ZDNet Korea(http://www.zdnet.co.kr/news/news_view.asp?artice_id=20131216153337)

30


세계 최대 전자제품 박람회인 CES2014에서 웨어러블과 함께 2014년을

주도할 차세대 개념으로 사물인터넷이 화두에 올랐다. 특히 CES가 전자제

품 박람회임에도 불구하고, 자동차업체들이 참여하면서 사물인터넷이 향후

의 모든 시장에 영향을 끼칠 것이라는 것을 볼 수 있는데, 아우디는 <스마

트 디스플레이>라는 10.2인치 태블릿PC를 공개하였고, 현대자동차는 구글

과 손잡고 구글 글래스를 활용하여 자사의 <블루링크> 활용성을 끌어올리

려는 시도를 하였다. 그리고 BMW도 삼성전자의 스마트 손목시계인 갤럭시

기어를 통한 각종 제어기술(시동을 걸거나 차안의 온도 조절 등)을 선보였다.

구글 역시, 모바일시장을 키워나가기 위해 사물인터넷 벤처기업인 <네스트 랩스>를 인수하였

다. 그리고 시스코는 사물인터넷의 영향력에 대한 대비를, 인텔은 이에 맞춘 칩셋 플랫폼을 내

놓았다. 또한 퀄컴·인텔·엔비디아 등이 미래의 사물 인터넷 시대를 준비하는 제품들을 내놓

는 등, 세계 기업들이 앞다투어 사물인터넷 시장에 뛰어드는 이유가 엄청난 파급효과가 있기 때

문이다.

▣ 국내 시장 전망

비단 세계 시장 뿐만 아니라 국내 시장의 사물인터넷의 미래가 다른 나라들보다 더 빠른 속도

로 발전하고 있음을 삼성전자와 LG전자가 세계 최대 전자제품 박람회인 CES2014에서 사물인터

넷시스템을 출품하여 많은 주목을 받았다. LG전자의 스마트홈 시스템인 < 홈챗>은 전세계 3억명

LG 전자의 홈챗(Home Chat)

31

CHAPTER


이상의 가입자를 보유하고 있는 라인(Line) 메신저를 통해 가전기기를 제어할 수 있는 사물인

터넷 시스템이다. 이는 스마트폰에서 냉장고, 세탁기를 제어하고 로봇청소기에 언제 청소를 했

는지도 문의를 할 수가 있다(응답으로 몇 시부터 몇 시까지 어떤 모드로 청소를 했는지 문자로

알려준다). 그리고 냉장고 및 에어콘 등에 센서를 장착하여 데이터를 무선으로 스마트폰에 연결

하여 제어할 수도 있다.

삼성전자 역시 클라우드 기반의 < 스마트홈>을 선보이며 사물인터넷에 적극적인 자세를 보였

다. 이는 삼성이 주도적으로 개발하고 있는 타이젠 OS와의 호환성을 무기로 가정의 모든 전자

삼성전자의 스마트 홈(Smart Home)

32


제품들을 모바일 기기 하나로 제어할 수 있는 환경을 만들겠다는 의지로 보인다. 더군다나 스마

트홈의 경우엔 타 가전업체들의 기기도 연동시킬 수 있도록 오픈 소스로 개발된다고 한다. 이는

기업들간의 상생에도 큰 도움을 줄 수 있으리라 생각된다.

이처럼 웨어러블 기기, 헬스케어, 스마트홈, 스마트카 등 각 분야에서의 변혁은 이미 시작되

었고 사물인터넷에 필요한 디바이스가 점차적으로 늘어나면서 반도체 수요가 급격히 증가할 것

이다. 특히 클라우드 서비스와 빅데이터 등과 연계된다면 향후의 생활 환경에 끼치게 될 영향력

은 상상을 초월하게 될 것이다.

국가적인 차원에서도, 미래창조과학부가 사물인터넷 국가 표준개발과 글로벌 표준화 선도를

위해 [사물인터넷 표준화 협의회]를 발족하고 2014년 3월 사물인터넷 산업 육성을 위한 국가전

략(기본계획)을 수립하였다. 협의회는 삼성전자, LG전자, SKT, KT, LG U+, 삼성SDS, 모다정보통

신, 엔텔스, 엑스톤 등 사물인터넷 분야의 대·중소기업 13개 업체와 TTA, ETRI, KCA, KETI, 지

능형전력망협회 등 관련 공공기관 및 학계 전문가들이 함께 참여하고 있다.

결론적으로, 각종 디바이스와 운영체제에 종속적이지 않은 HTML5를 이용하여 웹 애플리케이

션을 만든다면, 앞으로 다가올 사물인터넷과 같은 스마트한 세상을 열어가는 첨병의 역할을 할

수 있을 것으로 생각한다.

2014년 ICT 산업 이슈 전망 – NIPA, 가트너, SK C&C

2013년 연말, 국내외 연구 기관에서는 2014년 ICT분야를 이끌어 나갈 이슈들을 다음과 같이 연이어 발표했다.

순위정보통신산업진흥원(NIPA)2014년 ICT 10대 이슈

가트너 선정

2014년 10대 전략기술SK C&C 선정

2014년 8대 기술

1 웨어러블 컴퓨팅 시대의 개막 다양한 모바일 기기 관리 빅데이터

2 빅데이터의 활용 사례 증가 모바일 앱과 애플리케이션 HTML5

33차 산업혁명을 주도하는

3D프린팅과 제조 로봇만물인터넷

스마트 채널

(Smart Channel)

4 신종 보안위협의 증가하이브리드 클라우드와

서비스 브로커로서의 ITIndoor LBS

5 LTE-A서비스의 본격 경쟁 클라우드/클라이언 아키텍쳐 3D 프린팅

6 초연결/사물인터넷의 확산 퍼스널 클라우드의 시대 웨어러블 디바이스

7클라우드 컴퓨팅의 진화:

하이브리드, 오픈스택

소프트웨어 정의

(Software Defined)소프트웨어 정의

(Software Defined)

8 차세대 TV와 방송 서비스 웹스케일 IT 데브옵스(DevOps)

9차세대 부품:

3D 반도체, 플렉시블 OLED스마트 머신

10 소셜 2.0 3D 프린팅

33

CHAPTER


★ 보충 설명 – 사물인터넷(IoT)

영어 머리글자를 따서 '아이오티(IoT)'라 약칭하기도 한다. 이 용어는 1999년 매사추세츠공과대학(MIT)의 오토아이

디센터(Auto-ID Center) 소장 케빈 애시턴(Kevin Ashton)이 향후 RFID(전자태그)와 기타 센서를 일상생활에 사용

하는 사물에 탑재한 사물인터넷이 구축될 것이라고 전망하면서 처음 사용한 것으로 알려져 있으며, 이후 시장분석 자

료 등에 사용되면서 대중화되었다. 사물인터넷은 기존의 유선통신을 기반으로 한 인터넷이나 모바일 인터넷보다 진화

된 단계로 인터넷에 연결된 기기가 사람의 개입없이 상호간에 알아서 정보를 주고 받아 처리한다. 사물이 인간에 의존

하지 않고 통신을 주고받는 점에서 기존의 유비쿼터스나 M2M(Machine to Machine: 사물지능통신)과 비슷하기도 하

지만, 통신장비와 사람과의 통신을 주목적으로 하는 M2M의 개념을 인터넷으로 확장하여 사물은 물론이고 현실과 가상

세계의 모든 정보와 상호작용하는 개념으로 진화한 단계라고 할 수 있다

자료출처 – 네이버 지식백과(두산백과사전)

HTML5 콘텐츠 모델Section 06

기존 HTML과 HTML5의 차이점 중에 하나가 콘텐츠 모델이라는 개념과 구조 관련 요소들이 새

롭게 도입되었다는 점이다. 이번 절에서는 새롭게 도입된 콘텐츠 모델과 이에 해당되는 요소들

이 무엇인지 살펴보도록 하겠다. 본 교재에서 언급되지 않은 내용들은 다음의 표준화 문서를 참

고하도록 하자. 현재 주요 브라우저에서 지원되고 있는 기능이지만, HTML5 명세서에 없는 언급

되지 않은 요소들도 있기 때문에 HTML5.1 명세서를 참고하였다.

표준화 문서

참조 위치

HTML5 (2014-05-26) - http://www.w3.org/html/wg/drafts/html/CR/W3C Editor's Draft (Candidate Recommendation)

3.2.4 content models (http://www.w3.org/html/wg/drafts/html/CR/dom.html#content-models)

콘텐츠 모델은 허용되거나 금지된 요소의 유형의 이름, DTD(Document Type Definition), 엔

티티(Entity), 그리고 문서의 텍스트가 무엇인지 정의하고 있어서 각 요소 유형에서 어떤 내용

들이 포함될 수 있는지를 알려주는 모델이다. HTML4에서는 이 요소가 블록 요소인지 인라인 요

소인지 규정하고 "인라인 요소 안에는 블록 요소를 넣을 수 없다"라는 규칙만 있지만, HTML5에

서는 더 엄격하게 규칙을 적용하여 요소마다 그 목적에 따라서 다음과 같이 분류하고 있다.

• Metadata Content, Flow Content, Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content, Script-

Supporting Elements, Transparent Content Models,

다음 그림은 WHATWG에서 각 콘텐츠의 요소를 7가지 유형별로 분류하고 있음을 보여주고 있

34


다. 그림에서 알 수 있듯이 HTML5의 요소 대부분이 이 분류에 속하지만, 반드시 한 분류에만 속

한 것은 아니고 조건에 따라서 다른 분류에도 속할 수 있음을 알 수 있다.

HTML5 콘텐츠 유형별 분류

다음 표는 HTML 콘텐츠 유형의 내용과 해당되는 요소들을 정리한 내용이다.

분류 내용

Metadata Content

문서의 정보를 포함하여 현재 문서와 다른 문서의 관계를 설정하거나 나머지 내용의 표현이나 행동

을 설정 또는 분류되지 않은 정보들을 포함한다.

base, link, meta, noscript, script, style, template, title

Flow Content

body 요소 내에서 사용되는 대부분의 요소들이 포함되지만, 일부는 조건부로 포함된다.

a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, details, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, link, main, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, Text

Sectioning Content

header 요소와 footer 요소의 범위 내에서 콘텐츠를 그룹화하여 구조를 나눌 때 사용한다.

article, aside, nav, section

Heading Content

section 요소의 헤더(제목)를 정의할 때 사용한다.

h1, h2, h3, h4, h5, h6

35

CHAPTER


Phrasing Content

문서의 텍스트를 정의할 때 사용하며 단락 안에 있는 텍스트의 범위를 나타내는 요소가 속한다. 그

러나 p 요소와 같이 단락 그 자체를 나타내거나 div, section 요소와 같이 여러 개의 단락을 묶을

수 있는 요소는 속하지 않는다.

a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, Text

Embedded Content

문서 안에 외부 리소스로 삽입되는 콘텐츠 또는 다른 언어로 표시된 콘텐츠들이 포함된다.

audio, canvas, embed, iframe, img, math, object, svg, video

Interactive Content

사용자가 어떤 조작을 할 수 있는 콘텐츠들이 포함된다.

a, audio, button, details, embed, iframe, img, input, keygen, label, object, select, textarea, video,

Palpable Content

새롭게 추가된 개념으로써, 구체적으로 보여지고 이해할 수 있는 콘텐츠들이 포함된다. 최소한 하

나 이상의 요소가 존재해야 하고 해당 요소는 숨김 상태여도 안된다.

a, abbr, address, article, aside, audio, b, bdi, bdo, blockquote, button, canvas, cite, code, data, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, menu, meter, nav, object, ol, output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul, var, video

Script-supporting Element

요소 자체가 렌더링이 되지 않아 어떤 정보를 표현하지 않지만, 스크립트를 지원하는데 사용된다.

script, template

앞의 표에서 몇몇 요소들은 다음과 같은 조건부로 해당 콘텐츠에 포함될 수 있다.

•조건부로 Flow Content가 되는 요소

- area - map 요소의 자손일 때

- link, meta - itemprop 속성이 지정되었을 때

- style - scoped 속성이 지정되었을 때

•조건부로 Phrasing Content가 되는 요소

- area - map 요소의 자손일 때

- link, meta - itemprop 속성이 지정되었을 때

•조건부로 Interactive Content가 되는 요소

- audio, video - controls 속성이 지정되었을 때

36


- img, object - usemap 속성이 지정되었을 때

- input - type 속성이 "hidden"이 아닐 때

- tabindex 속성은 모든 요소를 Interactive Content로 만들 수 있다.

•조건부로 Palpable Content가 되는 요소

- audio - controls 속성이 지정되었을 때

- dl - 자식 요소로 하나 이상의 이름과 값으로 구성되어 있을 때

- input - type 속성이 "hidden"이 아닐 때

- menu - toolbar 속성이 지정되었을 때

- ol - 자식 요소로 하나 이상의 li 요소를 포함하고 있을 때

- ul - 자식 요소로 하나 이상의 li 요소를 포함하고 있을 때

HTML5 문서의 기본 구조Section 07

HTML5 문서의 기본 구조는 기존 HTML/XHTML의 형식과 크게 다르지 않고 호환되기 때문에 기

본적으로 사용되는 HTML의 구성 요소를 그대로 사용할 수 있으며, HTML5의 실용성 원칙에 따라

일부 불필요한 속성들을 생략하여 문서의 구조를 간결하게 유지하고 있다. 따라서 HTML5에서 각

요소가 가지고 있는 의미는 더 중요해졌다고 할 수 있다.

HTML(Hyper Text Markup Language)은 웹 문서를 기술하기 위한 언어로써 마크업(Markup)

언어의 일종이다. 마크업 언어는 다음 그림과 같이 일반 텍스트에 태그(Tag)를 붙여서 텍스트가

문서 어디에 해당되는지를 기술한 것이다. 이렇게 HTML은 태그들로 이루어진 요소(Element)의

형태로 작성되며, 이 태그는 요소 기술자로서 꺽쇠 괄호(<, >)로 둘러싸 구분한다. 본격적인 학

습에 앞서 HTML 문서의 기본적인 구성 요소를 살펴보고 용어를 이해하도록 하자.

37

CHAPTER


HTML 문서의 구성 요소

HTML 문서의 구성 요소를 살펴보면, 다음과 같이 요소라 불리우는 마크업 명령어인 태그

(Tag), 속성(Attribute), 그리고 속성 값(Value)으로 이루어져 있으며 앞의 그림과 같이 트리

구조의 형태로 구성된다.

• 요소(Elements) – 문서에 내용을 지정할 때 사용되며, 시작과 종료를 나타내는 태그로 이

루어져 있다. 태그는 대소문자를 구분하지는 않지만, W3C에서는 HTML4부터 태그의 표기를

소문자로 해야 한다고 권고하고 있고 XHTML에서는 반드시 소문자를 사용해야 한다.

- ex) <title> 문서의 제목 </title> (※ 여기서 "문서의 제목"은 요소의 내용에 해당된다)

- 요소 = 시작 태그 + 콘텐츠(요소의 내용) + 종료 태그

• 태그(Tag) – '<' 기호와 '>' 기호로 둘러싸인 요소로 짝을 이루는 시작 태그와 종료 태그

로 이루어져 있다. 태그 사용시 대소문자를 구분하지 않지만, 중첩해서 사용할 때는 순서가

뒤바뀌지 않도록 주의해야 한다.

- <title>은 시작 태그, </title>은 종료 태그

- <a><b><c> 내용 입력 <c><b><a> 와 같이 하나의 태그가 다른 태그를 감싸고 있어야 한다

• 속성(Attributes) – HTML 요소는 속성을 가질 수 있는데, 지시하고자 하는 추가적인 정보

를 구체화시키기 위해서 시작 태그 내에서 사용되며 '='기호와 인용 부호인 큰따옴표 " "

를 사용하거나 작은 따옴표 ' ' 를 사용하여 값을 지정한다.

• 속성 값(Arguments) – 속성에 지정되는 실제 값을 나타내며, 문자열, 숫자나 %같은 단위

등으로 지정한다. 속성 값을 변수라고도 한다.

38


- ex) <p align="center">HTML5에 대하여 학습한다.</p>

- <p> 태그의 속성인 align의 속성 값은 "center" 값이 된다.

- 속성 값이 이미 큰 따옴표를 포함하고 있다면, 속성 값을 지정할 때 작은 따옴표로 감싸야

한다.

- <div name='강아지 "촐랑이"'>

• 설명문(Comment) – 문서에 있는 내용에 대한 설명을 하고자 할 때 사용하며, HTML 문법

에는 영향을 주지 않고 웹 브라우저는 이를 무시하고 표시하지 않는다. 주석문이라고도

한다.

- "" 기호로 닫는다.

- 설명문 안에는 <, >, -- 같은 기호는 사용하지 않도록 주의한다

- CSS와 JavaScript에서의 설명문은 C언어와 같이 "/* 내용 설명 */"와 같이 사용한다.

★ 보충 설명

☞ meta나 br 요소와 같이 종료 태그가 없는 요소를 셀프-클로징 태그(Self-Closing Tag), 비어있는 태그(Empty Tag), 또는 홀 태그라고 부른다. 그리고 XHTML 문법에서는 규칙이 엄격하기 때문에 <br />처럼 홀 태그 끝에 닫는

태그를 넣어 사용해야 했지만, HTML 4.x 부터는 끝을 닫지 않아도 상관없다. p 요소의 경우, 종료 태그는 선택 사항

으로 간주되기 때문에 생략이 가능하다. 다음은 홀 태그들이다.

- area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source

☞ 문서의 문자셋(Charet)을 UTF-8로 사용하는 이유

UTF-8은 한글을 포함하여 세계의 다양한 언어를 문제 없이 표현할 수 있기 때문에 미국이나 유럽의 컴퓨터에서 웹

문서를 열더라도 한글이 정상적으로 출력이 된다. 그러나 UTF-8 대신에 EUC-KR을 사용하면 한글, 한자 및 영어를

제외한 다른 나라의 언어를 표현하지 못한다. 문자셋을 UTF-8로 사용하려면 HTML 파일을 저장할 때 인코딩의 형태

도 UTF-8로 저장해야 한다.

▣ 문서의 불필요한 속성 생략

HTML5에서는 문서 유형의 DOCTYPE 선언과 문자 인코딩 선언 부분 등에서 일부 불필요한 속성

들을 생략하여 다음과 같이 간결해졌다.

사용 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

기존 HTML 방식

<HTML lang="ko"> <html> <head> <title> HTML5 기본 구조 </title>

39

CHAPTER


<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css"/>

<script type="text/javascript" src="path/to/script.js"><script>

</head> <body> HTML5 기본 구조를 학습합니다.

</body></HTML>

<!DOCTYPE HTML> HTML5 방식

<HTML lang="ko"> <html> <head> <title> HTML5 기본 구조 </title>

<meta charset="UTF-8">

<link rel="stylesheet" href="path/to/stylesheet.css"/>

<script src="path/to/script.js"><script>

</head> <body> HTML5 기본 구조를 학습합니다.

</body></HTML>

• 문서의 유형 변화 - 기존 HTML에서의 DOCTYPE은 SGML 기반이었기 때문에 DTD를 명시해야

했으나, HTML5에서는 브라우저가 표준모드로 작동되게 하는 역할만 하면 되기 때문에 간결

해졌다. 일반적으로 DOCTYPE이 지정된 HTML 문서는 소수의 예외적인 경우를 제외하고 MS

사의 IE6 이상의 버전을 포함한 모든 브라우저에서 표준 모드로 렌더링이 된다.

• 문자의 인코딩 변화 - HTML 문서의 문자 인코딩 방식을 명시할 때도 간결해졌다.

• Link의 Type 생략 - CSS 파일 연결 또한 기본적으로 CSS이기 때문에 매번 type="text/

css"를 명시하지 않아도 된다.

• Script의 Type 생략 - HTML5에서는 스크립트가 기본적으로 자바스크립트이기 때문에 매번

type="text/javascript"를 명시하지 않아도 된다.

▣ Metadata 요소들

Title, Meta, Link, Style, Script와 같은 meta 요소들은 웹 브라우저에게 HTML로 작성된 웹

문서와 관련된 정보를 제공하는데 사용된다. 이러한 요소들은 앞의 사용 예제와 같이 metadata

40


요소들의 컨테이너 역할을 하는 head 요소의 블록 내에서 기술한다.

• title - 웹 문서의 제목을 설정하는데 사용된다.

• link - 주로 외부에 있는 스타일시트(CSS)를 지정하는데 사용된다.

• style - 웹 문서의 디자인을 담당하는 스타일을 적용하는 코드를 작성하는데 사용된다.

• script - 웹 문서의 동적인 작업을 위한 자바스크립트 코드 등을 작성하거나 참조할 때 사

용된다.

• meta - 웹 문서의 인코딩 정보, 문서에 대한 저자, 설명, 몇 초 후 다시 읽기(Refresh)등을

설정할 때 주로 사용되며 다음과 같은 속성들이 있다.

- name - Metadata의 이름을 지정하는데 사용된다.

- http-equiv - 문자 인코딩의 설정 또는 몇 초 후 페이지를 다시 로드할 것인지 등에 사용

되며 HTML5에서는 보통 생략한다.

- content - name, http-equiv 속성과 연관된 Text 형태의 데이터로, HTML5에서는 보통 생

략한다.

- charset - HTML 문서에 대한 문자셋을 설정하는데 사용된다.

• base - 웹 문서와 연관된 기본적인 URL 경로나 목적지(Target) 경로를 지정하는데 사용되

기 때문에 상대적인 링크(Link)들의 시작 위치 역할을 하게 된다. 다음 예와 같이 지정하

여 사용할 수 있다.

- <base href="절대 경로 URL">

- <base target="_blank">

- <base href="절대 경로 URL" target="_blank">

특히 Meta 요소를 이용하여 HTML에 대한 정보를 기록하면 웹 검색(사이트 홍보 등)에 유리하

다. 이는 구글 등의 유명 검색 로봇에 의해 수집되는 정보이기 때문이다. 사용할 수 있는 항목으

로는 다음과 같은 것들을 이용할 수 있다.

•<meta name="description" content="HTML 파일의 간략한 설명">

•<meta name="keywords" content="HTML 파일의 키워드">

•<meta name="author" content="HTML 파일의 작성자">

•<meta name="copyright" content="HTML 파일의 저작권 정보">

•<meta name="reply-to" content="연락처 메일">

•<meta name="date" content="HTML 파일의 작성 일자">

41

CHAPTER


★ 보충 설명

메타데이터(<meta>)를 이용하면 현재 웹 문서를 다시 로드하거나 다른 페이지로 이동하게 할 수 있다.

•5초 후에 페이지를 다시 로드하는 경우

- <meta http-equiv="refresh" content="5">•5초 후에 다른 페이지를 로드하는 경우

- <meta http-equiv="refresh" content="5; http://your_website.com">

▣ HTML5 문서의 협업 관계

HTML5에서부터 웹 프로그래밍에 사용되는 웹 표준 기술을 확립하였는데, HTML5 기반의 웹 사

이트를 제작한다는 것은 웹 문서의 내용을 HTML5에서 언급되는 다양한 요소들과 속성들을 이용

하여 웹 사이트를 구성하는 웹 문서(HTML 파일)들 뿐만 아니라 웹 문서의 디자인과 같은 부분은

CSS3로 처리하고 웹 문서의 이벤트 처리 같은 상호작용을 담당하는 부분은 자바스크립트로 작

성한다는 의미이다. 이에 대한 관계를 다음 그림으로 나타내었다. 그림에서 동적인 CRUD의 의

미는 요소에 대한 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete) 작업을 의미한다. 따라서

단순히 HTML5의 마크업만 학습을 한다고 해서 HTML5를 공부하는 것이 아니기 때문에 CSS3와 자

바스크립트를 함께 학습해야 한다.

HTML5, CSS3, JavaScript의 관계

HTML5 요소(Element)의 확장Section 08

HTML 4.01 태그들 중에는 사용되지 않거나 사용되지 않을 요소들의 경우, HTML5에서는 삭제

42


되거나 새롭게 바뀌고 있다. HTML5에서는 여러 기능들을 지원하기 위하여 다음과 같은 새로운

요소들이 추가되었다.

▣ 시맨틱(Semantic)/ 구조적(Structural) 요소

기존 HTML에서 문단을 구분하기 위해 가장 많이 사용되던 요소는 <div>였지만, 이 요소만으

로는 정확한 의미를 전달할 수 없기 때문에 새롭게 추가된 요소들이 다음과 같은 레이아웃을 위

한 시맨틱 요소들, 그룹핑 콘텐츠 요소들, 텍스트 레벨의 시맨틱 요소들, 그리고 상호작용 요소

들이다.

레이아웃을 위한 시맨틱 요소들

요소 설명

header 머리말(제목)을 나타낸다.

footer 제작자의 정보나 저작권의 정보를 나타낸다.

hgroup 제목과 부제목을 묶어주는 역할을 한다.

nav 메뉴 부분을 나타낸다.

section 문서 영역을 구성할 때 사용되고 h1~h6과 함께 사용하며 제목별로 나눌 수 있다.

article 개별 콘텐츠(뉴스 기사 또는 블로그의 내용 글과 같은)를 나타낸다.

aside 주요 콘텐츠 이외의 참고가 될 수 있는 좌우측의 콘텐츠를 나타낸다.

그룹핑 콘텐츠 요소들

요소 설명

main body 영역의 주요 콘텐츠 블록을 그룹화할 때 사용한다.

figure 그림이나 비디오 같은 멀티미디어 요소를 나타낸다.

figcaption figure 요소에 대한 제목(개략적인 설명)을 나타낸다.

ol (reverse 속성) li 요소들의 순서를 바꾸도록(앞의 순번이 뒤의 순번으로) 한다.

텍스트 레벨의 시맨틱 요소들

요소 설명

a (download 속성) href 속성에 지정된 파일을 다운로드 할 수 있도록 한다.

a (ping 속성) 링크를 클릭했을 때, 링크의 정보를 자동으로 송신할 수 있도록 한다.

strong 아주 중요하거나 심각하거나 긴급을 요하는 내용을 표시하도록 한다.

time 날짜와 시간 표현에 의미를 주고자 할 때 사용하며 날짜와 시간을 나타낸다.

mark 특정 텍스트의 강조 효과를(형광펜으로 칠한 것과 같은) 나타낸다.

43

CHAPTER


ruby, rt, rp, rb, rtc ruby 언어를 표시할 때 사용한다.

bdi 텍스트의 방향을 격리하여 나타나도록 한다.

wbr 줄 바꿈 지점을 나타낸다.

상호작용 요소들

요소 설명

details 사용자 요청에 따라 얻은 콘트롤이나 추가적인 정보를 나타낸다.

summary details 요소의 하위 요소로써 머리글을 나타낸다.

menu 명령들의 목록을 정의하고 명령들의 단축 메뉴 같은 것들을 목록화한다

command 사용자가 호출할 수 있는 명령어를 나타낸다.

dialog 대화를 의미 있는 콘텐츠로 만들고자 할 때 사용하며 대화상자 또는 창을 나타낸다.

▣ 캔버스(Canvas) 요소

요소 설명

canvas 2차원 그래픽(비트맵)을 그리기 위한 요소, 자바스크립트 API 이용

▣ 미디어(Media) 요소

요소 설명

audio 오디오 콘텐츠를 정의하며, 별도의 플러그인 없이 재생 및 제어가 가능하다.

video 비디오 콘텐츠를 정의하며, 별도의 플러그인 없이 재생 및 제어가 가능하다.

source여러 개의 미디어 요소를 정의하며, video와 audio 요소의 하위 요소로써 미디어 요소의 리

소스를 정의한다.

embed 플러그인과 같은 외부 애플리케이션을 정의한다.

track 텍스트 트랙을 정의하며, <video>와 <audio>에서 사용된다.

▣ 폼(Form) 요소

요소 설명

datalist 자동 완성 기능으로, 목록 속성과 함께 사용하여 콤보 상자(ComboBox)를 만든다.

keygen 키 쌍(Key Pair)을 생성할 때 사용하며 암호 키를 생성해준다.

output 스크립트의 계산 결과 같은 실행 결과를 나타낸다.

meter 현재 상태를 나타낸다.

progress 현재 진행 상황을 나타낸다.

44


•form 요소의 추가된 속성

- autocomplete, novalidate

•input 요소의 추가된 속성

- autocomplete, noValidate

- form, formaction, formenctype, formmethod, formnovalidate, formtarget

- minlength, height, width, min, max, placeholder, required

- list, multiple, step, pattern, dirname

•input 요소의 추가된 타입(Type)

- month, week, date, datetime, datetime-local, time

- color, email, number, range, search, tel, url

▣ 새로 추가된 전역 속성

속성 설명

contenteditable 이 속성이 지정된 요소의 콘텐츠를 사용자가 수정할 수 있도록 한다(3장 참조).

contextmenu 컨텍스트 메뉴를 지정할 때 사용한다.

data-* 저작자가 속성을 추가(어떤 요소든 임의의 속성 추가 가능)하고자 할 때 사용한다.

draggable, dropzone 드래그 & 드롭 API와 함께 사용하게 된다.

hidden 이 속성이 지정된 요소를 없는 상태(브라우저에 표시되지 않음)로 만들 때 사용한다.

inert 다이얼로그 요소를 만들기 위해 추가되었다(WHATWG HTML).

aria-* 웹 문서의 접근성이 좋아질 수 있도록 HTML 확장 기능을 제공한다.

role aria 특정 요소가 담당하는 역할을 기준으로 몇 가지 속성 값을 정의한다.

spellcheck 문법 검사(영어 단어 및 영어 문장만 해당)를 사용할지를 나타낸다.

translate 콘텐츠가 번역되어야 하는지 나타내기 위해서 사용한다.

microdata 지정한 요소가 데이터로써 어떤 의미를 가졌는지를 나타내며 HTML 요소에 삽입하여 사용.

tab-index 웹 문서의 요소들을 사용자가 키보드를 이용하여 어떤 순서로 이동할지를 지정한다.

▣ 변경된 요소

속성 설명

address 가장 가까운 article이나 body 조상 요소로 범위가 정해진다.

b 강조의 의미는 사라지고 주목해야 할 단어를 표기하도록 변경되었다.

cite 단독으로 작품을 지칭할 때 사용된다. 사람에게는 해당하지 않는다.

dl이름-값 그룹을 나타내는데 사용된다. 대화 목록을 기술하는데에는 더 이상 적합하지 않게

된다.

45

CHAPTER


hr 문단 수준의 주제 구분에 사용된다

i 다른 분위기나 어조, 보통의 서술과 구분되어야 하는 텍스트를 지칭할 때 사용한다.

label레이블을 클릭했을 때 포커스를 이동하는 기능이 플랫폼의 표준 인터페이스와 다를 경우 브

라우저가 더 이상 포커스를 이동시키지 않는다.

menu 툴바나 컨텍스트 메뉴를 나타내는 용도로 변경되었다.

noscript 더 이상 직전 script 요소와 연관되지 않는다.

s 더 이상 정확하지 않거나 관련이 없는 내용을 나타낸다.

script 스트립트나 커스텀 데이터를 넣기 위한 용도로 사용된다.

small 작게 출력해야 하는 사이드 코멘트를 나타낸다.

strong 강한 강조보다는 중요함을 나타낸다.

u 불충분한 내용을 나타내는데 사용된다.

HTML5에서 중단된 요소 및 속성Section 09

표준화 문서

참조 위치

HTML 5 (2014-05-26) - http://www.w3.org/html/wg/drafts/html/CR/W3C Editor's Draft (Candidate Recommendation)

11 Obsolete feature (http://www.w3.org/html/wg/drafts/html/CR/obsolete.html#obsolete)

▣ 권장하지 않는 속성들

속성 설명

img 요소의 border 속성 속성 값이 0일 때만 사용하도록 하고 가능하면 CSS를 사용하도록 권장하고 있다.

script의 language 속성

기존 스크립트 사용시 <script type="text/javascript" language="javascript"> 라고 되어 있던 부분에서 language 속성이 type과 겹치기 때문에 사용하지 않도록 권장

하며 type 속성도 기본값으로 적용되기 때문에 생략하기도 한다.

a의 name 속성 name 속성 대신에 가능하면 id 속성으로 사용하도록 권장하고 있다.

▣ 기존 HTML에서 중단된 요소들

•CSS로 처리할 수 있는 요소들(단순히 보여지는데 사용되는 요소들)

- basefont, big, blink, center, font, marquee, multicol, nobr, spacer, s, strike,

tt, u, … 등

46


•프레임과 관련된 요소들(사용성과 접근성에 부정적인 영향을 주는 요소들)

- frame, frameset, noframes → iframe 과 CSS로 대체

•다른 요소로 대체할 수 있는 요소들(거의 사용되지 않음)

- applet → embed 및 object 요소로 대체

- acronym → abbr 요소로 대체

- bgsound → audio 요소로 대체

- dir → ul 요소로 대체

- isindex → form 요소로 대체

- listing → pre 및 code 요소로 대체

- nextid → GUIDs로 대체

- noembed → object 요소로 대체

- plaintext → text/plain MIME type 대체

- strike → 요소가 편집을 표시하는 경우 del 요소로 대체, 그렇지 않으면 s 요소로 대체

- xmp → pre 및 code 요소로 대체, "<" 기호는 "&lt"로 대체, "&"기호는 "&amp"기호로 대체

▣ 기존 HTML에서 중단된 속성들

폐지된 속성 적용된 요소

charset, rev, urn, methods link, a

shape, coords a

name a, embed, img, option(id 요소로 대체)

accept form(input 요소에 직접 accept 속성 사용)

nohref area

profile head

version html

ismap, usemap input,

lowsrc img

target link

scheme meta

archive, classid, code, codebase, codetype, declare, standby

object

type, valuetype param

language, event, for script

datapagesize, summary table

47

CHAPTER


axis td, th

scope td

datasrca, applet, button, div, frame, iframe, img, input, label, legend, marquee, object, option, select, span, table, textarea

dataflda, applet, button, div, fieldset, frame, iframe, img, input, label, legend, marquee, object, param, select, span, textarea

dataformatasbutton, div, input, label, legend, marquee, object, option, select, span, table 요소들

alink, link, vlink, bgcolor, text, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth

body

char, charoff, valign, width col

clear br

compact dl, ol, ul

type li, ul

char, charoff tbody, thead, tfoot, td, th, tr

hspace, vspace embed, iframe, input, img, object

color, noshade, size, width hr

allowtransparency, frameborder, marginheight, marginwidth, scrolling

iframe

border object, img,

width col,, hr, table, td, th, pre

bgcolor, bordercolor, cellpadding, cellspacing, frame, rules

table

aligncaption, col, div, embed, hr, iframe, h1~h6, input, img, object, legend, table, p, tbody, thead, tfoot, td, th, tr

valign tbody, thead, tfoot, th, td, tr

bgcolor table, tr, td, th, body

background body, table, thead, tbody, tfoot, tr, td, th

height, nowrap td, th

rules table

국립중앙도서관 출판시도서목록(cip)†이... · 2015-10-01 · html이라는 마크업...

Documents