Download presentation
Presentation is loading. Please wait.
1
© 2013 인피니티북스 All rights reserved CHAPTER 3. HTML 멀티미디어와 입력요소
2
© 2013 인피니티북스 All rights reserved 웹브라우저와 멀티미디어 예전 방법 : HTML 안에서는 나 태그를 사용하여 야 했고 웹브라우저에는 플래시나 ActiveX 를 설치 HTML5: 와 태그가 추가
3
© 2013 인피니티북스 All rights reserved 오디오
4
© 2013 인피니티북스 All rights reserved 요소의 속성
5
© 2013 인피니티북스 All rights reserved 오디오 파일 형식 MP3 – 'MPEG-1 Audio Layer-3' 의 약자로 MPEG 기술의 음성 압축 기술 Wav - 윈도우에서 사용되는 표준 사운드 포맷 Ogg - 특허권을 반대하고 보다 좋은 음질을 위하여 오픈소스로 개발 되었음.
6
© 2013 인피니티북스 All rights reserved 오디오 예제 Your browser does not support the audio element.
7
© 2013 인피니티북스 All rights reserved 태그 사용 모든 브라우저가 지원하는 오디오 형식은 아직까지 없다 ! 호환성을 높이기 위하여 다음과 같이 한다. Your browser does not support the audio element.
8
© 2013 인피니티북스 All rights reserved 비디오
9
© 2013 인피니티북스 All rights reserved 요소의 속성
10
© 2013 인피니티북스 All rights reserved 비디오 예제 Your user agent does not support the HTML5 Video element.
11
© 2013 인피니티북스 All rights reserved 비디오 예제 Your user agent does not support HTML5.
12
© 2013 인피니티북스 All rights reserved iframe
13
© 2013 인피니티북스 All rights reserved 예제 INNER 이 웹페이지는 iframe 방식으로 표시됩니다.
14
© 2013 인피니티북스 All rights reserved 예제 <html> <body> <h1>This is a header. <h1> </body> <html> iframe 을 이용하여서 source.html 을 읽어서 여기에 표시한다.
15
© 2013 인피니티북스 All rights reserved 실행결과
16
© 2013 인피니티북스 All rights reserved 은 “divide“ 의 약자로서 페이지를 논리적인 섹션으로 분리하는 데 사용되는 태그 사자 사자는 아프리카에 살며...
17
© 2013 인피니티북스 All rights reserved 예제 사자 사자는 아프리카에 살며 강한 다리와 턱, 긴 송곳니 를 지니고 있다.
18
© 2013 인피니티북스 All rights reserved 예제 교재 오타 ! ; 를 추가해주세요 !
19
© 2013 인피니티북스 All rights reserved HTML 입력 양식 사용자가 입력한 내용을 서버로 보낼 때, 사용한다.
20
© 2013 인피니티북스 All rights reserved 입력 양식의 작동 방식
21
© 2013 인피니티북스 All rights reserved 요소
22
© 2013 인피니티북스 All rights reserved GET 방식과 POST 방식 GET 방식 GET 방식은 URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하 는 방식이다.
23
© 2013 인피니티북스 All rights reserved GET 방식과 POST 방식 POST 방식 POST 방식은 사용자가 입력한 데이터를 URL 주소에 붙이지 않 고 HTTP Request 헤더에 포함시켜서 전송하는 방식 길이 제한이 없으며, 보안이 유지된다. POST /test/input.jsp HTTP/1.1 Host: www.naver.com name1=value1&name2=value2...
24
© 2013 인피니티북스 All rights reserved 입력 태그 이메일 : URL : 전화번호 : 색상 : 월 : 날짜 : 주 : 시간 : 지역 시간 : 숫자 : 범위 :
25
© 2013 인피니티북스 All rights reserved 실행결과
26
© 2013 인피니티북스 All rights reserved 형식
27
© 2013 인피니티북스 All rights reserved type 속성값
28
© 2013 인피니티북스 All rights reserved 텍스트 필드 이름 : 학번 :
29
© 2013 인피니티북스 All rights reserved 패스워드 필드 패스워드 :
30
© 2013 인피니티북스 All rights reserved 라디오 버튼 성별 : 남성 여성
31
© 2013 인피니티북스 All rights reserved 체크박스 과일 선택 : Apple Grape Orange
32
© 2013 인피니티북스 All rights reserved 제출 버튼과 초기화 버튼 사용자 아이디 :
33
© 2013 인피니티북스 All rights reserved 버튼 물품가격 : 수량 :
34
© 2013 인피니티북스 All rights reserved 버튼 눌러보세요 !
35
© 2013 인피니티북스 All rights reserved 이미지 버튼 아이디 :
36
© 2013 인피니티북스 All rights reserved 요소 고객의 의견
37
© 2013 인피니티북스 All rights reserved 요소 BMW Benz 현대자동차 기아자동차
38
© 2013 인피니티북스 All rights reserved 태그 인적사항입력 이름 : 전화번호 : 주소 :
39
© 2013 인피니티북스 All rights reserved 태그 남성 여성
40
© 2013 인피니티북스 All rights reserved 파일 업로드 버튼
41
© 2013 인피니티북스 All rights reserved HTML 입력 요소
42
© 2013 인피니티북스 All rights reserved 추가된 의 속성 autocomplete – 자동으로 입력을 완성한다. autofocus – 페이지가 로드되면 자동으로 입력 포커스를 갖는다. placeholder – 입력 힌트를 희미하게 보여준다. readonly – 읽기 전용 필드 required – 입력 양식을 제출하기 전에 받드시 채워져 있어야 함을 나 타낸다. pattern – 허용하는 입력의 형태를 정규식으로 지정한다.
43
© 2013 인피니티북스 All rights reserved 예제 date: datetime: datetime-local: month: time: week: color: email: tel: search: range: number: url:
44
© 2013 인피니티북스 All rights reserved 정규식 특정한 규칙을 가지고 있는 문자열들을 표현 정규 표현식은 / 과 / 내부에 위치
45
© 2013 인피니티북스 All rights reserved 수량한정자 이메일을 검사하는 정규식 /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA- Z0-9-]+)*$/
![© 2013 인피니티북스 All rights reserved 수량한정자 이메일을 검사하는 정규식 /^[a-zA-Z0-9.!#$%&’*+/= :\.[a-zA- Z0-9-]+)*$/](http://images.slidesplayer.org/40/11099876/slides/slide_45.jpg "© 2013 인피니티북스 All rights reserved 수량한정자 이메일을 검사하는 정규식 /^[a-zA-Z0-9.!#$%&’*+/= :\.[a-zA- Z0-9-]+)*$/")
46
© 2013 인피니티북스 All rights reserved 이메일 입력... 이메일 :...
47
© 2013 인피니티북스 All rights reserved 숫자 입력... 신발사이즈 <input type="number" min="230" max="290" step="10" value="260" name="shoesize">... 구글 오페라
48
© 2013 인피니티북스 All rights reserved range 입력... 테니스 스킬...
49
© 2013 인피니티북스 All rights reserved 날짜 입력 date – 날짜 입력 month – 월 입력 week – 주 입력 time – 시간 입력 datetime – 날짜와 시간을 입력할 수 있는 양식 제공, 국제 표준 시간 대 datetime-local - 날짜와 시간을 입력할 수 있는 양식 제공, 지역 표준 시간대... 생일...
50
© 2013 인피니티북스 All rights reserved 색상 입력... 색상선택 :... 오페라 구글
51
© 2013 인피니티북스 All rights reserved 예제
52
© 2013 인피니티북스 All rights reserved HTML 소스 이메일 전송화면 이름 : 이메일 주소 : 내용 :
53
© 2013 인피니티북스 All rights reserved 예제
54
© 2013 인피니티북스 All rights reserved HTML 소스 회원 가입 화면 이름 : 주소 : email: Male Female
55
© 2013 인피니티북스 All rights reserved Q & A
Similar presentations
![임직원 APP 설치 가이드 2013. 8. 경영전략처 정보기획 TF 팀. 임직원 App- 운영체제 구분 안드로이드 갤럭시, 갤럭시노트, 갤럭시 S4 [ 삼성전자 ] 옵티머스 [LG 전자 ] 베가 [ 팬텍 모토로이 [ 모토롤라 ] ios 아이폰 [ 애플.](/40/11046069/big_thumb.jpg "임직원 APP 설치 가이드 2013. 8. 경영전략처 정보기획 TF 팀. 임직원 App- 운영체제 구분 안드로이드 갤럭시, 갤럭시노트, 갤럭시 S4 [ 삼성전자 ] 옵티머스 [LG 전자 ] 베가 [ 팬텍 모토로이 [ 모토롤라 ] ios 아이폰 [ 애플.>")
![단계 1 : 화면 아이콘 [설정]을 터치 합니다. 단계 2 : [WI-FI]메뉴를 터치 합니다.](/61/11314074/big_thumb.jpg "단계 1 : 화면 아이콘 [설정]을 터치 합니다. 단계 2 : [WI-FI]메뉴를 터치 합니다.>")
