<div style="width:740px; height:410px; overflow-y:scroll;" >
</div>
'DevTool/HTML'에 해당되는 글 18건
- 2012.04.18 DIV 스크롤.
- 2009.06.01 form 태그 종합 테스트
- 2009.06.01 form 태그... 입력태그들..
- 2009.05.29 iframe 부분...
- 2009.05.29 frame 관련.. target부분 순간생각안나면 보면됨.
- 2009.05.28 Table - 특이사항없음
- 2009.05.28 meta 태그..
- 2009.05.27 이미지 map활용 링크
- 2009.05.27 Embed 멀티미디어 사용토록.
- 2009.05.27 Marquee ... 아직까지 살아있을려나?. 보고지나가기.
***** 0601ex02.htm ******
<html>
<frameset rows="80,*">
<frame src="0601ex02a.htm">
<frameset cols="200,*">
<frame src="0601ex02b.htm" noresize>
<frame src="0601ex02c.htm" name="view">
</html>
***** 0601ex02a.htm ******
<html>
<body>
<center>
<h2>인터넷 정보검색사 1급 2차 2교시 답안지<br>
제출자 : IIF-03-005055 홍길동
</h2>
</center>
</body>
</html>
***** 0601ex02b.htm ******
<html>
<body>
<a href="0601ex02c.htm#q1" target="view">문제1</a><br><br>
<a href="0601ex02c.htm#q2" target="view">문제2</a><br><br>
<a href="0601ex02c.htm#q3" target="view">문제3</a><br><br>
</body>
</html>
***** 0601ex02c.htm ******
<html>
<body>
<a name="q1"></a>
문제1.<br><br>
<table border="1">
<tr><td colspan="2">접수번호</td><td>IIF-03-005055</td></tr>
<tr><td colspan="2">주민등록번호</td><td>700204-1492345</td></tr>
<tr><td rowspan="2">이름</td><td>한글</td><td>홍길동</td></tr>
<tr><td>영문</td><td>Hong Gil Dong</td></tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<a name="q2"></a>
문제2.<br><br>
<table border="1">
<tr><td align="center">이름</td><td colspan="2"><input type="text" name="q2name"></td></tr>
<tr><td align="center" rowspan="2">연락처</td><td>주소</td><td><input type="text" name="q2name"></td></tr>
<tr><td>전화</td><td><input type="text" name="q2phone1" size="10">-<input type="text" name="q2phone2" size="10"></td></tr>
<tr><td align="center">주민등록번호</td><td colspan="2"><input type="text" name="q2pernum1"><input type="password" name="q2pernum1"></td></tr>
<tr><td align="center">병력사항</td><td colspan="2">
<input type="radio" name="q2army" value="complete">군필
<input type="radio" name="q2army" value="uncomplete">미필
<input type="radio" name="q2army" value="pass">면제
</td></tr>
<tr><td align="center">가능외국어</td>
<td colspan="2">
<select name="langs" size="1">
<option value="-1">가능외국어 선택</option>
<option value="1">영어</option>
<option value="2">일어</option>
<option value="3">중어</option>
</td></tr>
<tr><td align="center">자기소개</td><td colspan="2"><textarea rows="5" cols="80" name="produce"></textarea></td></tr>
<tr><td colspan="3" align="center"><input type="submit" value="전송"><input type="reset" value="재입력"></td></tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<a name="q3"></a>
문제3.<br><br>
<center><h3><인터넷 관련 소식></h3></center>
<u>한국정보사회진흥원</u> 등 관련기관은 한 기관에 한 개의 kr도메인만을 발급했<br>
던 것을 오는 4월부터는 <i>상표,상호,지적재산권</i> 등에 대해서도 <u>kr도메인이<br>
름을 할당</u>받을 수 있도록 확대해 시행할 것이라고 밝혔다.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
<h2>Form 태그 : 여러가지 입력양식</h2>
<form name="inform" method="get" action="go.jsp" enctype="multipart/form-data">
form 태그 name 속성으로 form이름을 지정.<br>
form 태그 medthod 속성으로 전송방식 설정(get:url뒤에전송,post:내부전송)<br>
get방식 ex) http://www.abc.com/index.html?act=1<br>
form 태그 medthod 속성으로 서버 파일이름지정.<br>
form 태그 enctype 속성으로 전송될 데이터 타입지정(파일타입이있을경우 multipart/form-data)<br>
<hr>
id : <input type="text" name="name" size="40"><br>
input 태그 type="text" 속성으로 텍스트 입력박스 사용<br>
input 태그 size 속성으로 크기 지정<br>
password : <input type="password" name="name" size="40"><br>
input 태그 type="password" 속성으로 *표시 텍스트 입력박스 사용<br>
취미 : <input type="checkbox" name="hobby" value="travel" checked>여행
<input type="checkbox" name="hobby" value="sport">운동<br>
input 태그 type="checkbox" 속성으로 표시선택 입력박스 사용<br>
input 태그 value 속성으로 넘어갈 값으로 사용<br>
input 태그 checked 속성으로 선택됨으로 표시<br>
성별 : <input type="radio" name="gen" value="male">남자
<input type="radio" name="gen" value="female">여자<br>
input 태그 type="radio"으로 단일선택 입력박스 사용<br>
나이 : <select name="age" multiple size="2">
<option value="-1">나이선택</option>
<option value="10">10대</option>
<option value="20">20대</option>
<option value="30">30대</option>
<option value="40">40대</option>
<option value="50">50대</option>
<option value="50대이상">50대이상</option>
</select><br>
select 태그로 콤보박스 사용<br>
select 태그사이 option 태그로 옵션정보 사용<br>
select 태그 multiple 속성으로 여러개 사용가능 설정<br>
select 태그 size 속성으로 보여줄 갯수 설정<br>
<textarea name="content" rows="10" cols="60">
textarea 태그 rows 속성으로 줄수 지정
textarea 태그 cols 속성으로 열수 지정
</textarea><br>
파일선택 <input type="file" name="file1" ><br>
input 태그 type="file" 속성으로 파일선택을 지정<br>
<input type="submit" value="전송">
input 태그 type="submit" 속성으로 전송버튼 지정<br>
<input type="reset" value="취소">
input 태그 type="reset" 속성으로 전송취소버튼 지정<br>
<input type="button" value="아이디찾기">
input 태그 type="button" 속성으로 버튼 지정<br>
<input type="image" src="image/img1.gif">
input 태그 type="image" 속성으로 이미지버튼 지정<br>
</form>
</html>
<html>
<body>
특정위치에 다른 문서 불러오는 기능.<br>
<iframe src="0529ex02b.htm" width="400" height="300" name="here" frameborder="yes">
</iframe><br>
iframe 태그 src 속성으로 링크할 문서지정<br>
iframe 태그 name 속성으로 이iframe 이름을 지정<br>
iframe 태그 width,height 속성으로 크기지정<br>
iframe 태그 frameborder 속성으로 경계선 여부(yes,no)<br>
iframe 태그 scrolling 속성으로 스크롤여부(yes,no,auto)<br>
iframe 태그 marginheight,marginwidth 속성으로 상하/좌우 안쪽 여백조정<br>
iframe 태그 vspace,hspace 속성으로 상하/좌우 바깥쪽 여백조정<br>
<br>
<br>
예문)
이화면 이용약관<br>
<iframe src="0529ex02b.htm">
</iframe><br>
<input type="checkbox"> 이용약관에 동의 안 합니다.<br>
<br>
아래는 iframe에 target을 준화면이라는 것.<br>
052902a는 처음화면이고<br>
052902b는 에펠탑설명<br>
<table bgcolor="gray">
<tr>
<td>
<a href="052902b.htm" target="view">에펠탑</a>
</td>
<td>
<a href="http://www.mozilla.org/procuts/firefox" target="view">모질라 파이어폭스</a>
</td>
<td>
<a href="http://www.empas.com" target="view">엠파스</a>
</td>
</tr>
</table>
<iframe width="500" height="400" frameborder="no" scrolling="no" src="052902a.htm" marginwidth="15" name="view">
</iframe>
</body>
</html>
***** 052902a.htm 파일 ****** // 초기화면 - -
<html>
<body>
메뉴 클릭.. 클릭..
</body>
</html>
***** 052902b.htm 파일 ****** //설명화면 --
<html>
<body>
에펠탑<br>
그건 말이쥐.<br>
프랑스에 있는거이여<br>
더 자세히 할고 싶음.<br>
아래 설명을 잘 봐<br>
-- 중략 --<br>
상세한 내용은 네이버 찾아봐<br>
타자연습하기 좀<br>
</body>
</html>
<frameset rows="30%,*">
내용은 안보임.
frameset 태그 cols 속성으로 수직으로 프레임을 나눌수 있다(픽셀/비율)
frameset 태그 rows 속성으로 수직으로 프레임을 나눌수 있다(픽셀/비율)
frameset 태그 frameborder 속성으로 경계선 출력유무 - 기본값 yes
frameset 태그 framespacing 프레임간 간격지정
<frame>
내용은 안보임.
frame 태그 src 속성으로 보여줄 문서지정
frame 태그 name 속성으로 프레임 이름 지정, 링크시 프레임선택할수있도록.
frame 태그 scrolling 속성으로 프레임 스크롤바 유무(auto,yes,no)
frame 태그 marginwidth 속성으로 프레임 좌우 여백지정
frame 태그 marginheight 속성으로 프레임 상하 여백지정
frame 태그 noresize 속성으로 프레임 크기 조정 못하게함. 뒤에 no,yes안붙음.
<frameset cols="200,*">
<frame src="052500.txt" name="onlyview" scrolling="no" noresize>
<frame src="052901a.htm" name="processview">
</frameset>
</html>
*** 052901a.htm 파일 ***
<html>
<frameset cols="200,*">
내용안보임
이미 나눠진 프레임도 다시 나눌수 있음.
<frame src="052901b.htm" name="framediv1" scrolling="no" noresize>
<frame src="052901c.htm" name="framediv2">
</frameset>
</html>
*** 052901b.htm 파일 ***
<html>
<title>052901b.htm</title>
<body>
고 프레임내 좌측에 해달할 내용들<br>
좌 측<br>
내용안바뀌는 이유중 하나 :<br>
리로드시 이전기억, 다시실행정상확인.
</body>
</html>
*** 052901c.htm 파일 ***
<html>
<title>052901c.htm</title>
<body>
고 프레임내 우측에 해달할 내용들<br>
frame과 링크관계...<br>
<a href="http://kr.yahoo.com" target="_top">전체창으로</a><br>
<a href="http://kr.yahoo.com" target="_blank">새창으로</a><br>
<a href="http://kr.yahoo.com" target="_self">현재창에</a><br>
<a href="http://kr.yahoo.com" target="_parent">부모창에</a><br>
<a href="http://kr.yahoo.com" target="onlyview">지정창, frame태그 name속성 이름</a><br>
</body>
</html>
<html>
<body>
<h1>table : 표</h1>
<table border="1" width="400" height="400" bordercolor="blue">
<tr>
<td>
table 태그 속성<br>
border : 테이블 테두리 두께, 기본 0<br>
width : 테이블 길이<br>
height : 테이블 높이<br>
bordercolor : 테이블 선 색상
</td>
<td>
tr : 테이블 줄<br>
td : 테이블 열
</td>
</tr>
<tr>
<td>
-
</td>
<td>
-
</td>
</tr>
</table>
<table border="1" width="400" height="400" bordercolor="blue" align="center" bgcolor="gray">
<tr>
<td>
table 태그에 align 속성으로 정렬(left,center,right)<br>
table 태그에 bgcolor 속성으로 배경색상<br>
table 태그에 background 속성으로 배경이미지
</td>
<td>
table 태그에 cellspacing 속성으로 셀과 셀사이 간격<br>
table 태그에 cellpadding 속성으로 셀안의 여백 설정<br>
</td>
</tr>
</table>
<table border="1" width="400" height="400">
<tr align="center" bgcolor="silver" valign="top">
<td>
tr 태그에 align 속성으로 줄내 글자 수평 정렬(left,center,right)<br>
tr 태그에 valign 속성으로 줄내 글자 수직 정렬(top,middle,bottom)<br>
tr 태그에 bgcolor 속성으로 배경색상<br>
tr 태그에 background 속성으로 배경이미지
</td>
<td>
-
</td>
</tr>
</table>
<table border="1" width="400" height="400">
<tr>
<td align="center" bgcolor="silver" valign="top">
td 태그에 align 속성으로 셀내 글자 수평 정렬(left,center,right)<br>
td 태그에 valign 속성으로 셀내 글자 수직 정렬(top,middle,bottom)<br>
td 태그에 bgcolor 속성으로 셀 배경색상<br>
td 태그에 background 속성으로 셀 배경이미지
</td>
<td rowspan="2" bgcolor="green">
td 태그에 rowspan 속성으로 셀의 줄을 합칠때...<br>
2번자리 들어갈곳과 합쳐짐.<br>
합칠때는 다음줄에 td하나 비워지게 계산해야함..
</td>
<td colspan="2" bgcolor="green">
td 태그에 colspan 속성으로 셀의 열을 합칠때<br>
</td>
</tr>
<tr>
<td>
1번자리
</td>
<td>
3번자리
</td>
<td>
4번자리
</td>
</tr>
</table>
<br>
해보기 . . . <br> 4*4 테이블 만든다음.
<table border="1">
<tr>
<td>
00---
</td>
<td>
01---
</td>
<td>
02---
</td>
<td>
03---
</td>
</tr>
<tr>
<td>
10---
</td>
<td>
11---
</td>
<td>
12---
</td>
<td>
13---
</td>
</tr>
<tr>
<td>
20---
</td>
<td>
21---
</td>
<td>
22---
</td>
<td>
23---
</td>
</tr>
<tr>
<td>
30---
</td>
<td>
31---
</td>
<td>
32---
</td>
<td>
33---
</td>
</tr>
</table>
<br>
<table border="1" bordercolor="green">
<tr>
<td>
00---
</td>
<td rowspan="2">
01---
</td>
<td>
02---
</td>
<td>
03---
</td>
</tr>
<tr>
<td>
10---
</td>
<td colspan="2" rowspan="2">
12---
</td>
</tr>
<tr>
<td colspan="2">
20---
</td>
</tr>
<tr>
<td>
30---
</td>
<td>
31---
</td>
<td>
32---
</td>
<td>
33---
</td>
</tr>
</table>
<br>
해보기는 해봤으니. 이젠.. 달 ..?<br>
<br>깨져보이는 저것은?
<table bordercolor="gold" border="1">
<tr align="center" valign="middle" height="50">
<td colspan="6">
<b>주 소 록</b>
</td>
</tr>
<tr align="center" valign="middle">
<td rowspan="2" width="100">
이 름
</td>
<td colspan="2">
전 화
</td>
<td rowspan="2" colspan="2">
주 소
</td>
<td rowspan="2" width="100">
나 이
</td>
</tr>
<tr align="center" valign="middle">
<td width="100">집전화</td>
<td width="100">핸드폰</td>
</tr>
<tr align="center" valign="middle">
<td>홍길동</td>
<td>OOOO</td>
<td>OOOO</td>
<td colspan="2" align="left">OOOO</td>
<td>나 이 없어</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2" rowspan="2">
<img src="C:\WINDOWS\Web\bullet.gif"><br>
이미지
</td>
<td rowspan="2">
취미
</td>
<td width="100">
취미1
</td>
<td colspan="2" width="100">
스포츠
</td>
</tr>
<tr align="center" valign="middle">
<td>
취미2
</td>
<td colspan="2">
영화
</td>
</tr>
</table>
<br>
허걱... 원인은 알다시피 크기가 지정된것이 없어서... 깨져보임.<br>
table 태그에 width넣어두고 사용해야함<br>
맨오른쪽이 실제여분보다 커지면 오른쪽으로 늘어남<br>
colgroup 혹은 정녕 빈칸 한줄 넣는 방법도 있죠?<br>
<table bordercolor="gold" border="1" width="600px">
<colgroup>
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
</colgroup>
<tr align="center" valign="middle" height="50">
<td colspan="6">
<b>주 소 록</b>
</td>
</tr>
<tr align="center" valign="middle">
<td rowspan="2">
이 름
</td>
<td colspan="2">
전 화
</td>
<td rowspan="2" colspan="2">
주 소
</td>
<td rowspan="2">
나 이
</td>
</tr>
<tr align="center" valign="middle">
<td>집전화</td>
<td>핸드폰</td>
</tr>
<tr align="center" valign="middle">
<td>홍길동</td>
<td>OOOO</td>
<td>OOOO</td>
<td colspan="2" align="left">OOOO</td>
<td>나 이 없어</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2" rowspan="2">
<img src="C:\WINDOWS\Web\bullet.gif"><br>
이미지
</td>
<td rowspan="2">
취미
</td>
<td>
취미1
</td>
<td colspan="2">
스포츠
</td>
</tr>
<tr align="center" valign="middle">
<td>
취미2
</td>
<td colspan="2">
영화
</td>
</table>
</body>
</html>
<body>
<h1>Meta : 웹사이트의 정보를 나타낸다</h1>
<meta name="generator" content="notepade">
<!-- 웹사이트 제작시 사용툴표시 -- 전혀 중요치 않음. -->
<meta name="author" content="author">
<!-- 웹사이트 제작자 표시 -- 전혀 중요치 않음 -->
<meta name="keywords" content="meta,tag">
<!-- 검색엔진 검색할 키워드 -- 이엔진 사용하는곳은 요즘은 없을텐데 -->
<meta name="description" content="테그">
<!-- 사이트 주제? 그냥 설명이죠. -->
<meta http-equiv="refresh" content="5;url=http://kr.yahoo.com">
<!-- 열린후 5초지난후 사이트로 이동, 조금 쓰일려나? -->
5초후 네이x가 아닌 다른곳으로 이동합니다.
</body>
</html>
<body>
<h1>이미지 map활용 링크</h1>
<xmp>
<img src="image/imagemap.jpg" usemap="#map1">
<map name="map1">
사각형:rect x1,y1,x2,y2 ..
원:rect x,y,반지름
다각형:rect x1,y1,x2,y2,..
<area shape="rect" coords="367,75,453,138" href="http://kr.yahoo.com" alt="내이버 아님">
<area shape="circle" coords="266,199,10" href="http://www.google.co.kr" alt="눌러봐..">
<area shape="poly" coords="172,79,87,140,170,139" href="http://www.naver.com" alt="그래 내이버다.">
</map>
</xmp>
<img src="image/imagemap.jpg" usemap="#map1">
<map name="map1">
<area shape="rect" coords="367,75,453,138" href="http://kr.yahoo.com" alt="내이버 아님">
<area shape="circle" coords="266,199,10" href="http://www.google.co.kr" alt="눌러봐..">
<area shape="poly" coords="172,79,87,140,170,139" href="http://www.naver.com" alt="그래 내이버다.">
</map>
</body>
</html>
<html>
<body>
<xmp>
<marquee>움직이는 글자</marquee>
</xmp>
<marquee>
움직이는 글자
</marquee>
<xmp>
<marquee behavior="scroll">한쪽방향으로 반복 - 기본</marquee>
</xmp>
<marquee behavior="scroll">한쪽방향으로 반복 - 기본</marquee>
<xmp>
<marquee behavior="slide">반대편 끝에서 정지</marquee>
</xmp>
<marquee behavior="slide">반대편 끝에서 정지</marquee>
<xmp>
<marquee direction="right">오른쪽으로</marquee>
</xmp>
<marquee direction="right">오른쪽으로</marquee>
<xmp>
<marquee direction="left">왼쪽으로 - 기본</marquee>
</xmp>
<marquee direction="left">왼쪽으로 - 기본</marquee>
<xmp>
<marquee direction="up">위쪽으로</marquee>
</xmp>
<marquee direction="up">위쪽으로</marquee>
<xmp>
<marquee direction="down">위쪽으로</marquee>
</xmp>
<marquee direction="down">위쪽으로</marquee>
<xmp>
<marquee loop="1">반복횟수</marquee>
</xmp>
<marquee loop="1">반복횟수</marquee>
<xmp>
<marquee loop="-1">무한 반복</marquee>
</xmp>
<marquee loop="-1">무한 반복</marquee>
<xmp>
<marquee scrollamount="50">한번에 이동하는 거리 픽셀단위</marquee>
</xmp>
<marquee scrollamount="50">한번에 이동하는 거리</marquee>
<xmp>
<marquee scrollamount="50" scrolldelay="1000">1초후에 50픽셀씩 이동</marquee>
</xmp>
<marquee scrollamount="50" scrolldelay="1000">1초후에 50픽셀씩 이동</marquee>
<xmp>
<marquee width="100" height="100" direction="down">width 너비, height:높이 지정</marquee>
</xmp>
<marquee width="100" height="100" direction="down">width 너비, height:높이 지정</marquee>
</body>
</html>