Presentation is loading. Please wait.

Presentation is loading. Please wait.

© 2013 인피니티북스 All rights reserved CHAPTER 3. HTML 멀티미디어와 입력요소.

Similar presentations


Presentation on theme: "© 2013 인피니티북스 All rights reserved CHAPTER 3. HTML 멀티미디어와 입력요소."— Presentation transcript:

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-]+)*$/

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


Download ppt "© 2013 인피니티북스 All rights reserved CHAPTER 3. HTML 멀티미디어와 입력요소."

Similar presentations


Ads by Google