2-2. html5

www.javaspecialist.co.kr
HTML5
1

1. HTML5
• HTML5 란?
– HTML(Hyper Text Markup Language)의 최신 버전
(현재 가장 널리 사용되고 있는 버전은? HTML 4.01)
… 라고는 하지만 HTML5라고 불리는 기술은 실제로 HTML과 직접적인 관계가 없는
JavaScript API(HTML5 API)를 포함하는 것이 일반적임
HTML5 = HTML + CSS + JavaScript
– "오픈된 표준을 기반으로 한 웹 어플리케이션 구축 플랫폼"
• 멀티미디어 및 어플리케이션 구축을 위한 기능 강화
• HTML5가 해결하려는 웹의 문제점
– 웹 브라우저간 호환성이 낮음  웹 브라우저간 호환성을 높임
– 문서 내에 포함된 ‘의미’가 불명확함  문서 내에 포함된 ‘의미’를 명확하게 함
– 웹 어플리케이션 기능이 제한됨  Rich한 웹 어플리케이션 기능 강화
• HTML5인가?
– 웹 기술의 진보, 시장의 요구
– 모바일 사장의 확대
– 크로스 플랫폼 지원, 웹 표준 기술의 강점
2

2. HTML5 역사 (1/3)
• 웹이 정적 문서에서 동적 프로그램으로의 변화
• XHTML 2.0의 기본 웹과의 비호환성과 엄격한 XML 규칙의 적용으로 인한 제어의 어려움
• WHATWG(Web Hypertext Application Technology Working Group)
– 모질라 재단, 애플, 오페라 소프트웨어의 세 회사가 모여 현재의 HTML4.01 기술과 호환되
면서 웹의 기능과 표현 범위를 확장하고자 하는 기술 표준을 작성
1. 차세대 웹 표준으로 XHTML 추진
2. HTML/XHTML과의 호환성을
고려하지 않은 XHTML 2.0
1. XHTML 보다 HTML을 업데이트함
2. W3C에 제안을 거절당함
3. Apple, Mozilla, Opera 주도로
워킹그룹을 2004년 발족
WHATWG
VS
3

2. HTML5 역사 (2/3)
1. 2007년 W3C는 WG라는 워킹 그룹을 발족
2. WHATWG와 공동으로 HTML5의 제정에 함께하기로 함
3. 2008년 1월 22일 W3C가 HTML5의 초안을 공개함
4. 2009년 10월 WHATWG가 HTML5 표준화 작업을 W3C로 넘김
5. 2009년 7월 XHTML2의 사양 제정이 중지됨
WHATWG
4

2. HTML5 역사 (3/3)
년도 HTML 역사 권고안 비고
1993. 06 HTML 1.0 IETF Internet Draft
1995. 11 HTML 2.0 RFC 1866
1996 CSS 1 + JavaScript
1997. 01 HTML 3.2 W3C 권고
1997. 12 HTML 4 W3C 권고
1998 CSS2
1998. 10 DOM Level 1 W3C 권고
1999. 12 HTML 4.01 W3C 권고 현재의 HTML
2000. 01 XHTML 1.0 W3C 권고 HTML + XML
2000. 11 DOM Level 2 Core W3C 권고
2001.05 XHTML 1.1 XHTML 2.0은 2006.07
2007.11
HTML5 디자인 원칙 작업 초
안
2010. 01 HTML5 초안 공개 FPWD(First Publication Working Draft)
2011. 05 HTML5 최종 초안 LC(Last Call Working Draft)
2012. Q4 HTML5 후보 표준안 CR(Candidate Recommendation) 2012. Q2->Q4
2014. Q4 HTML5 제안 표준안 PR(Proposal Recommendation) 2014. Q1->Q4
2014. Q4 HTML5 최종 표준안 Rec(Recommendation) 2014. Q2->Q4
HTML 5.1
2012. Q4 FPWD
2014. Q3 LC
2015. Q1 CR
2016. Q4 Rec
2004. WAHTWG 발족
2007. W3C가 HTML5 제정에 합
류
5

3. HTML5 범위
일반적인 ‘HTML5’ 범위
HTML5
DOM
HTML 문법
windows object
……
JavaScript API
Web Storage
Web Socket
Indexed DB
……
CSS3
Transition
Animation
Transform
……
etc…
SVG
MathML
WebGL
……
웹 표준 기술을 ‘HTML5’ 범위에 포함한 경우
6

4. HTML5 변경사항(HTML 4.01과 다른점)
• 기본 마크업 변화
– <!doctype> 정의
– 문자 인코딩 변화 (<meta charset="UTF-8">)
• 새로운 태그 추가
– <header>, <footer>, <nav>, <section>, <article>, <aside> 등
• CSS 선택자를 기반으로 HTML DOM 객체를 리턴하는 Selector API 추가
– querySelector(), querySelectorAll(), getElementByClassName()
• 새로운 Form 요소 추가
– input type : email, number, range, calendar(date, time) 등
– autofocus, placeholder, pattern 등 자바스크립트 기능을 대신하는 속성들
• 웹 브라우저 멀티미디어 요소 지원
– <video>, <audio>
– <canvas>
• 새로운 HTML5 JavaScript API 추가
– Canvas, Video/Audio 관련 API
– Web Storage, Application Cache, database, Communication, Geolocation API 등
• HTML5의 범위에 CSS3를 포함한다면
– CSS3에 Animation, transition, transform, Web Font등 새로운 기술이 추가되었음
jQuery()를 대체
할 수 있음
입력 값 검증을 위
한 자바스크립트
코드를 대체할 수
있음
플래시 플러그
인을 대체할 수
있음 웹 앱이 네이티브
앱 영역에 다가가
기 위함
Rich한 페이지
가 되도록 함
7

5. HTML5 기본 마크업
• 문서는 text/html MIME 형식을 사용.
• 파일의 확장자는 *.html 또는 *.htm 이어야 한다.
• DOCTYPE 선언은 아래와 같이 간결하게 나타낼 수 있다.
– <!DOCTYPE HTML>
– HTML 4.01 독타입 선언은 아래와 같이 사용했음.
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
– XHTML 1.0 독타입 선언은 아래와 같이 사용했음.
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• 문자 셋 지정은 아래와 같이 한다.
– 파일 초기 512 바이트 크기 내에 meta 요소 내 charset 속성에 표시한다. 만일 UTF-8 방식을 이용 한다
면 아래와 같이 표기 한다.
– <META charset="UTF-8">
– 예전의 문자셋 지정은 아래와 같이 사용했음.
• <META http-equiv="Content-Type" content="text/html;charset=UTF-8">
• 예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>…
독타입 참고
http://www.w3schools.com/tags/tag_doctype.asp
8

6. HTML5에 없어진 요소(비표준도 포함) (1/2)
• HTML5에서 기존의 HTML4.01까지 사용해 왔던 몇몇 요소들이 없어졌습니다.
– CSS로 처리할 수 있는 요소
– 프레임 관련 요소
– 거의 사용되지 않았던 요소
• HTML5 표준에 포함되어 있지 않더라도 사용했을 대 에러가 발생하지는 않는다. 브라우저는
기존의 요소들도 지원한다.
요소 설명 대체수단
basefont 기본 폰트 지정
CSS를 대신 사용
big 텍스트 사이즈를 크게 함
blink 문자열을 정렬 시킴
center 내용을 가운데 정렬
font 폰트 지정
marquee 문자를 스크롤 시킴
s 취소선
spacer 스페이스 삽입
strike 취소선
tt 고정 폭 글꼴 표시
u 텍스트에 밑줄을 그음
bgsound 배경음을 삽입 audio 요소를 대신 사용
9

6. HTML5에 없어진 요소(비표준도 포함) (2/2)
요소 설명 대체수단
applet 자바 애플릿 삽입 embed/object 요소 사용
acronym 약어나 이니셜을 표시 abbr 요소 사용
dir 디렉토리 내용을 표시 ul 요소 사용
frame 프레임
iframe과 CSS를 이용하거나 서버사이드 언
어로 컨텐츠를 결합
frameset 프레임 셋
noframe
프레임에 대응하지 않는 브라우저를 위한 컨
텐츠
isindex 서버로 송신하는 테스트 입력란 form과 텍스트 필드 조합을 사용
listing 내용을 그대로 출력
pre 요소와 code요소 사용
xmp 내용을 그대로 출력
noembed embed를 사용할 수 없을 때의 대체 요소 폴백이 필요하다면 object 요소 사용
plaintext 내용을 그대로 출력 MIME 타입 "text/html"을 사용
rb 루비 대상문자열을 지정 루비 대상 문자열은 ruby요소 안에 직접 기술
10

7. HTML5에 변경된 요소
• HTML5의 요소는 각 태그들에 의미를 부여한다.
요소 HTML4 HTML5
href속성이 없는
a
name 속성에 컨텐츠의 위치를 지시
하는 앵커
placeholder 링크
address
연락처 정보가 켄텐츠와 관련 규정
없음
연락처 정보가 어떤 컨텐츠 부분과 관련된 연
락처 정보인가를 구별하는 방법이 규정됨
b 굵은 글씨로 렌더링
키워드처럼 다른 문장과 구별하고 싶은 텍스트
범위에 사용
hr 라인 단락의 레벨
i 이텔릭체
목소리나 분위기 등을 나타내는 텍스트의 범위
에 사용 또는 전문용어나 배의 이름 등 인쇄물
에서 이텔릭체로 표현될 수 있는 텍스트 범위
에 사용
label 폼 컨트롤을 관련 시킴
플랫폼, 인터페이스 기준에 따라 폼 컨트롤을
관련 시킴
menu 목록을 나타내는 요소로서 폐지됨
컨텍스트 메뉴나 도구 모음 등 웹 애플리케이
션에서 사용
strong 강조, em과 동일 중요성을 나타내는 요소로 재정의
small 작은 글씨로 렌더링
의미를 부여하여 주석 등의 작은 글씨를 나타
내는 것으로 재정의
11

• 과거에 div 태그를 즐겨 쓰셨나요? • HTML5에서는 기존의 HTML4 보다 확장된 태
그들을 지원한다.
• 특히, 문서 구조에 적합하게 header, footer, nav,
section 같은 구조화된 마크업을 사용할 수 있
다.
8. HTML5 구조적 요소 (1/3)
<header>
<nav>
<footer>
<section id="content">
<article>
<article>
<article>
<div id="header">
<div id =
"sidebar"
>
<div id="footer">
<div id="content">
<div class="post">
<div class="post">
<div class="post">

• <header>
– header 요소는 소개 내용이나 네비게이션 보조 수단들이 모여 있는 곳
– 1회 이상 사용 가능, 주로 페이지나 절의 머릿글(header) 영역을 정의하며
– 섹션의 헤딩(h1~j6), 한 섹션의 목차, 회사의 로고, 그리고 검색 상자 등 여러 가지를 담을
수 있음
• <footer>
– 페이지나 절의 바닥글(footer) 영역을 정의
– footer 요소는 부모 요소 중 가장 가까운 콘텐츠 또는 섹셔닝 독립 요소를 위한 영역에 1회
이상 사용될 수 있음
– footer 요소에는 일반적으로 누가 만들었는지에 대한 정보, 관련 있는 페이지 링크, 그리고
저작권 등이 사용
– footer 요소 안의 small 요소는 footer 요소 안에 권리에 대한 정의, 절차에 대한 안내, 법적
제한, 또는 저작권 내용이 들어있는 작은 글자영역, 속성에 대한 설명 또는 라이선스 관련
공지를 위한 내용으로 사용
• <nav>
– 내비게이션 마크업을 만들 때 사용
– 내비케이션은 페이지 안을 이동할 수 있는 링크 또는 사이트 내부의 다른 페이지들을 이동
할 수 있는 링크
– 즉 페이지나 절의 내비게이션 영역을 정의
– 주 메뉴 또는 사이드 바의 퀵 메뉴 등을 담을 수 있음
– 그러나 링크가 모였다고 꼭 nav 요소로 정의할 필요는 없음
13

• <section>
– 페이지의 논리적 영역 또는 내용의 그룹을 정의
– section은 여러 개의 article로 구성될 수 있음
– 신문에서 스포츠 섹션(section)에서 어제 한국과 일본 축구경기 기사(article)를 떠올리면
section과 article이 이해가 쉬움
– section은 article을 논리적으로 그룹 짓는 역할
– section은 페이지 안의 주제가 다른 영역을 구분하거나 하나의 글을 부분으로 나누기 위한
것
– article은 독립적인 그 자체로 완전한 개별 컨텐츠를 의미
• <article>
– article 요소는 문서, 페이지, 애플리케이션, 사이트 안에 들어가는 독립적으로 구성할 수 있
는 컴포넌트를 별도로 배포하거나 재사용하기 위한 구조
– article 요소는 하나의 글 또는 완결된 내용을 정의
• <aside>
– aside는 글과 관련 있는 내용을 보여주려는 목적으로 만든 것이다. 관련 있는 내용은 링크,
용어설명, 인용구 등
– 시각적 효과를 위한 요약부나 사이드바
– 광고를 위한 영역이나 내비게이션 요소를 모아 놓은 영역
– 메인 컨텐츠와 별도의 내용이라고 생각되는 컨텐츠
14

8. HTML5 구조적 요소 - (HTML5/structured_elements.html)
15

9. 텍스트 및 기타 요소
16
요소 설명
mark 웹 페이지의 의도와는 다른 문맥의 강조
ruby/rt/rp 한자의 발음 등을 표시하는 루비를 지정
time 날짜나 시간을 표시
command 사용자가 호출할 수 있는 명령, menu 요소 안에서 메뉴 항목으로 사용
figure 이미지와 컨텐츠를 명시적으로 연결
details 사용자의 요구에 따라 표시할 수 있는 추가 정보
datalist input 요소 입력용으로, 목록 상자에 입력 후보를 표시, 자동완성 기능 제공

• <mark>
– mark 요소는 출력물에 형광펜으로 특정 단어를
칠해서 강조하는 효과
<p>출력물에 <mark>형광펜으로 특정 단어들을 칠
해서 강조</mark>하는 효과가 있습니다.</p>
• <ruby>
– 루비 텍스트를 만들어 줌
<p>
저는 <ruby>
大<rt>대</rt>
韓<rt>한</rt>
民<rt>민</rt>
國<rt>국</rt>
</ruby>
의 <ruby>許進京<rt>허진경</rt></ruby>입니다.
</p>
• <time>
– time 요소는 날짜와 시간을 기계가 이해할 수 있
게 명확하게 인코딩 하면서 사람도 이해할 수 있
게 노출
<time datetime=2012-03-23>2012년 3월 23일
</time>
<p><time datetime=2012-03-23 pubdate>2012년
3월 23일</time>자바프로그래밍출간</p>
• <detail>
– details 요소는 영역이 펼쳐지고 접히는 기능을
제공
– 크롬 17이상만 지원
<details open>
<summary>복사중...
<progress max="100"
value="15">15%</progress>
</summary>
<dl>
<dt>초당 전송량 : </dt><dd>867Kb/s</dd>
<dt>걸린 시간 : </dt><dd>00:12:19</dd>
</dl>
</details>
9. 텍스트 및 기타 요소 (HTML5/new_elements.html)

• <figure>
– img 요소를 포함하고, <figcaption> 요소를 이용
하여 이미지 캡션을 표현함
<figure>
<img src="canvas/the_scream.jpg">
<figcaption>뭉크의 절규</figcaption>
</figure>
• <datalist>
– 입력 필드를 셀렉션 필드로 만들어 줌
– 입력값 제안을 해줌
<label>도시 이름 <input list="cities"></label>
<datalist id="cities">
<label>choose one
<select>
<option value="Paris">Paris</option>
<option value="London">London</option>
<option value="Berlin">Berlin</option>
<option value="New York">New York</option>
<option value="Tokyo">Tokyo</option>
<option value="Sydney">Sydney</option>
<option
value="Johannesburg">Johannesburg</option>
</select>
</label>
</datalist>
9. 텍스트 및 기타 요소 (HTML5/new_elements.html)
입력 필드에 N
을 입력하면 N
으로 시작하는
항목들을 보여
준다.

10. HTML5에 추가된 글로벌 속성 (HTML5/global_attr/)
• 글로벌 속성은 모든 HTML 요소에 사용할 수 있다.
– contenteditable
• 요소를 편집 가능한 영역으로 만들어준다.
• <element contenteditable="true|false|inherit">
– draggable
• 요소를 드래그 가능하도록 만들어 준다.
• <element draggable="true|false|auto">
– hidden
• 요소를 숨김 상태로 만든다
• <element hidden>
– data-* 속성(커스텀 데이터 속성)
• non-visible 데이터를 표현할 때 사용한다.
• data-* 형태로 데이터를 첨부할 수 있다.
• 유효성 검사기는 이 문자열로 시작하는 속성은 전부 무시한다.
• 커스텀 데이터 속성 값을 HTML DOM 객체의 dataset 속성으로 쉽게 가져올 수 있다.
• 사진의 메타데이터, 위도와 경도로 이루어진 좌표, 팝업창의 크기 결정 등에 사용할 수
있다.
• 여기에 포함되지 않은 나머지 HTML Global 속성들은 아래 문서를 참고하라.
– http://www.w3schools.com/tags/ref_standardattributes.asp
커스텀 데이터 속성을
추가하면 해당 요소 객
체에 data-를 제외한 속
성의 이름으로 변수가
추가된다.
커스텀 속성이 아닌 규정된 속성의
값은 getAttributeNode("속성명
").value를 통해 조회하거나 변경할
수 있다.
19

11. form 요소
• 폼 요소들은 텍스트 필드(text field), 텍스트 영역(text area), 드롭-다운 메뉴(drop-down menu), 라
디오버튼(radio button), 체크박스(checkbox) 등을 통하여 사용자가 정보를 입력할 수 있게 함
• <form>태그는 action과 method라는 중요한 속성을 가짐
• action 속성
– 방문자가 내용을 입력 한 후 전송 버튼을 눌렀을 때 데이터가 전달되어질 장소를 지정하는 부분
이며 프로그램의 URL 명을 적어 줌.
• method 속성
– 데이터가 반환되는 유형을 결정하는 것, 기본 값은 get이며 post방식이 많이 사용 됨.
• post : post방식은 전송되는 데이터가 클라이언트에 남지 않고, 전송되는 데이터의 크기에도
제약이 없기 때문에 대량의 데이터나 중요한 정보를 전송하는데 주로 사용. post방식의 경우
에는 입력한 데이터가 주소에 남지 않음.
• get : get방식의 경우에는 입력한 데이터가 주소에 포함되어 전송되는 방식
• 여기에 html5 에 autocomplete 속성과 novalidate 속성이 추가되었습니다.
– autocomplete="on|off" 로 자동 완성기능을 설정할 수 있다.
– novalidate 속성 추가로 입력 양식의 유효성을 검증하지 않게 할 수 있다.
• 예)
– <form action="process.jsp" method="post" autocomplete="on" novalidate>
– First name:<input type="text" name="fname"><br>
– Last name: <input type="text" name="lname"><br>
– E-mail: <input type="email" name="email" autocomplete="off"><br>
– </form>
20

12. input 요소
• 한 줄로 된 텍스트 입력상자를 "에디트 필드"라고 부른다. input 요소는 이러한 에디트 필드를 만들
어 주며, type 속성의 값에 따라 여러 가지 형식 데이터를 입력할 수 있도록 함
• 가장 많이 사용되는 type 속성의 값은 text와 password
– text는 사용자가 문자를 입력했을 때 입력한 문자를 볼 수 있음
– type 속성의 값을 password로 한다면 문자 입력 시 보안을 위해 *로 표시 됨
– type 속성 외에도 input 요소의 속성에는 name, value, size, maxlength, checked 등이 사용됨
– HTML5 에는 input 요소에 type 속성의 값을 다양하게 지원.
– 뿐만 아니라 input 요소의 새로운 속성들이 HTML5 에 많이 추가되었음.
• HTML5 에 추가된 input 요소의 새로운 속성
– autocomplete : on 또는 off 로 자동완성 기능을 설정할 수 있다.
– autofocus : 페이지가 로드된 후 autofocus 속성이 지정된 필드에 자동으로 포커스가 지정되게 한
다.
– form : input요소를 form 요소 블록 밖에 추가할 수 있도록 한다. 값은 form 요소의 id 속성의 값을
입력한다.
– height, width : type 속성이 image일 경우 이미지의 넓이와 높이를 지정한다.
– list : 입력값 제안에 사용하는 datalist를 지정한다. 값은 datalist 요소 id의 값을 입력한다.
– min, max : 입력되는 값의 최소값과 최대값을 지정한다. number, range, date 등에 사용된다.
– step : 입력되는 값의 단계를 지정한다.
– multiple : select 요소 사용시 복수 개 선택이 가능하도록 한다.
– pattern : 정규 표현식을 이용하여 입력 값의 형식을 지정할 수 있다.
– placeholder : 입력 필드에 어떤 데이터가 입력되어야 하는지 힌트를 준다.
– required : 반드시 값을 입력하도록 한다.
• 자세한 폼 속성은 http://www.w3schools.com/html/html5_form_attributes.asp 를 참고하라.
21

13. HTML5에 추가된 input 요소의 속성 (1/4)
• autocomplete
– on 또는 off 로 자동완성 기능을 설정할 수 있다.
– 예)
• E-mail: <input type="email" name="email" autocomplete="off">
• autofocus
– 페이지가 로드된 후 autofocus 속성이 지정된 필드에 자동으로 포커스가 지정되게 한다.
– 예)
• First name:<input type="text" name="fname" autofocus>
• form
– input요소를 form 요소 블록 밖에 추가할 수 있도록 한다. 값은 form 요소의 id 속성의 값을
입력한다.
– 예)
• <form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
• height, width
– type 속성이 image일 경우 이미지의 넓이와 높이를 지정한다.
– 예)
• <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
22

• list
– 입력값 제안에 사용하는 datalist를 지정한다. 값은 datalist 요소 id의 값을 입력한다.
– 예)
• <input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
• min, max
– 입력되는 값의 최소값과 최대값을 지정한다. number, range, date 등에 사용된다.
– 예)
• Enter a date before 1980-01-01:
< input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
< input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
< input type="number" name="quantity" min="1" max="5">
datalist 요소는
HTML5에 추가
된 입력 값을 제
안해 주는 폼 관
련 요소이다.
23

• step
– 입력되는 값의 단계를 지정한다.
– 예)
• <input type="number" name="points" step="3">
• multiple
– type 속성이 file일 경우 파일을 복수 개 선택할 수 있도록 한다.
– 예)
• Select images: <input type="file" name="img" multiple>
– select 요소 사용시 복수 개 선택이 가능하도록 한다.
– 예)
• <select multiple>
<option>선택 1
<option>선택 2
• </select>
• placeholder
– 입력 필드에 어떤 데이터가 입력되어야 하는지 힌트를 준다.
– 예)
• <input type="text" name="fname" placeholder="First name">
• required
– 반드시 값을 입력하도록 한다.
– 예)
• Username: <input type="text" name="usrname" required>
24

• pattern
– 정규 표현식을 이용하여 입력 값의 형식을 지정할 수 있다.
– 선택기호 : "|" 기호는 여러 식 중에서 하나를 선택.
• "abc|adc"는 abc라는 문자열과 adc라는 문자열을 모두 포함.
– 묶기기호 : "("와 ")"로 여러 식을 하나로 묶을 수 있음
• "abc|adc"와 "a(b|d)c"는 같은 의미를 가짐.
– 개수기호 : 문자 뒤에 붙어 문자의 개수를 나타냄.
• "*" : 0개 이상, "a*b"는 "b", "ab", "aab", "aaab"를 포함.
• "+" : 1개 이상, "a+b"는 "ab", "aab", "aaab"를 포함하지만 "b"는 포함하지 않음.
• "?" : 0개또는 1개, "a?b"는 "b", "ab"를 포함함.
• "{m,n}" : m개 이상 n개 이하, "a{1,3}b"는 "ab", "aab", "aaab"를 포함하지만, "b"나 "aaaab"는 포함안
됨.
– "fa|mo|b?o)ther"는 "father", "mother", "bother", "other"를 나타냄
– 일반적으로 사용되는 연산자
• "[]" : "["과 "]" 사이의 문자 중 하나를 선택, "|"를 여러번 쓴 것과 같은 의미
– "[abc]d"는 ad, bd, cd를 뜻함.
– "-"기호와 함께 쓰면 문자의 범위를 지정할 수 있음. "[a-z]"는 a부터 z까지 중 하나, "[1-9]"는 1부터
9까지 중의 하나를 의미.
• "[^]" : "[^"과 "]" 사이의 문자를 제외한 나머지 하나를 선택
– "[abc]d"는 ad, bd, cd는 포함하지 않고 ed, fd 등 포함. "[^a-z]는 알파벳 소문자로 시작하지 않은 모
든 문자를 나타냄
• "^", "$" : 각각 문자열의 처음과 끝을 나타냄
– 예)
• Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" >25

14. input 요소의 type 속성 값 (1/3)
• type 속성의 값은 입력 필드에 입력할 값이 어떤 종류인지 알려주는 기능
• text, password, checkbox, radio, submit, reset, upload 속성들 외에 HTML5 에 많은 값들이 추가되
었음
• HTML5에 type 속성의 값으로 email, url, number, range, Date Picker(date, month, week, time,
datetime, datetime-local), search, color, tel 등이 추가되었음.
– email : <input type="email" name="user_email">
– url : <input type="url" name="user_url">
– number : <input type="number" name="points" min="1" max="10">
– range : <input type="range" name="points" min="1" max="10">
– Date pickers (date, month, week, time, datetime, datetime-local) :
• Date: <input type="date" name="user_date">
• Month: <input type="month" name="user_month">
• Week: <input type="week" name="user_week">
• Date and time: <input type="datetime" name="user_datetime">
• Date and time: <input type="datetime-local" name="user_local">
– search
• <input type="search" placeholder="Search...">
– color
• <input type="color" name="user_color">
– tel
• <input type="tel" placeholder="(011) 222-3333" pattern="^(?d{3})?[-s]d{3,4}[-s]d{4}$">
26

14. Input 요소의 type 속성 값 (2/3)
• Input Type - email
– 이메일 주소를 입력하기 위한 입력 필드로 사용된다.
– 자동으로 이메일 주소가 유효한지 체크해 준다.
– 예)
• E-mail: <input type="email" name="user_email" />
• Input Type - url
– URL주소를 입력하기 위한 입력 필드로 사용된다.
– 입력된 내용이 URL 형식에 맞는지 체크해 준다.
– 예)
• Homepage: <input type="url" name="user_url" />
• Input Type - number
– 숫자만 포함해야 하는 입력필드가 있을 때 사용한다.
– 입력되는 숫자의 범위를 선택할 수 있다.
– 예)
• Points: <input type="number" name="points" min="1" max="10" />
• Input Type - range
– 슬라이드 바 모양으로 보여지며, 범위를 선택할 수 있도록 한다.
– 슬라이드바를 통해 입력되는 숫자의 범위를 선택할 수 있다.
– 유효한 숫자의 증가되거나 감소되는 크기를 설정할 수 있다.
– max, min, step, value 속성을 추가로 가질 수 있다.
– 예)
• <input type="range" name="points" min="1" max="10" />
가상키보드를 사
용하는 모바일 환
경이라면 숫자 자
판이 나타날 것이
다.
27

14. Input 요소의 type 속성 값 (3/3)
• Input Type - Date Pickers
– HTML5에는 날짜와 시간을 선택하게 할 수 있는 다양한 타입들이 존재한다.
• date - Selects date, month and year
• month - Selects month and year
• week - Selects week and year
• time - Selects time (hour and minute)
• datetime - Selects time, date, month and year (UTC time)
• datetime-local - Selects time, date, month and year (local time)
– 예)
• Date: <input type="date" name="user_date" />
• Input Type - search
– Site search 또는 Google search 같은 검색 필드를 위해 사용한다.
– 이 필드는 보통의 텍스트 필드와 동일하게 동작한다.
– 크롬에서는 x-webkit-speech 속성을 추가하면 음성입력도 가능하다.
– 예)
• <input type="search" placeholder="Search..." x-webkit-speech/>
• Input Type - color
– 색상 값을 입력할 수 있도록 해준다.
– 브라우저에 따라 Color Picker를 제공해 주기도 한다.
– 예)
• Color: <input type="color" name="user_color" />
28

15. HTML5에 추가된 폼 요소
• datalist
– datalist 요소는 입력값 제안에 사용된다. datalist id 속성의 값은 input 요소의 list 속성에서 참조된다.
– 예)
• Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
• keygen
– <keygen> 요소의 목적은 유저를 안전하게 인증하기 위함.
– <keygen> 요소는 key-pair generator이다. 폼이 submit될 때, 두 개의 키가 생성되는데 하나는 private키
이며 다른 하나는 public키 이다.
– private키는 클라이언트에 저장되고, public키는 서버로 보내진다. public 키는 차후 유저를 인증하기 위
한 클라이언트 인증서를 만드는데 사용될 수 있다.
– 예)
• <form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
• output
– output 요소는 계산의 결과 또는 스크립트 출력 등을 위해서 사용한다.
현재 이 요소를 지원
하는 브라우저는 유
용한 보안 표준안이
될 만큼 충분하지 않
다.
29

Lab - HTML5 폼 양식 작성하기 (HTML5/form/input_properties.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>input 엘리먼트 속성 예</title>
6. <style>
7. [required] {
8. border-color: #00F;
9. -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
10.}
11.:invalid {
12. border-color: #F00;
13. -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
14.}
15.</style>
16.</head>
17.<body>
18.<form action="#" id="input_form" method="post">
19.<input type="text" required placeholder="반드시 입력하세요." /><br />
20.<input type="email" placeholder="some@email.com" /><br />
21.<input type="date" min="2010-08-14" max="2013-12-31" placeholder="2010-08-14"/><br />
22.<input type="range" min="0" max="50" value="10" /><br />
23.<input type="search" placeholder="Search..." x-webkit-speech/><br />
24.<input type="tel" placeholder="(011) 222-3333" pattern="^(?d{3})?[-s]d{3,4}[-s]d{4}$" /><br />
25.<input type="color" placeholder="예) #bbbbbb" /><br />
26.<input type="number" step="1" min="-5" max="10" value="0" /> <br />
27.<select multiple>
28. <option>선택 1
31.</select><br>
32.<input type="radio" name="data" multiple />a <input type="radio" name="data" multiple />b <br />
33.<input type="submit" value=" 확인 "/>
34.<input type="reset" value=" 취소 "/>
35.</form>
36.</body>
37.</html>
스타일은 필수 속성 여부와
필드의 값이 유효한지 여부를
확인버튼을 누르기 전에 시각
적으로 표현해주기 위해 추가
했다.
30

2-2. html5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 2-2. html5

Similar to 2-2. html5 (20)

More from JinKyoungHeo

More from JinKyoungHeo (11)

2-2. html5

Editor's Notes