쉽게 풀어쓴 C 프로그래밍

Size: px

Start display at page:

Download "쉽게 풀어쓴 C 프로그래밍"

미란 궉
5 years ago
Views:

1 CHAPTER 3. HTML 멀티미디어와입력요소

2 웹브라우저와멀티미디어 예전방법 : HTML 안에서는 <embed> 나 <object> 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: <audio> 와 <video> 태그가추가

3 오디오

4 <audio> 요소의속성

5 오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG 기술의음성압축기술 Wav - 윈도우에서사용되는표준사운드포맷 Ogg - 특허권을반대하고보다좋은음질을위하여오픈소스로개발되었음.

6 오디오예제 <!DOCTYPE html> <html> <body> <audio src="old_pop.mp3"" autoplay controls> Your browser does not support the audio element. </audio> </body> </html>

7 <source> 태그사용 모든브라우저가지원하는오디오형식은아직까지없다! 호환성을높이기위하여다음과같이한다. <!DOCTYPE html> <html> <body> <audio controls autoplay > <source src="old_pop.ogg" type="audio/ogg"> <source src="old_pop.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio> </body> </html>

8 비디오

9 <video> 요소의속성

10 비디오예제 <video controls src="movie.ogv"> Your user agent does not support the HTML5 Video element. </video>

11 비디오예제 <!DOCTYPE html> <html> <body> <video width="640" height="480" controls> <source src="trailer.mp4" type='video/mp4'> <source src="trailer.ogv" type='video/ogg'> <p>your user agent does not support HTML5.</p> </video> </body> </html>

12 iframe

13 예제 <!DOCTYPE html> <html> <body> <iframe src="inner.html" width="300" height="120"></iframe> </body> </html> <html> <head> <title>inner</title> </head> <body> <h1> 이웹페이지는 iframe 방식으로표시됩니다.</h1> </body> </html>

14 예제 <!DOCTYPE html> <html> <body> <textarea rows="5" cols="50"> <html> <body> <h1>this is a header. <h1> </body> <html> iframe 을이용하여서 source.html 을읽어서여기에표시한다. </textarea> <br /> <br /> <iframe src="source.html" width="420" height="80"></iframe> </body> </html>

15 실행결과

16 <div> <div> 은 divide 의약자로서페이지를논리적인섹션으로분리하는데사용되는태그 <div style="border: 3px solid red"> <h2> 사자 </h2> <p> 사자는아프리카에살며...</p> </div>

17 예제 <!DOCTYPE html> <html> <body> <div style="border: 3px solid red;"> <h2> 사자 </h2> <p> 사자는아프리카에살며 강한다리와턱, <span style="color: red;"> 긴송곳니 </span> 를지니고있다. </p> </div> </body> </html>

18 예제 <!DOCTYPE html> <html> <body> <div style="height:20px; background-color:yellow"></div> <div style="height:20px; background-color:green"></div> <div style="height:20px; background-color:purple"></div> </body> </html>

19 HTML 입력양식 사용자가입력한내용을서버로보낼때, 사용한다.

20 입력양식의작동방식

21 <form> 요소

22 GET 방식과 POST 방식 GET 방식 GET 방식은 URL 주소뒤에파라미터를붙여서데이터를전달하는방식이다.

23 GET 방식과 POST 방식 POST 방식 POST 방식은사용자가입력한데이터를 URL 주소에붙이지않고 HTTP Request 헤더에포함시켜서전송하는방식 길이제한이없으며, 보안이유지된다. POST /test/input.jsp HTTP/1.1 Host: name1=value1&name2=value2...

24 <!DOCTYPE html> <html> <body> <form action="input.jsp" method="post"> 입력태그 이메일 : <input type=" " name=" " /><br /> URL : <input type="url" name="url" /><br /> 전화번호 :<input type="tel" name="tel" /><br /> 색상 : <input type="color" name="color" /><br /> 월 : <input type="month" name="month" /><br /> 날짜 : <input type="date" name="date" /><br /> 주 : <input type="month" name="week" /><br /> 시간 : <input type="time" name="time" /><br /> 지역시간 : <input type="datetime-local" name="localdatetime" /><br /> 숫자 : <input type="number" name="number" min="1" max="10" step="2"/><br /> 범위 : <input type="range" name="range" min="1" max="10" step="2" /><br /> <input type="submit" value=" 제출 " /> </form> </body> </html>

25 실행결과

26 <input> 형식

27 type 속성값

28 텍스트필드 <form> 이름 : <input type="text" name="name"><br> 학번 : <input type="text" name="number" size=10> </form>

29 <form> 패스워드 : <input type="password" name="pass"> </form> 패스워드필드

30 라디오버튼 <form> 성별 : <input type="radio" name="gender" value="male"> 남성 <input type="radio" name="gender" value="female"> 여성 </form>

31 체크박스 <form> 과일선택 : <input type="checkbox" name="fruits" value="apple" checked >Apple <input type="checkbox" name="fruits" value="grape">grape <input type="checkbox" name="fruits" value="orange">orange </form>

32 제출버튼과초기화버튼 <form name="input" action="getid.jsp" method="get"> 사용자아이디 : <input type="text" name="user"> <br /> <input type="submit" value=" 제출 "> <input type="reset" value=" 초기화 "> </form>

33 <input> 버튼 <form name="input" action="getid.jsp" method="get"> 물품가격 : <input type="text" name="user"> <br /> 수량 : <input type="text" name="user"> <br /> <input type="button" value=" 계산 " onclick="alert('10000 원입니다.')"> </form>

34 <button> 버튼 <button type="button" onclick="alert(' 안녕하세요?')"> 눌러보세요!</button>

35 이미지버튼 <form name="input" action="getid.jsp" method="get"> 아이디 : <input type="text" name="name"> <br /> <input type="image" src="submit.png" alt=" 제출버튼 "> </form>

36 <textarea> 요소 <form name="input" action="getfeedback.jsp" method="get"> 고객의의견 <br /> <textarea name="feedback" rows="5" cols="50"></textarea> </form>

37 <textarea> 요소 <form action=""> <select name="cars"> </select> </form> <option value="bmw">bmw</option> <option value="benz">benz</option> <option value="hyundai" selected> 현대자동차 </option> <option value="kia"> 기아자동차 </option>

38 <fieldset> 태그 <form> <fieldset> <legend> 인적사항입력 </legend> 이름 : <input type="text"><br> 전화번호 : 주소 : </fieldset> </form> <input type="text"><br> <input type="text">

39 <label> 태그 <form action="proc_form.jsp"> <label for="male"> 남성 </label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female"> 여성 </label> <input type="radio" name="gender" id="female" value="female"><br> <input type="submit" value=" 제출 "> </form>

40 파일업로드버튼 <form enctype="multipart/form-data"> <input type="file" accept="image/jpg,image/gif"> </form>

41 HTML 입력요소

42 추가된 <input> 의속성 autocomplete 자동으로입력을완성한다. autofocus 페이지가로드되면자동으로입력포커스를갖는다. placeholder 입력힌트를희미하게보여준다. readonly 읽기전용필드 required 입력양식을제출하기전에받드시채워져있어야함을나타낸다. pattern 허용하는입력의형태를정규식으로지정한다.

예제 <body> <form> date: <input type="date" /> <br /> datetime: <input type="datetime" /> <br /> datetime-local: <input type="datetime-local" /><br /> month: <input type="month" /> <br /> time: <input

43 예제 <body> <form> date: <input type="date" /> <br /> datetime: <input type="datetime" /> <br /> datetime-local: <input type="datetime-local" /><br /> month: <input type="month" /> <br /> time: <input type="time" /> <br /> week: <input type="week" /> <br /> color: <input type="color" /> <br /> <input type=" " /> <br /> tel: <input type="tel" /> <br /> search: <input type="search" /> <br /> range: <input type="range" /> <br /> number: <input type="number" /> <br /> url: <input type="url" /> <br /> <input type="submit" /> </form> </body>

44 정규식 특정한규칙을가지고있는문자열들을표현 정규표현식은 / 과 / 내부에위치

$^_`{ }~-]+@[a-za-z0-9-]+(?:\.$

45 수량한정자 이메일을검사하는정규식 /^[a-za-z0-9.!#$%& *+/=?^_`{ Z0-9-]+)*$/

46 이메일입력... 이메일 : <input type=" " name=" " required><br>...

47 숫자입력... 신발사이즈 <input type="number" min="230" max="290" step="10" value="260" name="shoesize">... 구글 오페라

48 range 입력... 테니스스킬 <input type="range" min="1" max="10" value="1">...

49 날짜입력 date 날짜입력 month 월입력 week 주입력 time 시간입력 datetime 날짜와시간을입력할수있는양식제공, 국제표준시간대 datetime-local - 날짜와시간을입력할수있는양식제공, 지역표준시간대 생일 <input type="date" name= dob >

50 색상입력 색상선택 : <input type="color" name="color"/> 오페라 구글

51 예제

52 HTML 소스 <!DOCTYPE html> <html> <body> <h3> 이메일전송화면 </h3> <form method="post" enctype="text/plain"> 이름 : <input type="text" name="name" value=""><br> 이메일주소 :<input type=" " name="mail" value=""><br> 내용 :<br> <textarea name="comment" rows="5" cols="50"></textarea><br> <input type="submit" value="send" /> <input type="reset" value="reset" /> </form> </body> </html>

53 예제

54 HTML 소스 <!DOCTYPE html> <html> <body> <h3> 회원가입화면 </h3> <form action="adduser.jsp" method="post"> <p> 이름 : <input type="text" name="name"><br> 주소 : <input type="text" name="address"><br> <input type=" " name=" " required ><br> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="submit" value="send"> <input type="reset"> </p> </form> </body> </html>

55 이미지맵으로이벤트페이지만들기

56 이미지맵으로이벤트페이지만들기

미쓰리 파워포인트

미쓰리 파워포인트 computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..