Transcript Document

학습목표
•
•
•
•
폼의 <button>, <select>, <textarea> 태그에 대해 알아봅니다.
웹 브라우저의 주소표시줄에 한글이 어떻게 처리되는지 알아봅니다.
멀티미디어 데이터들을 표현하는 방법을 학습합니다.
Offline 브라우저의 사용법을 실습합니다.
학습목차
•
•
•
•
•
•
<button>, <select>, <textarea> 태그
한글입력전송
<marquee> 태그
<bgsound> 태그
<embed> 태그
Offline 브라우저 실습
<button> 예제
예 1 : button
<form action="/cgi-bin/userinfo.cgi" method=post>
<button type=submit>내용전달</button><p>
<button type=reset>다시작성</button><p>
<button type=button>푸시버튼</button>
</form>
06_1.html
 예제 2 : 이미지 버튼
<form action="userinfo.cgi" method=post>
<button type=submit><img src="book.gif"></button>
</form>
06_2.html
<select> 태그
 속성 및 속성값
<select name="문자열">
리스트 박스나 콤보 박스의 이름 지정
<select size=숫자>
한 번에 표시될 항목의 개수 지정
<select multiple>
두개 이상의 항목을 동시에 선택. checkbox와 동일한 기능.
 콤보 박스 생성
<form>
<select name=sports>
<option>축구
<option>농구
<option>배구
<option>야구
</select>
</form>
06_3.html
<select> 태그
 리스트 박스 생성
<form>
<select name=sports size=3>
<option>축구
<option>농구
<option>배구
<option>야구
</select>
</form>
06_4.html
 두 개 이상의 항목 선택 : multiple 속성을 사용(ctrl, shift)
<form>
<select name=sports multiple>
<option>축구
<option>농구
<option>배구
<option>야구
</select>
</form>
06_5.html
<select> 태그
 특정 항목 표시 우선 표시
<form>
<select name=sports>
<option>축구
<option>농구
<option selected>배구
<option>야구
</select>
</form>
06_6.html
 펼침 목록에 링크 걸기
 목록 중 하나를 선택하면 사이트 혹은 웹 문서로 링크되는 기능
 select 태그에 onChange 이벤트를 이용
<form name="form" method="get">
<select name=“Broad" onChange="window.open(this.options[this.selectedIndex].value, '_blank')">
<option>방송국선택</option>
<option value="http://www.kbs.co.kr">한국방송공사</option>
<option value="http://www.mbc.co.kr">문화방송</option>
<option value="http://www.sbs.co.kr">서울방송</option>
</select>
</form>
06_7.html
여러 줄 텍스트 입력 : <textarea> 태그
 TEXTAREA : 2 줄 이상의 텍스트 입력란을 생성(게시판 등)
 속성 및 속성값
<textarea rows=숫자>
텍스트 입력란의 줄 수를 지정
<textarea cols=숫자>
텍스트 입력란의 칸 수를 지정(문자 개수)
 예 : 5줄, 20칸의 텍스트 입력란 생성
<form>
<textarea rows=5 cols=20>
여러줄의 내용을 입력
</textarea>
</form>
06_8.html
관련있는 컨트롤 묶기 : <fieldset>…</fieldset>
 FIELDSET 태그 : 서로 관련있는 컨트롤들을 하나로 묶음
 하부 태그인 LEGEND는 컨트롤 묶음에 제목을 붙이는 역할
<form>
<fieldset>
<legend>개인 정보</legend>
성명 <input type="text"><br>
주소 <input type="text">
</fieldset>
<fieldset>
<legend>건강 기록</legend>
<input type="checkbox"> 간염
<input type="checkbox"> 심장이상
<input type="checkbox"> 관절염
</fieldset>
<fieldset>
<legend>현재의 건강상태</legend>
현재의 건강에 이상이 있습니까?
<input type="radio">예
<input type="radio">아니오<br>
질문 사항이 있으시면 아래에
내용을 적어 주세요
<textarea rows="10" cols="40">
</textarea>
</fieldset>
</form>
06_9.html
한글 입력 전송
 입력양식에 한글을 입력하고 전송 버튼을 클릭하면 주소입력창에 16진수로 표시
 KSC5601 완성형
 “긴” : %B1%E4 로 전달(영문자는 그대로 전달)
B1
00
01
02
03
04
05
06
07
08
09
0A
0B
0C
0D
0E
0F
D0
귈
귐
귑
귓
규
균
귤
그
극
근
귿
글
긁
금
급
긋
E0
긍
긔
기
긱
긴
긷
길
긺
김
깁
깃
깅
깆
깊
까
깍
F0
깎
깐
깔
깖
깜
깝
깟
깠
깡
깥
깨
깩
깬
깰
깸
한글 입력 전송
 예 : 이름과 비밀번호 전송(빈칸은 + 기호, 각 컨트롤들은 &로 구분)
<form method=get action="cgi-bin/>
이 름<input type=text size=20 name=username>
비밀번호<input type=password size=16 name passwd>
</form>
?username=%B1%E8+%C0%E7%C8%A3&passwd=jhkim
문장 스크롤 : <MARQUEE>
 문장들이 상하, 좌우로 흘러가게 하는 효과
 속성 및 속성값
<marquee direction= left|right|up|down)>
문장이 흘러가는 방향 지정
<marquee behavior
= scroll|slide|alternate>
- scroll : 스크롤 되던 문장이 브라우저 경계까지
도달했을 때 마지막 부분까지 브라우저 내에
나타나게 함.
- slide : 스크롤 되던 문장의 첫부분이 브라우저
경계에 도달했을 때 사라지게 함.
- alternate : 스크롤 되던 문장의 첫부분이 브라우저
경계에 도달했을 때 반대 방향으로
다시 표시되게 함.
<marquee scrollamount=픽셀값>
한번에 보이는 양(pixel 단위)
<marquee scrolldelay=숫자>
글자가 흘러가는 속도(클수록 느림)
<marquee loop=숫자|infinite>
반복되는횟수나 무한반복(infinite) 지정
<MARQUEE> 예제
 예 : 왼쪽에서 오른쪽으로 문장이 진행되다가 브라우저 경계를 만나면
반대 방향으로 진행
<marquee direction=right behavior=alternate loop=infinite>
여기에 있는 문장이 스크롤 됩니다.
</marquee>
06_10.html
 예 : 오른쪽에서 왼쪽으로 2번 진행
<marquee direction=left behavior=scroll scrollamount=10 scrolldelay=200 loop=2>
여기에 있는 문장이 스크롤 됩니다.
</marquee>
06_11.html
배경음악
 홈페이지 배경음악으로 활용
 사운드 파일 삽입 : <bgsound> 익스플로러에서만 가능
 속성 및 속성값
<bgsound src="URL">
사운드 파일 이름의 URL 지정
<bgsound loop=n|infinite>
사운드 파일의 재생 횟수를 지정
infinite는 무한 반복 재생
 예제 : 무한 반복 재생
<bgsound src="dagim.mid" loop=infinite>
음악을 감상하면서 홈페이지 구경하세요<br>
필요하시면 <a href="dagim.mid">다운</a>받으세요!
</bgsound>
06_12.html
동영상 실행
 동영상 파일 삽입 : <embed> 태그
 속성 및 속성값
<embed src="URL">
동영상 파일의 URL 지정
<embed border=숫자>
동영상 주위의 테두리선 두께 지정
<embed height=숫자>
동영상 높이 지정
<embed width=숫자>
동영상 폭 지정
<embed autostart=true|false>
true로 설정하면 접속과 동시에 자동으로 동영상 파일이 동작
<embed controller=true|false>
동영상 플레이어를 나타나게 하여 동영상 파일을 일시 정지
하거나, 재실행하는 등의 조절한다.
<body>
<embed src=“king.mpeg" width=200 height=200
controller=true>
</body>
06_13.html
실습
•
•
•
Marquee 태그
사운드
동영상
영상을 더블 클릭하시면 전체화면으로 볼 수 있습니다.
게시판/방명록
 홈페이지 장식에 필수
 무료로 등록하여 링크 활용
 무료 방명록/게시판 등록사이트
 방명록 사용 예
<a href="http://guest2.free.cgiserver.net/CrazyGuestbook.cgi?db=myboard">방명록</a>
 게시판 사용 예
<a href="http://www.bbs4u.com/Board/ViewBoard.asp?bcode=mybbs">게시판</a>
카운터
 방문객수 표시
 날짜/시간 표시
 카운터 예시
구분
사용예
카운터
<img src = "http://www.webkorea.com/count/count.cgi?
df=sample.dat&dd=B">
시간
<img src = "http://www.webkorea.com/count/count.cgi?
display=clock">
날짜
<img src = "http://www.webkorea.com/count/count.cgi?
display=date">
형태
 사용 예
<img src="http://www.webkorea.com/~free/counter/count.cgi?df=sample.dat&dd=100">
Offline 브라우저
 연결되지 않을 상태에서 인터넷 정보를 이용하는 것(한번 연결후)
 제작배경
 전화선을 이용한 과거 인터넷 환경에서 통신비 절약목적
 현재는 원하는 사이트의 파일들을 일괄로 저장
 오프라인 브라우저의 기능
 현재 웹 문서를 구성하고 있는 모든 파일을 저장
 현재 웹 문서에서 링크하고 있는 하부 웹 문서 파일들을 모두 저장
 현재 웹 문서(URL)의 하부 디렉토리의 깊이를 지정하여 그 깊이까지
링크되어있는 모든 웹 문서 파일을 저장
 현재 웹 문서에서 링크하고 있는 외부사이트 링크의 웹 문서 파일들
을 저장
 오프라인 브라우저의 종류
 Webextractor, BlackWidow, WebWhacker, Teleport
 Webextractor, Teleport 사용법 소개