세르게이의 HTML5&CSS3-내지_ indd

Size: px

Start display at page:

Download "세르게이의 HTML5&CSS3-내지_ indd"

준유 은
6 years ago
Views:

1 HTML CSS CHAPTER_1 HTML5 소개

2 둘러보기이책에대하여 HTML이란무엇인가? 주요 HTML 버전 HTML5 XHTML5 CSS3 왜 HTML5 를사용해야하는가? HTML5 의장점 누구를위한책인가? HTML5 브랜드정책 로고 기술클래스아이콘

3 둘러보기 이책에대하여 HTML과 CSS는웹언어로서는가장기초이자기본적인것들이며, 무수히많은웹사이트와웹애플리케이션을구현하기위한기초를제공한다. HTML5는플러그인없는풍부한인터넷애플리케이션기능, 손쉬운개발및향상된사용자경험을제공하는웹의미래로서자리를잡아가고있다. 현재에도웹을통해레퍼런스, 튜토리얼, 팁등 HTML5에대한풍부한정보들을얻을수있다. 또한 HTML5의특정기능에중점을둔몇가지훌륭한서적들도이미출간된상태이다. 그러나이러한정보들을상대적으로간략하게요약한, 한손에들수있을정도의레퍼런스형태의책이필요한것도사실이다. 이책은전문웹디자이너와개발자를위한기본적인기술사전으로서 3천페이지가넘는 (X)HTML5와 CSS3 명세를보기편하게요약하며, 대부분의기본컨셉과태그, 값, 객체, 속성, 메서드, 이벤트및 API를포함한명세들을포함하고있다. 주제는다음과같다. HTML5 소개 HTML5과 XTML5 문법규칙 문서의미적구조 HTML5 요소와특성요약 HTML5 폼 글로벌특성과이벤트 CSS3 속성요약 캔버스, SVG, 비디오, 오디오, 웹작업자 Web Worker, 웹소켓 Web Sockets, 마이크로데이터, 지오로케이션 Geolocation, 웹저장소등을비롯한 HTML5 API들필자의목표는간결하고, 단순하며, 읽기쉽고, 잘구조화되어있지만포괄적인레퍼런스를만드는것이다. 12 세르게이의 HTML5 & CSS3 퀵레퍼런스

4 HTML 이란무엇인가? HTML 이라는머리글자는 HyperText Markup Language 의약자이다. 우선이언어는월드와이드웹을위한마크업언어이며, 제목이나문단, 표, 꼬리글 Footer 및기타요소를이용하여콘텐츠의구조를정의함으로써웹문서를만드는기능을제공한다. HTML 마크업은주로 CSS Cascading Style Sheet` 를활용하여콘텐츠의시각적특성들을기술한다. CSS를이용하면문서의 HTML 콘텐츠를레이아웃, 색상및글꼴과같은시각적특성들과분리할수있다. HTML은이미지, 비디오, 오디오및각종객체들을포함할수있을뿐아니라상호작용이가능한양식을구현할수도있다. HTML 코드는웹페이지의동적동작을구현하기위해자바스크립트와같은스크립트코드를포함할수도있다. 주요 HTML 버전 첫번째 HTML 문서는 1991 년버너스리 Berners-Lee 에의해 HTML 태그 라고불렸다. W3C World Wide Web Consortium 권고안으로서 1997년 HTML 4.0이등장했으며, Trnasitional, Strict 및 Frameset 등세가지형태로제공되었다. 보다제한된형태의 HTML 마크업인 XHTML 1.0이 2000년에서 2002년사이에등장했다. 이규약은 XML 문법의요구사항을따른다 년부터 2006년사이에 XHTML 2.0의작업초안버전이발표되었다. 이표준의목적은기존버전을근본적으로수정하기위한것이었지만하위호환성을희생해야만했다. 나중에 W3C는이초안을표준으로제정하기위한개발과정을중단했으며, 보다유연한 HTML5 표준을지지하게된다 년 W3C는 HTML5의첫번째공식초안을발표한다. XHTML5는 2009년부터아직개발중이다. HTML5 HTML5의개발은 2004년애플컴퓨터 Apple Computer, 모질라재단 Mozilla Foundation 및오페라소프트웨어 Opera Software 의전문가들이 WHATWG Web Hypertext Application Technology Working Group 라는이름의비공식그룹을창설하면서시작되었다. 구글 Google 의이안힉슨 Ian Hickson 이 HTML5 명세의선임 작성자이다. WHATWG HTML5 명세는결국 2007년 W3C로편입되었다. HTML5 마크업은 XHTML2.0 보다는 HTML4와 XHTML1.0 과의하위호환성을더많이고려하고있다. CHAPTER 1 _ HTML5 소개 13

5 HTML5는일반적인 HTML 요소들을대체할보다의미있는새로운요소들을대거정의하였다. 예를들어 <header>, <footer>, <section>, <nav>, <article> 처럼레이아웃과관련된요소들이새롭게정의되었다. 또한 HTML4에서정의했던많은요소들을비추천 Deprecated 요소로정의하고있다. HTML5는표준화된비디오및오디오인터페이스, 이미지의래스터화, 로컬데이터베이스, 오프라인모드, 더욱효과적인멀티스레드기반의자바스크립트, 문서간메시징 Cross Document Messaging 등을비롯한여러기능을플러그인없이도실행할수있는기능을제공한다. XHTML5 XHTML5는 HTML5의 XML 버전이다. XHTML5 문서는 application/xhtml+xml 처럼 XML MIME 타입을사용한다. 또한 XHTML5는잘정의된 (Well-formed, 역주잘정의된 XML이란문서의구조를구성하는 DTD나 XML 스키마가존재하지않더라도 XML 파서가문서를파싱하는데아무런문제가없도록구성된 XML 문서를의미한다 ) 문법을강력하게요구한다. XHTML5 문서에서 HTML5 문서타입선언은선택적이며생략이가능하다. XHTML5는 SVG나 MathML과같은 XML 기반기술에 HTML5의특성을도입할때활용될수있을것이다. CSS3 CSS 역시새로운버전이정의되었으며, 더욱뛰어난확장성을제공하는검증된모듈들이제공된다. CSS3에서는상당히많은새로운기능들이추가되었다. 특성과특성값이일치하거나, 구조적인의사클래스 Pseudo-Classes, URL에명시된대상에만스타일을지정하는대상의사클래스, 라디오버튼이나체크박스요소등체크가가능한요소에적용될스타일을지정하는체크의사클래스등다양한방법으로요소들을선택할수있는방법을제공한다. 텍스트효과는물론자동하이픈, 공백및텍스트양쪽정렬 Justification 과같은레이아웃효과들이추가되었다. 미디어의페이징 Paging 과자동생성콘텐츠를통해머리글과꼬리글, 페이지번호, 각주및상호참조등다양한옵션들을제공한다. 다중컬럼레이아웃속성을통해여러행을가진레이아웃을지원한다. 첫글자및첫문단을표현하는의사클래스를지원한다. 아시아국가를위해단어의상단이나옆에작은주석을추가할수있는루비모듈을지원한다. 14 세르게이의 HTML5 & CSS3 퀵레퍼런스

6 왜 HTML5 를사용해야하는가? HTML5 의장점 하위호환성 : HTML5는기존의모든문서타입을래핑한다. 간단한문법 : 의미적요소들이강화되었으며, 생산성이향상된코딩을지원하며, 문서의크기가작다. 디자인과개발을더욱유연하게도와주는새로운요소와특성들을제공한다. 플러그인없이도비디오와오디오를비롯한미디어를재생할수있다. 스마트웹폼 2.0 기능 (HTML5는웹폼 2.0을대체한다 ) text/html MIME 타입을사용하면서도 SVG 및 MathML을인-라인 In-line 으로활용할수있는기능을제공한다. 플러그인이필요없는스크립트 API를 20여종이상지원하며, 주요 API는다음과같다. 2D 그래픽을위한캔버스요소 문서편집 드래그-앤-드롭 지오로케이션 로컬오프라인저장소 미디어캡처 마이크로데이터 핵심정리 : 쉬운개발과향상된사용자경험을제공한다. 누구를위한책인가? 다음의도식은제스개럿 Jesse Garrett ( 역주 Adaptive Path사의 CEO, Ajax라는개념을처음으로웹에공개한주인공이다 ) 의사용자경험을위한요소다이어그램을참고한것이다. 이도식은전형적인웹애플리케이션개발사이클과그에참여하는다양한역할들, 그리고이들이 HTML5및 CSS3에대한지식과기술을사용했을때의이점등을표시한것이다. HTML과 CSS에익숙하며, 웹사이트 / 웹애플리케이션개발에관심이있는사람이라면이책을통해디자인과사용자경험이슈에대한여러이점을얻을수있다. CHAPTER 1 _ HTML5 소개 15

7 웹애플리케이션개발주기 요소 단계 역할 최종사용자 교육 교육, 온라인도움말 교육 온라인학습디자이너, 학습분석가 검증 품질검증 테스트 QA 분석가, UAT 실제구현 UI/ 애플리케이션디자인 / 개발 애플리케이션디자인, 프론트엔드코드, 애플리케이션코드 소프트웨어아키텍트, 프론트엔드 UI 개발자, 애플리케이션개발자 뼈대구현 룩앤드필 구조 사용자인터페이스아키텍처 시각디자인, 브랜드마케팅 정보아키텍처 DHTML 프로토타입 ( 개발자가재사용가능 ) 룩앤드필컨셉, 하이파이프로토타입 분류체계, 와이어프레임, 클릭가능한프로토타입, 사용성테스트 인터페이스디자이너 / UI 아키텍트 크리에이티브디자이너, 아트디렉터 UX/ 정보아키텍트 인터렉티브크리에이티브디렉터 범위 기능명세 유스케이스문서, 데이터명세 비즈니스시스템분석가 전략 목적 고수준요구사항 제품관리자 고객 HTML5 브랜드정책 2011 년 1 월 18 일, W3C 는 HTML5 의시각적브랜드정책을발표했다. 여기에는최신웹 애플리케이션과웹사이트를표현하기위한로고와기술클래스아이콘등이포함되어있다. 로고, Creative Commons Attribution 3.0 Unported 아이콘및웹사이트는모두크리에이티브커먼즈어트리뷰션 3.0 포팅불가라이선스가적용되어있다. W3C는 HTML5 기술을이용하여개발된웹사이트 / 애플리케이션이이를알릴수있도록시각적브랜드정책을사용할것을권하고있다. HTML5의로고는 에서다운로드할수있다. 16 세르게이의 HTML5 & CSS3 퀵레퍼런스

8 로고 HTML5 로고는코드의유효성이나적합성을암시하지는않는다. 기술클래스아이콘 시맨틱 구조에의미를부여하는시맨틱은 HTML5 의중심이다. RDF, 마이크로데이터및마이크로포맷과 더불어풍부한태그들은프로그램은물론사용자에게보다유용하며, 데이터중심의웹을제공할수있다. 오프라인과저장소 웹캐시를비롯하여로컬저장소, 인덱스 DB 및파일 API 명세등 HTML5가제공하는 API 덕분에웹애플리케이션은더빨리시작할수있으며, 심지어인터넷연결이없는곳에서도동작할수있다. CHAPTER 1 _ HTML5 소개 17

9 기기에대한접근 웹애플리케이션은지오로케이션 Geolocation API 를비롯하여마이크나카메라같은오디오비디오 입력에대한접근은물론주소록, 이벤트및기울임방향등모바일기기에특화된더풍부한기능과경험을제공할수있게되었다. 연결성 보다효율적인연결성은보다실시간에가까운채팅, 더빠른게임및발전된커뮤니케이션등을의미한다. 웹소켓과서버측이벤트를통해지금까지보다훨씬효율적으로클라이언트와서버간데이터전달이가능하다. 멀티미디어 HTML5 는 <audio> 와 <video> 요소와같은요소들을통해 HTML 문서내에손쉽게미디어를 포함하는방법을제공함으로써플러그인이나외부플레이어에의존하지않고미디어를지원할수있는기능을내장하고있다. 3D, 그래픽및효과 SVG, 캔버스, WebGL 및 CSS3 3D 기능을통해브라우저에직접렌더링되는놀라운시각효과를 사용자에게제공할수있다. 18 세르게이의 HTML5 & CSS3 퀵레퍼런스

10 성능과통합 웹작업자와 XMLHttpRequest2 와같은다양한기법과기술을이용하여웹애플리케이션과동적 웹콘텐츠가더빨리동작하도록만들수있어, 이로인해사용자가기다리는시간을줄일수있다. CSS3 CSS3 는개발자가의도한구조나성능에영향을주지않으면서도폭넓은스타일링과효과를 지원한다. 게다가웹공개글꼴형식 WOFF: Web Open Font Format 을통해유연한글꼴을제공하며, 지금까지와는차원이다른글꼴제어를가능하게한다. CHAPTER 1 _ HTML5 소개 19

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년