JANGUN


HTML5


이관용



목차

제1장 HTML5 개요
제2장 HTML5 요소
제3장 폼, 드래깅, 링크 표현
제4장 CSS 기본 및 선택자
제5장 CSS 색상 및 글꼴
제6장 CSS 텍스트 조작 및 장식
제7장 CSS 레이아웃
제8장 CSS 고급 기능
제9장 캔버스 구성 및 드로잉
제10장 오디오와 비디오
제11장 HTML5 API : 오프라인 웹, 파일접근, 웹 스토리지, 웹 워커, 웹 소켓, 위치 정보


제1장 HTML5 개요

(1) HTML5 (HyperText Markup Language)
- 마크업(태그) : 문서의 구조와 내용에 추가적인 정보를 부여하기 위해 삽입되는 일련의 문자 또는 기호
- 마크업의 형식과 규칙을 정의한 언어 : 문서 내용 자체에 대한 정보가 아닌 이들이 어떻게 배치되고 어떠한 크기와 모양 등을 가지는 지에 대한 정보를 표현
- 참조 싸이트 : http://www.w3.org http://wahtwg.org http://html5test.com
- 목적: 기존 HTML의 호환성을 유지하면서 웹 개발자들이 웹 애플리케이션을 개발하면서 부딪치는 한계점 해결
- 현재 사용되고 있는 W3C 표준인 HTML 4.01을 대폭 개선시킨 마크업 언어로서, 단순 텍스트와 하이퍼링크만 표시하던 HTML이 복잡한 애플리케이션까지 제공할 수 있는 웹 애플리케이션 플랫폼으로 진화한 형태
- 웹 표준 기구인 W3C에서 만들고 있는 차세대 웹 표준안으로서, 마이크로소프트, 모질라, 애플, 구글, 오페라 등 주요 웹 브라우저 벤더가 참여하고 있는 산업 표준
- 통칭하는 HTML5 ~ HTML(문서의 내용 및 태그) + CSS3 (디자인) + JavaScript (동작)
- 주요 기능 - web form, offline web, web database, web storage, video, audio, canvas, SVG, geolocation, web worker, web socket, CSS3


(2) HTML5의 특징
- 웹 애플리케이션 개발을 위한 플랫폼: 웹 문서 뿐만 아니라 웹 애플리케이션도 만들 수 있는 플랫폼
- 시맨틱 웹: 단지 표현을 위한 수단이 아닌 의미 있는 구조의 문서 작성을 위한 태그들이 추가됨
- 웹 표준화: 어떤 브라우저에서든 누구든 정상적으로 사이트를 이용할 수 있도록 웹 표준이 준수되어야 함


(3) HTML5 문서의 기본 구조
- HTML 문서의 구성 요소 - 요소, 태그(시작태그, 종료태그), 속성, 속성값(변수)
- 문서의 기본 템플릿은 기존의 HTML/XHTML의 형식과 크게 다르지 않으며, 거의 완벽하게 호환템플릿은 기존의 HTML/XHTML의 형식과 크게 다르지 않으며, 거의 완벽하게 호환


(4) HTML5 콘텐츠 모델
- HTML5의 각 요소는 콘텐츠 유형에 따라 분류 가능하며, 한 요소는 반드시 한 분류에만 속하는 것이 아니라 조건에 따라 다른 분류에 속할 수도 있다.
- 유형 종류: metadata 콘텐츠, flow 콘텐츠, sectioning 콘텐츠, heading 콘텐츠, phrasing 콘텐츠, embedded 콘텐츠, interactive 콘텐츠, palpable 콘텐츠, script-supporting elements


제2장 HTML5 요소

(1) 레이아웃을 위한 시맨틱 요소
- header 머리말(로고, 사이트의 이름 등)을 나타내는 요소
- hgroup 제목과 부제목을 묶어주는 요소
- nav 네비게이션 메뉴 영역을 나타내는 요소
- article 개별 콘텐츠를 나타내는 요소
- section 주제별로 나눌 수 있는 문서의 내용 영역을 구성하는 요소
- aside 주요 콘텐츠와 크게 연관이 없는 콘텐츠를 좌우 사이드에 나타내는 요소
- footer 꼬리말(제작자 정보, 저작권 정보 등)을 나타내는 요소



(2) 그룹핑 콘텐츠 요소
- main body 영역의 주요 콘텐츠 블록을 그룹화할 때 사용
- figure 그림, 비디오 같은 콘텐츠들을 하나로 묶어서 블록으로 구성
- figcaption figure 요소에 대한 캡션(제목)을 표시
- ol (reversed 속성) li 요소들의 번호를 역순(낮은 차순)으로 출력

(3) 텍스트 레벨의 시맨틱 요소
- a (download 속성) href 속성에 지정된 파일을 직접 다운로드 할 수 있도록 지정
- a (ping 속성) 사용자가 클릭한 링크의 정보를 서버로 자동으로 송신
- strong 아주 중요하거나 심각하거나 긴급을 요하는 내용을 표시
- time 날짜와 시간 표현에 의미를 부여할 때 사용
- mark 시각적/의미적으로 특정 텍스트에 강조 효과를 부여할 때 사용
- ruby 하나 이상의 구문을 루비 주석으로 표시할 때 사용 (rt, rp, rb, rtc 요소와 함께 사용)
- bdi 방향이 다른 텍스트를 주위의 텍스트와 격리하기 위한 요소
- wbr 줄바꿈을 허용해도 괜찮은 지점을 표시할 때 사용

(4) 상호작용 요소
- details 사용자의 요청에 따라 상세 정보를 표시하거나 숨기는 형태의 상호작용을 지원
- summary details 요소에 대한 머리글을 지정
- menu 명령어들의 목록을 정의할 때 사용
- command 사용자가 호출할 수 있는 명령어를 표시
- dialog 대화상자와 같은 창을 통해 대화를 의미 있는 콘텐츠로 만들고자 할 때 사용

(5) HTML5에서 적용 의미가 변경된 요소
- b, i, cite, small, hr, address, s, a 등


제3장 폼, 드래깅, 링크 표현


(1) HTML5에서 추가된 폼 요소
- datalist input 요소의 list 속성과 함께 사용하여 입력 옵션 리스트를 생성
- keygen 안전한 데이터 송수신을 위한 암호 키(비밀키, 공개키)를 생성
- output 폼 내의 연산 결과를 출력
- progress 어떠한 작업의 완료 진행 상황을 표시
- meter 일정 범위 안의 측정 값이나 분포 비율 등을 나타낼 때 사용


(2) HTML5에서 추가된 폼 속성
- autocomplete input 요소의 자동 완성 상태를 지정
- novalidate 폼 제출시 입력 양식 데이터의 유효성을 검사하지 않도록 지정

(3) HTML5에서 추가된 input 요소의 입력 타입
- tel, search 전화번호와 검색어 입력
- url, email 절대경로의 URL 주소 입력과 이메일 주소 입력 (유효성 검사)
- number, range 지정된 특정 범위의 숫자만 입력 (range → 슬라이더 형태)
- color 색상 입력
- date, month, week, time,
- datetime, datetime-local 날짜와 시간 입력

(4) HTML5에서 추가된 input 요소의 속성
- required 필수 입력 항목을 지정
- minlength 입력 항목의 최소 입력 길이를 지정
- placeholder 입력 타입에 기본 텍스트(미리 참조할 문자열)를 지정
- multiple 하나 이상의 값을 지정할 수 있도록 지정
- min, max, step 요소에 허용된 범위의 최소값, 최대값과 유효 입력 간격을 지정
- list 미리 정의된 선택 항목을 갖고 있는 요소를 구분
- pattern 입력 값에 대한 유효성 검사를 위한 정규 표현식 지정
- autofocus 자동으로 지정한 입력 타입에 포커스를 위치시킴
- autocomplete 지정한 입력 항목의 값을 자동으로 완성
- form 해당 input 요소를 특정 form 요소와 연결시키기 위한 것

(5) 드래그 앤 드롭 : 드래그 속성 부여 → draggable ="true | false"
이벤트
- dragstart 드래그를 시작할 때 발생
- drag 드래그 중에 계속 발생
- dragend 드래그를 종료했을 때 발생
- dragenter 드래그 요소가 다른 요소 범위 안에 들어올 때 발생
- dragleave 드래그 요소가 요소를 벗어날 때 발생
- dragover 드래그 요소가 다른 요소 위에서 드래그하고 있을 때 또는 드롭 직전에 발생
- drop 드롭하였을 때 발생

dataTransfer 객체의 주요 속성과 메서드

메서드
- setData(format, data) 드래그를 시작할 때 데이터 보관, format의 종류: text, url
- getData(format) 드롭할 때 보관된 데이터를 가져옴
- setDrawImage(element, x,y) 드래그 도중에 표시할 사용자 이미지를 지정
- clearData([format]) 드래그 앤 드롭 도중에 특정 형식의 데이터 삭제

포인터 관련 속성
- effectAllowed 드래그하는 동안 허용할 효과를 지정 (none, copy, link, move, copyMove, copyLink, linkMove, all, uninitialized)
- dropEffect 드래그가 끝날 때 어떤 효과를 사용할지 지정 (none, copy, link, move)

(6) 텍스트 편집
- 문서의 특정 요소에 대한 편집 속성 부여 → contenteditable = “true” | “false”
- 문서 전체에 대한 편집 속성 부여 → document.designMode = “on” | “off”
- 텍스트 편집 메서드 텍스트 편집 메서드 → execCommand(commandId, showUI, value)
- commandId 값 : bold, createLink, delete, formatBlock, forwardDelete, insertImage, insrtHTML, insertLineBreak, insertOrderedList, insertUnorderedList, insertParagraph, insertText, italic, redo, selectAll, subscript, superscript, undo, unlink, unselected


제4장 CSS 기본 및 선택자

(1) CSS 사용의 장점
- 웹 문서의 내용과 디자인의 분리
- 다양한 기능의 확장
- 통일된 문서 양식 제공
- 로딩 시간 단축

(2) CSS 적용 방식
- 인라인 스타일 (“인라인 방식”) : HTML 문서의 각 요소에 직접 style 속성을 사용해서 적용
- 스타일 요소 사용 (“임베디드 방식”) : HTML 문서의 head 요소 안에 style 요소를 사용해서 적용
- 외부 파일 연결 (“링크 방식”) :HTML 문서와는 별도로 스타일만 지정한 CSS 파일(*.css)을 만들어 link 요소를 통해 연결시켜 적용

(3) CSS 단순 선택자의 종류
- CSS2 / * / 전체 선택자 / 모든 요소에 스타일 적용
- CSS1 / 요소 / 형식 선택자 / 지정한 요소에만 스타일 적용
- CSS1 / 요소.클래스명 / .클래스명 / 클래스 선택자 / class=“클래스명” 속성을 사용한 요소에 스타일 적용
- CSS1 / 요소#아이디명 / #아이디명 / 아이디 선택자 / id=“아이디명” 속성을 사용한 요소에 스타일 적용
- CSS2 / 요소[속성] / 속성 선택자 / 지정한 속성 표현에 해당하는 요소에 적용

(4) 속성 선택자의 연산자 종류
CSS2
- 요소[속성] / 속성 값과 상관없이 해당 속성을 사용하는 요소를 선택
- 요소[속성=값] / 속성 값과 일치하는 요소를 선택
- 요소[속성~=값] / 속성 값을 공백으로 구분한 요소를 선택
- 요소[속성|=값 / 속성 값이 정확히 일치하거나 값으로 시작하고 바로 뒤에 - 기호로 구분한 요소를 선택
CSS3
- 요소[속성^=값] / 속성 값의 시작 부분의 문자와 일치하는 요소를 선택
- 요소[속성$=값] / 속성 값의 끝 부분의 문자와 일치하는 요소를 선택
- 요소[속성*=값] / 속성 값 전체 중 어떤 일부분이라도 일치하는 요소를 선택

(5) 가상 선택자
- E:link 아직 방문한 적이 없는 링크를 표현
- E:visited 방문한 적이 있는 링크를 표현
- E:hover 마우스를 특정 요소에 올려놓았을 때 적용
- E:active 마우스를 눌렀다 놓은 순간에 적용
- E:focus 특정 요소에 초점이 있는 동안 적용
- E:target 동일한 문서 안에서 이동되는 앵커 목적지 요소에 적용
- E:lang(language) 지정된 요소 중에서 language로 지정된 언어로 시작하는 요소에 적용
- E:enabled 활성화된 상태의 요소에 적용
- E:disabled 비활성화된 상태의 요소에 적용
- E:checked 선택된 상태의 라디오 버튼과 체크박스 요소에 적용
- E:not(X) 단순 선택자 X(가상 요소, :not(:not(…)) 제외)로 표현되지 않은 특정 요소에 적용
- E:root 웹 문서 안의 최상위 요소(루트)를 선택
- E:nth-child(an+b) 동일한 부모 요소 안에서 n번째에 있는 자식 요소를 선택
- E:nth-last-child(an+b) 동일한 부모 요소 안에서 끝에서 n번째에 있는 자식 요소를 선택
- E:first-child 다른 일부 요소의 첫 번째 자식 요소를 선택
- E:last-child 다른 일부 요소의 마지막 자식 요소를 선택
- E:nth-of-type(an+b) 동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 n번째 요소를 선택
- E:nth-of-last-type(an+b) 동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 끝에서 n번째 요소를 선택
- E:first-of-type 동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 첫 번째 요소를 선택
- E:last-of-type 동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소만을 계산하여 마지막 요소를 선택
- E:only-child 부모 요소 안에서 자식 요소가 유일하게 하나일 때 선택
- E:only-of-type 동일한 부모 요소 안의 형제 요소들 중에서 지정한 요소가 유일하게 하나일 때 선택
- E:empty 자식(텍스트가 아닌)이 없는 요소를 선택
- E::first-line 특정 요소를 사용하는 문단의 첫 번째 줄의 텍스트를 선택
- E::first-letter 문자열에서 다른 내용(이미지, 인라인 테이블 등)이 앞에 오지 않는 경우 특정 요소의 첫 번째 글자를 선택
- E::before 요소 내용의 앞에 생성되는 내용의 스타일을 지정
- E::after 요소 내용의 뒤에 생성되는 내용의 스타일을 지정

(6) 조합자의 종류
- CSS1 / 선택자1 선택자2 / 하위 조합자 / 선택자1의 하위 요소 중에서 선택자2에 해당하는 모든 요소를 선택
- CSS2 / 선택자1 > 선택자2 / 자식 조합자 / 선택자1을 부모 요소로 하여 직계 자식 요소 선택자2를 선택
- CSS2 / 선택자1 + 선택자2 / 인접 형제 조합자 / 선택자1의 바로 뒤에 오는 동생인 선택자2 요소만을 선택
- CSS3 / 선택자1 ~ 선택자2 / 일반 형제 조합자 / 선택자1 다음에 오는 형제 관계의 모든 선택자2 요소들을 선택
- CSS1 / 선택자1, 선택자2 / 그룹 조합자 / 여러 선택자가 동일한 선언을 공유하는 경우에 한 번에 묶어서 정의할 때 사용


제5장 CSS 색상 및 글꼴

(1) 색 모델과 색상 지정 방법
- RGB 색 모델 → #rrggbb (또는 #rgb), rgb(), rgba() (여기서, a(alpha)는 투명도 0.0~1.0)
- HSL 색 모델 → hsl(), hsla() (여기서, a(alpha)는 투명도 0.0~1.0)
- 기타 색상 지정 방법 → 영문 색상 키워드 사용, 브라우저에서 정의된 시스템 색상 키워드 사용

(2) color 속성과 opacity 속성
- color 속성 → HTML 요소의 텍스트 등의 색상 지정
- opacity 속성 → 투명도 지정

(3) 그라데이션 효과 지정
- 선형 그라데이션 → linear-gradient(), repeating-linear-gradient()
- 원형 그라데이션 → radial-gradient(), repeating-linear-gradient()

(4) 기본 글꼴 스타일(CSS1/CSS2)
- font-family (글꼴 종류) family-name → 굴림체, 궁서체, ‘Times New Roman’, … generic-family → serif, sans-serif, cursive, fantasy, monospace
- font-size (글자 크기) 절대 단위(pt, pc, cm, mm, in), 상대 단위(px, em, ex, %) xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
- font-style (글자 기울어짐) normal, italic, oblique
- font-variant (작은 대문자로 변환) normal, small-caps
- font-weight (글자 굵기) 100, 200, …, 400, …, 800, 900, normal(=400), bold(=700) bolder, lighter
- Font (스타일의 일괄 지정) 지정 형식: [ font-style || font-variant || font-weight ]?font-size [/line-height]? font-family

(5) CSS3에서 추가된 글꼴 스타일
- @font-face (사용자 글꼴) 외부 글꼴 지정 font-family, src, font-stretch, font-style, font-weight, unicode-range
- font-size-adjust(글꼴 크기 조정) 글꼴의 기본 크기 조정 none, 'number', inherit
- font-stretch (글꼴 늘림) 텍스트의 글꼴 늘림(가로 폭) 지정 wider, narrower, normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
- font-synthesis (글꼴 합성) 텍스트의 굵은 글꼴이나 기울어진 글꼴의 합성 여부 지정 none, weight, style

(6) CSS3에서 확장된 글꼴 기능 관련 속성
- font-kerning, font-feature-setting, font-language-override
- 다양한 font-variant의 하위 속성 → font-variant-ligatures, font-variant-position, font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-east-asian


제6장 CSS 텍스트 조작 및 장식

(1) 쓰기 모드 관련 속성
- direction 텍스트의 가로 쓰기의 방향 지정
- unicode-bidi 동일 문서에서 여러 언어를 지원하기 위해 텍스트의 본래 방향성을 재정의
- writing-mode 블록의 진행 방향과 텍스트의 진행 방향이 가로인지 세로인지를 지정
- text-orientation 라인의 텍스트 방향 지정(세로 방향 쓰기 모드에서만 적용 가능)
- text-combine-upright 단일 문자 공간에서 여러 문자들의 결합을 지정(세로 쓰기 모드에서만 적용 가능)

(2) 텍스트 조작 관련 속성
- text-transform 영어 알파벳 표기 방식 지정
- white-space 요소 내의 공백 문자의 처리 방법 지정
- tab-size 탭 크기 지정
- line-break 줄바꿈 규칙 지정
- word-break 단어의 줄바꿈 규칙 지정
- hyphens 단어가 줄바꿈으로 인해 분리될 때 하이픈 삽입 여부 지정
- overflow-wrap/ word-wrap 긴 단어가 요소의 폭을 넘을 경우 어떻게 단어를 분리할 지를 지정
- text-align 텍스트의 수평 정렬 방식 지정
- text-align-last “text-align: justify”일 때 텍스트의 마지막 줄의 정렬 방식 지정
- text-justify “text-align: justify”일 때 텍스트 양쪽 맞춤의 처리 방법 지정
- letter-spacing 글자 간격 지정
- word-spacing 단어 간격 지정
- text-indent 텍스트 들여쓰기 간격 지정
- hanging-punctuation 문장부호(구두점)의 위치 조정
- line-height 줄 간격 지정

(3) 텍스트 장식 관련 속성
라인 장식
- text-decoration-line 텍스트 장식(밑줄, 윗줄, 취소선) 지정
- text-decoration-color 텍스트 장식의 색상 지정
- text-decoration-style 텍스트 장식의 스타일(단일선, 이중선 등) 지정
- text-decoration-skip 텍스트 장식을 받지 않아야 하는 부분 지정
- text-decoration 텍스트 장식의 일괄 지정
- text-underline-position 텍스트의 밑줄의 위치 지정
강조 표시
- text-emphasis-style 지정된 텍스트에 강조 표시의 스타일 지정
- text-emphasis-color 텍스트에 지정한 강조 표시의 색상 지정
- text-emphasis-position 텍스트에 지정한 강조 표시의 위치 지정
- text-emphasis 텍스트의 강조 표시의 일괄 지정
그림자 효과
- text-shadow 텍스트에 그림자 효과 지정


제7장 CSS 레이아웃

(1) 박스 모델
- display HTML 요소의 표현 방식(박스 종류) 지정 inline | block | inline-block | list-item | none 등
- margin 박스의 외부 여백(박스의 테두리 선 밖의 여백) 지정 <length> | '%' | auto
- padding 내용 영역과 테두리 사이의 여백 지정 'length' | '%'
- width, height 박스의 폭과 높이 지정 'length' | '%' | auto
- min-width, min-height, max-width, max-height 특정 요소에 대한 콘텐츠의 최소 또는 최대 폭과 높이를 지정 'length' | '%'
- float 부모 요소 영역을 기준으로 왼쪽 또는 오른쪽에 배치하도록 지정 none | left | right
- clear float 속성에 의해 영향을 받은 요소의 흐름을 해제하도록 지정하여 바로 아래쪽에 배치시킴 none | left | right | both
- overflow 요소의 내용이 해당 요소의 영역을 벗어나는 것을 지정 visible | hidden | scroll | auto 등
- overflow-style 요소의 영역을 벗어난 영역의 스크롤 방법을 지정 auto | scrollbar | panner | move | marquee
- visibility 요소에 의해 만들어진 박스를 화면에 표시할 지를 지정 visible | hidden | collapse
- rotation, rotation-point 지정된 점(rotation-point)을 중심으로 반 시계 방향으로 주어진 각도(rotation) 만큼 회전


(2) 레이아웃 위치 지정
- position 요소 박스의 배치 방식을 지정 static | relative | absolute | fixed 등
- top, left, bottom, right 박스의 포함 블록의 각 모서리를 기준으로 해당 요소가 떨어져 있는 거리를 지정 auto | 'length' | '%'
- z-index 요소가 겹쳐지는 순서를 지정 정수값

(3) 배경 관련 속성
- background-color 배경 색상 지정 transparent | 'color'
- background-image 배경 이미지 지정 url(이미지경로)
- background-repeat 배경 이미지의 반복 여부 지정 no-repeat | repeat-x | repeat-y | repeat | space | round
- background-position 배경 이미지 위치 지정 'length' | '%' | left/center/right/top/bottom
- background-attachment 배경 이미지의 고정 여부를 지정 scroll | fixed | local
- background background-* 속성의 일괄 지정
- background-clip 배경 속성이 적용되는 영역 지정 border-box | padding-box | content-box
- background-origin 배경 이미지가 시작되는 기준 위치를 지정 border-box | padding-box | content-box
- background-size 배경 이미지의 크기 지정 auto | 'length' | '%' | cover | contain

(4) 테두리 관련 속성
테두리 지정
- border-color 박스 테두리의 색상 지정
- border-style 박스 테두리의 스타일 지정 none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
- border-width 박스 테두리의 굵기 지정 'length' | thin | medium | thick
- border 테두리 관련 속성의 일괄 지정
- text-emphasis-style 박스의 각 모서리를 둥글게 지정 'length' | '%'

테두리 이미지
- border-image 테두리 이미지 관련 속성의 일괄 지정
- border-image-source 테두리에 표시될 이미지 지정 url(이미지경로)
- border-image-slice 테두리 영역에 보여질 이미지의 크기 지정 '픽셀수' | '%'
- border-image-width 이미지 표시 영역의 길이 지정 '픽셀수' | '%' | 'number' | auto
- border-image-outset 이미지가 테두리 영역을 벗어나 박스 외부에 표시되는 확장된 영역 지정 '픽셀수' | 'number'
- border-image-repeat 테두리 이미지가 반복되는 스타일 지정 stretch | repeat | round | space
- box-shadow 박스의 그림자 스타일 지정 inset? && h-pos v-pos [흐림반경] [퍼진거리] && 'color'?


제8장 CSS 고급 기능

(1) 유연한 박스 레이아웃
- flex-direction 플렉스 항목의 배치 방법 지정 row | row-reverse | column | column-reverse
- flex-wrap 플렉스 항목이 컨테이너에서 사용 가능한 공간을 기준으로 여러 줄에 줄바꿈 될지를 지정 nowrap | wrap | wrap-reverse
- flex-flow flex-direction과 flex-wrap 속성의 일괄 지정
- order 플렉스 항목이 배치되는 순서 지정 (정수값, 0)
- flex-grow 플렉스 항목의 폭의 확대 비율 지정 (정수값, 0)
- flex-shrink 플렉스 항목의 폭의 축소 비율 지정 (정수값, 1)
- flex-basis 플렉스 항목의 기준 폭 지정 auto | 'width'
- flex flex-grow, flex-shrink, flex-basis 속성의 일괄 지정
- justify-content 기본 축을 따라 플렉스 항목의 정렬 방법 지정 flex-start | flex-end | center | space-between | space-around
- align-content 교차 축을 따라서 플렉스 컨테이너 줄의 정렬 방법 지정 flex-start | flex-end | center | space-between | space-around | stretch
- align-items 항목을 세로 방향으로 정렬할 때 전체 항목을 동일한 기준 축으로 지정 stretch | flex-start | flex-end | center | baseline
- align-self 플렉스 항목마다 정렬 기준 축을 별도로 지정 auto | stretch | flex-start | flex-end | center | baseline

(2) 그리드 레이아웃
그리드 레이아웃 생성 관련 속성
grid
- grid-template
-- grid-template-columns 그리드의 열의 크기 지정
-- grid-template-rows 그리드의 행의 크기 지정
-- grid-template-areas 특정 그리드 항목과 관련되지 않은 그리드 영역에 이름 지정
- grid-auto-flow 그리드 항목의 자동 배치 지정
- grid-auto-columns 묵시적으로 생성된 그리드 트랙의 크기 표시
- grid-auto-rows 묵시적으로 생성된 그리드 트랙의 크기 표시

그리드 항목 배치 관련 속성
grid-area
- grid-column
-- grid-column-start 그리드 라인과 확장 또는 자동 배치를 통한 그리드 내에서
-- grid-column-end 그리드 항목의 크기와 위치 지정
- grid-row
-- grid-row-start
-- grid-row-end

(3) 사용자 인터페이스
- content 가상요소 ::before와 ::after를 이용하여 특정 요소의 앞이나 뒤에 콘텐츠를 추가할 수 있도록 지정 'string' | url() | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote
- box-sizing 해당 요소의 박스 크기를 결정하는 방식 지정 content-box | border-box

박스 윤곽선
- outline-color 색상 지정 'color' | invert
- outline-style 모양(스타일) 지정 auto | 'border-style 속성값'
- outline-width 굵기 지정 'length' | thin | medium | thick
- outline outline-color, outline-style, outline-width의 일괄 지정
- outline-offset 요소 박스의 외부 영역과 윤곽선 사이의 간격 지정

- resize 사용자로 하여금 요소 박스의 크기 조정 여부 지정 none | both | horizontal | vertical
- text-overflow 요소 박스 내의 텍스트가 박스 영역에서 벗어났을 때의 표시 방식 지정 clip | ellipsis
- cursor 요소의 테두리, 패딩, 그리고 콘텐츠 위에 있을 때 표시될 커서 모양 지정 auto, default, wait, help, pointer, progress 등

(4) 다단 레이아웃
- columns column-width 단의 폭 지정
- column-count 단의 개수 지정
- column-gap 단과 단 사이의 간격 지정
- column-rule column-rule-color 단과 단 사이의 구분선의 색상 지정
- column-rule-width 단 구분선의 굵기 지정
- column-rule-style 단 구분선의 형태(스타일) 지정
- column-span 다단을 구성할 때 해당 요소가 얼마나 많은 단을 차지하는 지를 지정
- column-fill 단 길이의 차이를 최소화할지 여부를 지정

(5) 변형
- transform: translate() 요소 박스를 지정한 거리만큼 이동시킴 transform: scale() 요소 박스를 지정한 크기만큼 확대/축소시킴
- transform: rotate() 요소 박스를 지정한 각도만큼 회전시킴 transform: skew() 요소 박스를 지정한 각도만큼 기울임
- transform: matrix() 이동, 크기 변환, 기울임의 2D 변환을 일괄 지정 transform-origin 요소 박스의 변형 기준점 지정
- transform-style 3D 공간에서 변형이 적용된 좌표를 하위 요소에게 전달할지 여부를 지정
- perspective 3차원 공간에서 해당 요소와 관측점과의 거리를 조절해서 원근감을 지정
- perspective-origin 3차원 공간에서 원근감의 방향을 지정 backface-visibility 요소의 뒷면의 표시 여부를 지정

(6) 트랜지션
- transition transition-property 변화시킬 속성의 이름을 지정 transition-duration 트랜지션이 진행되는 시간을 지정
- transition-timing-function 트랜지션이 진행되는 속도의 형태를 지정 transition-delay 트랜지션이 시작되기 전의 지연 시간 지정

(7) 마키
마키 스크롤 지정
- overflow-style 속성 값 marquee-line 또는 marquee-block을 사용해서 마키 스크롤 방법을 지정
- marquee-style 요소 내용이 스크롤링 되는 형태 지정
- marquee-play-count 요소 내용의 움직임 횟수 지정
- marquee-direction 요소 내용의 움직이는 방향 지정
- marquee-speed 요소 내용의 움직임 속도 지정

(8) 애니메이션
애니메이션 관련 속성
- animation animation-name 키 프레임의 이름을 지정
- animation-duration 애니메이션의 진행 시간 지정
- animation-timing-function 애니메이션 진행 속도의 변화를 지정
- animation-iteration-count 애니메이션의 반복 횟수 지정
- animation-direction 키 프레임의 진행 방향 지정
- animation-play-state 애니메이션의 진행 또는 일시 정지 지정
- animation-delay 애니메이션 시작 시의 지연 시간을 지정
- animation-fill-mode 실행 이전/이후에 애니메이션 효과 표시 여부 지정

(9) 미디어 쿼리
- 문법 → @media [not/only] 미디어타입 [ and (미디어기능) ]* - 콤마로 구분하여 미디어 쿼리의 결합이 가능
- 미디어타입의 종류 → all, screen, print 등
- 미디어 기능의 종류 : width(min-,max-), height(min-,max-), device-width(min-,max-), device-height(min-,max-), orientation, aspect-ratio(min-,max-), device-aspect-ratio(min-,max-), color(min-,max-), color-index(min-,max-), resolution(min-,max-), scan, grid


제9장 캔버스 구성 및 드로잉

(1) 캔버스 기본 내용
- 그림 영역 지정

* width/height 생략 시 기본 값: 폭 300px, 높이 150px

캔버스 컨텍스트 생성
- 방법1:
-- var 변수1 = document.getElementById("캔버스 아이디");
-- var 변수2 = 변수1.getContext("2d");
- 방법2: var 변수 = document.getElementById("캔버스 아이디").getContext("2d");
* 캔버스 상태의 저장과 복원 → save(), restore()

(2) 사각형 그리기
- fillRect(x,y,w,h) 색이 채워진 사각형 영역을 그린다.
- strokeRect(x,y,w,h) 테두리만 있는 사각형 영역을 그린다.
- clearRect(x,y,w,h) 지정한 사각형 영역을 지운다.

(3) 선 그리기
패스 관련 메서드
- beginPath() 이전까지 그렸던 패스를 모두 초기화하고 새로운 패스를 그린다.
- closePath() 현재 패스를 닫는다.
- lineTo(x,y) 이전 위치에서의 점과 현재 주어진 점을 추가하여 선을 그린다.
- moveTo(x,y) 주어진 점을 시작하는 새로운 서브패스를 만든다.
- stroke() 현재 패스 또는 주어진 패스의 서브패스를 현재의 선 스타일로 그린다.
- fill() 현재 패스 또는 주어진 패스의 서브패스를 현재의 채우기 스타일로 채운다.
- rect(x,y) 사각형을 그린다.

선을 그리기 위한 메서드의 활용 - 시작점 지정 moveTo(x,y) → 종료점 지정 lineTo(x,y) → 선의 출력 stroke()

(4) 다각형 그리기
선 그리기 메서드와 더불어 closePath() 사용
- closePath() → 선이 마지막으로 종료된 지점과 최초의 지점을 자동으로 연결시킴

정다각형을 그리는 알고리즘(n: 면의 수, r: 원의 반지름)
- 원의 중심으로부터 정다각형의 각 측면에 의한 각도(360/n)를 계산
- 첫 번째 꼭지점의 위치를 (r, 0)으로 지정
- 면의 수만큼 루프를 통해서 꼭지점이 위치하는 각도를 계산하고, 각 꼭지점들끼리의 드로잉을 수행

(5) 점선 그리기
- setLineDash() → 현재 점선의 패턴을 설정
- getLineDash() → 현재 점선의 패턴을 반환
- lineDashOffset → 점선 모양의 패턴과 동일한 단위에서의 위상 오프셋을 지정

(6) 선 스타일
- strokeStyle 선의 색상 지정
- lineWidth 선의 두께 지정
- lineJoin 선의 연결 부분의 스타일 지정 (bevel | round | miter)

- lineCap 선의 끝 부분의 스타일 지정 (butt | round | square)
- miterLimit → 선의 연결 부분의 스타일이 miter인 경우 miter의 한계 비율을 지정

(7) 원/원호 그리기
- arc(x, y, 반지름, 시작각도, 종료각도, 그리는방향) / 각도는 라디안으로 표시 → 각도*Math.PI/180 / 그리는 방향: true → 시계 반대 방향, false → 시계 방향


(8) 부채꼴 그리기
- moveTo(x,y) → arc(…) → closePath()의 순서대로 사용 / moveTo(x, y) → 부채꼴의 중심의 좌표 지정
- closePath() → 중심의 좌표와 호의 양 끝점을 자동으로 연결시킴

(9) 직선과 접하는 원호 그리기
- moveTo(x,y) → arc(보조점x, 보조점y, 종료점x, 종료점y, 반지름)


(10) 베지에 곡선
- n개의 점으로부터 얻어지는 (n-1)차 곡선
- 2차 베지에 곡선 : quadraticCurveTo(제어점x, 제어점y, 종료점x, 종료점y), 2차/3차 베지에 곡선 모두 시작점은 moveTo(x,y)로 지정

- 3차 베지에 곡선 : bezierCurveTo(제어점x1, 제어점y1, 제어점x2, 제어점y2, 종료점x, 종료점y)


(11) 채우기 색상 및 투명도 지정
- fillStyle 속성 → 채우기 색상 또는 스타일 지정
- globalAlpha 속성 → 색상의 투명도(0.0~1.0) 지정

(12) 와인딩 규칙
- 주어진 지점이 닫힌 곡선의 내부에 있는 지를 판단하는 방법 : 짝-홀 와인딩, 넌제로 와인딩
- IE 11 이상에서는 와인딩 방식 지정이 가능 → msFillRule = "evenodd" | "nonzero"

(13) 그라데이션 스타일 지정
context.beginPath();
- var 변수 = context.createLinearGradient(x1,y1,x2,y2); //선형의 경우
- var 변수 = context.createRadialGradient(x1,y1,r1,x2,y2,r2); //방사형의 경우
- 변수 = addColorStop(0.0, 색상); //시작점의 색상 지정
- [ 변수 = addColorStop(오프셋, 색상); ]* //중간점의 색상 지정(오프셋: 0.x)
- 변수 = addColorStop(1.0, 색상); //끝점의 색상 지정

context.fillStyle = 변수;
* 선형 그라데이션의 경우 시작점(x1,y1)과 끝점(x2,y2)의 위치에 따라 그라데이션의 진행 방향이 달라짐

(14) 이미지 패턴 스타일 지정
- var 변수1 = new Image();
- 변수1.src = '이미지 주소';
- 변수1.onload = function () { //이미지가 로드될 때까지 기다렸다 처리함
- var 변수2 = context.createPattern(변수1, 반복형식);
- context.fillStyle = 변수;
- }
* 반복형식을 지정하는 값 → no-repeat, repeat-x, repeat-y, repeat

(15) 그림자 스타일 지정
- context.shadowOffsetX = 값; //그림자의 X축 오프셋 지정
- context.shadowOffsetY = 값; //그림자의 Y축 오프셋 지정
- context.shadowColor = 색상; //그림자의 색상 지정
- context.shadowBlur = 값; //그림자의 흐림 정도 지정

(16) 도형 합성
- globalCompositeOperation 속성 → 도형이 겹쳐지는 부분에 대한 처리 방식을 지정
- source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, copy, xor, darker


(17) 좌표 공간의 변환
- translate(x,y) → 좌표 공간의 시작점을 (x,y)로 이동
- rotate(각도) → 좌표 공간을 시계 방향으로 주어진 각도만큼 회전
- scale(x, y) → 좌표 공간을 수평/수직 방향으로 확대/축소
- 사용자 정의 변환 → transform(a,b,c,d,e,f), setTransform(a,b,c,d,e,f)
- a: 수평으로 확대/축소, b: 수평으로 기울임, c: 수직으로 기울임, d: 수직으로 확대/축소, e: 수평으로 이동, f: 수직으로 이동

(18) 텍스트 그리기
- fillText(텍스트, x, y [, 최대폭 ] ) → 지정된 위치에 색이 채워진 텍스트를 삽입
- strokeText(텍스트, x, y [, 최대폭 ] ) → 지정된 위치에 테두리만 있는 텍스트를 삽입
- measureText(텍스트) → 현재 글꼴에서 주어진 텍스트의 폭을 반환

(19) 텍스트 글꼴 설정 및 배치
- font 속성 → 글자 스타일, 글자 크기, 글꼴을 지정
- textAlign 속성 → 수평 방향에 대한 텍스트의 정렬 방식을 지정 [left, right, center, start, end]
- textBaseline 속성 → 텍스트의 수직에 대한 기준선 지정 [top, hanging, middle, alphabetic, ideographic, bottom]

(20) 이미지 삽입
- var 변수 = new Image();
- 변수.src = '이미지 주소';
- context.drawImage(변수, …);
- drawImage(이미지변수, dx, dy) → 이미지를 원래 크기로 삽입
- drawImage(이미지변수, dx, dy, dw, dh) → 이미지를 지정한 크기로 삽입
- drawImage(이미지변수, sx, sy, sw, sh, dx, dy, dw, dh) → 이미지의 일부분을 잘라내어 원하는 크기로 삽입


(21) 이미지 조작
- 변수 = context.createImageData(sw, sh) - 지정한 크기의 모든 픽셀이 투명한 검은색으로 초기화된 ImageData 객체 생성
- 변수 = context.getImageData(sx, sy, sw, sh) - 캔버스 영역에 지정된 사각형 영역에 대한 이미지를 포함한 ImageData 객체 반환
- context.putImageData(이미지데이터변수, dx, dy) - 지정된 ImageData 객체의 데이터를 캔버스에 그린다.
- url = canvas.toDataURL(이미지형식, 이미지품질) - 캔버스에 그려진 내용을 URL 문자열로 반환하는 캔버스 API

클리핑
- 클리핑 영역 지정 → 원하는 클리핑 모양의 패스를 지정한 다음 clip() 메서드 호출
- 클리핑 영역 지우기 → clearRect() 메서드 사용

(22) 애니메이션
- requestId = window.requestAnimationFrame()
- 다음 애니메이션 프레임을 그릴 준비가 되면 브라우저에게 특정 콜백을 호출할 수 있도록 요청 → 다음 애니메이션을 그릴 시간을 알 필요 없음
- window.cancelAnimationFrame(requestId) - 애니메이션 프레임을 업데이트하도록 이전에 예약되어 있는 콜백 요청을 취소


제10장 오디오와 비디오

(1) audio 요소의 속성
- src 재생할 파일 경로
- autoplay 웹 문서 로딩 시에 미디어 파일을 자동으로 재생할지 여부
- controls 플레이어(재생 컨트롤의 집합) 표시 여부
- loop 재생할 파일의 반복 여부
- preload 웹 문서 로딩 시 파일의 로딩 상태 지정 (none, auto, meta)
- controls, autoplay, loop 속성 → 별도의 속성 값을 지정하지 않아도 무방

(2) source 요소
- 미디어 요소(audio, video 요소)의 src 속성을 대신하여 다양한 포맷의 미디어 파일을 지정
- 미디어 요소의 자식 요소로서 여러 개 지정 가능 → 차례대로 source 요소를 실행하다가 브라우저에서 지원하는 포맷을 찾아서 재생 [속성 → src, type, media]

(3) 미디어 제어
메서드
- load() 미디어 파일을 로드함
- play() 미디어 파일을 재생함
- pause() 미디어 파일을 일시정지함

미디어 관련 주요 이벤트
- play 미디어 파일의 재생이 시작되었을 때 발생
- timeupdate 재생 중에 지속적으로 발생
- ended 재생이 종료되었을 때 발생
- progress 미디어 파일을 로드할 때 지속적으로 발생
- loadstart 미디어 파일의 로드를 시작할 때 발생
- load 미디어 파일의 다운로드가 완료될 때 발생
- error 미디어 파일을 재생/로드할 때 오류가 있을 경우 발생

이벤트 등록 및 처리
- var 변수 = document.getElementById('아이디'); //처리할 이벤트 등록
- 변수.addEventListener("이벤트", 실행할_함수, false);
- function 실행할_함수 (e) {
- //해당 이벤트에 따라 처리할 내용
- }

미디어 파일 제어 및 상태에 관련된 속성
- src 미디어 파일 경로 지정
- currentSrc 재생 중인 미디어 파일의 URL 반환
- currentTime 현재 재생 위치를 초 단위로 반환
- duration 미디어 파일의 총 재생 시간을 초 단위로 반환
- paused 일시 정지 상태인지의 여부 반환
- waiting 다음 프레임의 다운로드를 대기할 때 발생
- playbackRate 재생 속도 지정
- ended 재생이 종료되어 있는 상태인지 여부 반환
- autoplay 미디어 파일을 자동 재생되도록 지정
- loop 반복 재생되도록 지정
- controls 플레이어의 출력 여부 지정
- volume 볼륨을 지정하거나 상태 반환
- muted 음소거 상태 반환
- error 오류 정보 반환
- networkState 네트워크 접속 상태를 표시
- readyState 미디어 파일의 다운로드 상태를 표시

(4) video 요소의 속성
- src, autoplay, controls, loop, preload ☞ audio 요소의 속성과 동일
- width, height 비디오의 너비/높이 지정
- poster 비디오 데이터가 설정되어 있지 않거나 로드 하는 중에 보여줄 이미지 지정
- source 요소도 적용 가능 → 코덱을 지정하여 보다 상세한 정보를 브라우저에게 제공
- 재생 구간 지정 재생할 특정 구간을 src 속성에 지정하여 재생 가능
- 지정 형식 → src="비디오파일#t=시간:분:초,시간:분:초“

(5) 비디오의 자막 처리
- track 요소: 여러 언어나 비디오 설명을 제공하거나 시간이 지정된 텍스트 파일을 지정할 때 사용
- kind 텍스트 트랙의 종류 지정
- 값 → subtitles, captions, descriptions, chapters, metadata
- src 텍스트 트랙 데이터 파일의 주소 지정
- srclang 텍스트 트랙 데이터의 언어 지정
- label 사용자에게 보이는 트랙의 제목 표시
- default 기본 트랙을 지정

WebVTT(Web Video Text Tracks) 포맷
- 00:00:02.000 --> 00:00:05.031 2초와 5초 사이에 표시될 자막 내용입니다.
- 00:00:07.000 --> 00:00:15.000 7초와 15초 사이에 표시될 자막 내용입니다.


제11장 HTML5 API : 오프라인 웹, 파일접근, 웹 스토리지, 웹 워커, 웹 소켓, 위치 정보

(1) 오프라인 웹 애플리케이션
- 오프라인 상태에서도 사용이 가능한 애플리케이션 → 웹에서 사용하는 여러 페이지와 파일을 클라이언트에 캐시로 저장하여 제공
- 매니페스트 파일 : 캐시에 저장할 자원의 목록


- 웹 서버의 mime.types 파일에 추가할 내용 : text/cache-manifest manifest
- 애플리케이션 문서에서의 매니페스트 파일 지정


(2) applicationCache 객체
메서드 및 속성
- status 애플리케이션 캐시의 현재 상태를 반환
- update() 캐시 다운로드 프로세스를 호출
- abort() 캐시 다운로드 프로세스를 취소
- swapCache() 새 애플리케이션 캐시가 생기면 이 캐시로 전환
- status 속성의 값
- UNCACHED 0 캐시하지 않음
- IDLE 1 최신 캐시를 이용하고 있는 상태
- CHECKING 2 캐시의 업데이트를 체크 중인 상태
- DOWNLOADING 3 캐시 업데이트를 다운로드 중인 상태
- UPDATEREADY 4 최신 캐시를 이용할 수 있는 상태
- OBSOLETE 5 오류로 인하여 캐시가 되지 않은 상태

이벤트
- checking 업데이트 여부를 확인 중
- error 오류로 인하여 업데이트 종료
- noupdate 매니페스트가 업데이트되지 않음
- downloading 업데이트할 것을 찾아서 가져오고 있는 중
- progress 매니페스트에 기록된 자원을 다운로드 하려고 할 때
- updateready 매니페스트에 기록된 다원이 새롭게 다운로드 되었을 때
- cached 자원이 다운로드 되어 캐시에 저장된 상태
- obsolete 매니페스트를 가져오는 데 실패하여 캐시가 제거될 때

(3) 파일 API
- 로컬에 있는 파일의 데이터를 직접 스크립트로 접근할 수 있도록 지원하는 API
- 사용자가 드래그 앤 드롭한 파일과 input 요소("type=file")에서 선택한 파일에 대해서만 파일 정보 및 파일 내용을 읽을 수 있음

파일 정보 얻기
- var 변수 = getElementById("아이디").files[0];

파일 정보 관련 속성 파일 정보 관련 속성
- name 파일 이름
- type 파일 속성(파일의 MIME 타입)
- size 파일 크기
- lastModifiedDate 파일이 마지막으로 수정된 날짜

파일 내용 읽기
- FileReader 객체 사용

메서드 및 속성
- readAsArrayBuffer(file) 파일의 내용을 읽어 ArrayBuffer 객체로 변환하여 result 속성에 저장
- readAsText(file, 인코딩) 파일의 내용을 읽어 지정한 인코딩 방식의 문자열로 result 속성에 저장
- readAsDataURL(file) 파일의 내용을 읽어 Data URL 형식의 문자열로 result 속성에 저장
- abort() 파일 읽기를 중단
- result 읽기가 완료되었을 때의 파일 내용을 반환
- error 읽기 도중에 발생하는 오류를 반환
- readyState 객체의 상태 반환(EMPTY, LOADING, DONE)

이벤트 핸들러
- onloadstart 데이터를 읽기 시작했을 때 발생
- onprogress 데이터를 읽고 있는 도중에 연속으로 발생
- onabort 데이터 읽기가 중단되었을 때 발생
- onerror 데이터 읽기가 실패했을 때 발생
- onload 데이터 읽기를 성공적으로 완료했을 때 발생
- onloadend 데이터 읽기 요구가 완료(성공/실패 무관)되었을 때 발생

FileReader 객체의 오류 값
- NOT_FOUND_ERR 1 읽을 파일을 찾지 못할 때
- SECURITY_ERR 2 보안상 안전하지 못하거나, 사용자가 파일을 선택한 후 파일에 변경이 있을 때
- ABORT_ERR 3 읽기가 중지되었을 때
- NOT_READABLE_ERR 4 파일 권한 등으로 인하여 파일에 접근할 수 없을 때
- ENCODING_ERR 5 Data URL 길이가 URL 길이의 상한을 초과할 때

URL 인터페이스
- 드래그 앤 드롭이나 input 요소에서 가져온 파일에 고유 URL의 생성/삭제를 지원
→ 생성된 URL을 img 또는 video 요소의 src 속성에 직접 지정 가능
→ 이미지를 보거나 비디오 재생이 가능
- createObjectURL(), revokeObjectURL()

(4) 웹 스토리지
로컬 스토리지 vs 세션 스토리지
- 사용 방법은 동일, 의미와 동작의 차이만 존재

- 데이터 저장 기간에 대한 제한이 없어 영구적 보관이 가능: 데이터의 저장 기간이 한정 → 세션이 종료되면 자동 폐기
- 도메인마다 별도의 저장 영역을 생성 → 같은 도메인에 속한 웹 페이지들은 모두 접근 가능
: 각 세션마다 별도의 저장 영역을 생성 → 같은 도메인이라고 해도 다른 윈도우에서 생성되면 서로의 스토리지에 접근 불가

웹 스토리지 관련 메서드 및 속성
- length 저장되어 있는 데이터의 개수 반환
- key(index) 인덱스를 이용하여 키를 가져옴
- getItem(key) 키에 대응하는 값을 가져옴
- setItem(key, value) 키와 값을 지정하여 스토리지에 저장
- removeItem(key) 키에 대응하는 값을 삭제
- clear() 저장되어 있는 전체 데이터 삭제

데이터 저장, 읽기, 삭제
- 저장 localStorage.setItem(key, value); localStorage.key = value; localStorage[key] = value;
- 읽기 변수 = localStorage.getItem(key); 변수 = localStorage.key; 변수 = localStorage[key];
- 삭제 localStorage.removeItem(key); delete localStorage.key; delete localStorage[key];
- 세션 스토리지의 경우에는 localStorage 대신에 sessionStorage 키워드 사용

스토리지 이벤트 : 웹 스토리지 변경에 대해서 window 객체가 storage 이벤트를 발생시킴
- 속성 → key, oldValue, newValue, url, storageArea

(5) 웹 워커
- 전용 워커의 생성과 메시지 전달
- 워커의 오류 처리
- worker.onerror = function(event) {
- var err_msg = event.message + " \n" + event.filename + " 의 " + event.lineno + " 번째 줄에서 오류 발생"
- alert(err_msg); }

- 공유 워커의 생성과 메시지 전달



(6) 웹 소켓
- 별도의 플러그인이 필요 없이 순수 웹 환경에서 실시간 양방향 통신을 위한 스펙
- 지금까지 존재했던 통신 방법과 웹 소켓의 결정적인 차이는 프로토콜에 있다. 웹 소켓 프로토콜은 접속 확립에 HTTP를 사용하지만, 그 이후의 통신은 웹 소켓의 독자 프로토콜로 이루어진다.

웹 소켓 클라이언트
- 서버 연결 var 변수 = new WebSocket(“ws://웹소켓서버URL”); ws → 일반통신, wss → 보안 통신
- 데이터 송신 변수.send(“송신데이터”);
- 데이터 수신 변수.onmessage = function (event) { //수신 메시지(event.data) 처리 }

웹 소켓 이벤트
- onopen → 웹 소켓 연결 요청 시 서버에서 응답하여 연결이 설정되면 발생
- onerror → 오류가 있을 때 발생
- onclose → 웹 소켓 끊어지면 발생
- onmessage → 메시지가 수신되는 순간 발생

웹 소켓 메서드
- send() → 클라이언트에서 서버로 데이터 전송
- close() → 웹 소켓의 연결을 종료

웹 소켓 클라이언트의 기본 형식
- var websocket = new WebSocket("ws://…"); //서버 연결
- function doSend(data) { websocket.send(data); // 데이터 송신 }
- websocket.onmessage = function(event) { // 데이터 수신시 호출 //(서버→클라이언트) 메시지 처리 }
- websocket.onopen = function(event) { //서버 연결시 호출 //데이터 송신: doSend("Hello"); }
- websocket.onclose = function(event) { //서버 종료시 호출 //이벤트 처리: alert("서버 연결 종료"); }

웹 소켓 서버 - 웹 소켓 서버는 기존 TCP 소켓과는 다른 프로토콜로 설계되어 기존 TCP 서버를 그대로 이용하는 것이 불가 → 별도의 웹 소켓 서버가 필요

(7) 위치 정보를 위한 Geolocation API
위치 정보와 관련된 메서드
- getCurrentPosition() 현재 위치 정보를 한 번만 얻기 위한 메서드
- watchPosition() 현재 위치를 연속적으로 얻기 위한 메서드 (clearWatch()가 호출될 때까지 동작)
- clearWatch() 현재 위치 추적을 중지

navigator.geolocation.getCurrentPositon(성공콜백함수, 실패콜백함수, 옵션) 메서드
- coords
- latitude 위도
- altitude GPS 고도 (미터)
- altitudeAccuracy 고도의 정밀도 (미터)
- speed 이동 중일 때의 속도 (미터/초)
- timestamp 위치 정보를 얻은 시각 (1970.1.1.부터의 시간을 ms로 표현)

첫 번째 인자 관련: 위치 정보와 관련해서 구할 수 있는 정보 파일 정보 관련 속성
- longitude 경도
- accuracy 위도, 경도의 정밀도 (미터)
- heading 이동 중일 때의 진행 방향 (각도)

두 번째 인자 관련: 오류와 관련된 정보
- 오류 코드
- PERMISSION_ERROR 1 권한 없음
- POSITION_UNAVAILABLE 2 위치 정보를 얻을 수 없음
- TIMEOUT 3 시간제한 초과
- message 오류 내용을 텍스트로 반환

세 번째 인자 관련: 지정 가능한 옵션
- enableHighAccuracy 정확도가 높은 위치 정보를 얻도록 요청
- timeout 위치 정보를 얻을 때까지 기다리는 제한 시간 설정
- maximumAge 캐시된 위치 정보의 유효 시간 설정

watchPosition() 메서드
- 인자의 사용 방법은 getCurrentPosition() 메서드와 동일
- var 식별ID = navigator.geolocation.watchPosition(…);
- clearWatch() 메서드 → navigator.geolocation.clearWatch(식별ID);