|
<FORM 태그를 이용한 양식문서 만들기>
* 서버로 자료전송시, 한번에 갈 데이터를 <form>으로 시작해서 </form>으로 마무리 해서 전송.
* form 작성시, 반드시 table을 만들어 form을 작성해야 깔끔하다.(body안에 기술)
* 폼삽입 : input 태그 사용
* input 태그 속성별로 실습
1. type="text"
<form method="" action=""> <!-- action은 php프로그램을 작성해서 파일을 연결만 해주 면 됨. -->
성명 : <input type="text" name="name" size="20" maxlength="10" > <BR>
<!-- text상자안에 256자까지 입력 가능 -->
아이디 : <input type="text" name="id" size="20" maxlength="6" value="mjbang"><br>
<!-- value에 주는값 : 초기값이라함 -->
비밀번호: <input type="text" name="pwd" size="20"><br>
이메일 : <input type="text" name="email" size="40"><br>
</form>
☆ 폼에 데이터를 입력하기 전에 DB가 먼저 구축이 되어있어야 함.
('name'의 이름과 갯수가 데이타 항목과 일치해야 한다.= 프로그램에서의 변수와 동일)
2. 패스워드 필드 삽입하기 : type="password"
비밀번호: <input type="password" name="pwd" size="20"><br>
3. submit 과 reset
<input type="submit" value="전송"> <!-- submit : 전송하다 -->
<input type="reset" value="취소"> <!-- reset : 초기화함 -->
file:///C:/Documents%20and%20Settings/Administrator/바탕%20화/Myhomepage/form.htm?name=&id=mjbang&pwd=1235&email=
→ get 방식 : 기본 (주소의 뒤에 값이 붙어서 전송 : 보안을 요하지 않는 방식 ,
주로 검색엔진이나 게시판에서 사용되는 방식으로 가장 간편한 방식임.
보낼수 있는 데이터 량 256byte ~ 4095 byte까지)
※ 한글을 파일이름이나 검색어로 줄경우 인코딩/디코딩 과정을 거치므로 속도가 느려짐.
- 홈페이지의 파일명은 영문으로 주는것이 유리.
file:///C:/Documents%20and%20Settings/Administrator/바탕%20화면/Myhomepage/form.htm?name=&id=mjbang&pwd=&email=
→ post 방식 : 4KB 이상의 데이터량이나 보안을 요하는 데이터일 경우에 사용.
( 게시판의 내용 입력 : 양이 많아 지므로 post 방식 사용. 주소줄에 안보임.)
사용예: <form method="post" action=""> - method 생략시 기본방식 : get 임.
* 설문항목 만들기 (라디오버튼과 체크박스)
<BR><BR>
당신의 성별은? <BR> <!-- 라디오버튼 : 여러개 중에 한개의 항목만 선택 -->
<!-- name을 같이 주는 이유 : 그룹으로 묶어 하나선택시 다른하나 해제 -->
<input type="radio" name="sung" value="male"> 남자 <BR>
<!-- 버튼옆에 쓰여지는 이름, 값은 value로 전달. -->
<input type="radio" name="sung" value="female" checked > 여자 <BR>
<!-- db에는 male과 female로 저장됨. -->
당신이 좋아하는 과목은 ? <BR>
<!-- 체크버튼 : 여러항목 선택시 사용.
하나의 항목에 저장되라는 의미에서 같은 이름을 줌. -->
<input type="checkbox" name="subject" value="" checked>DHTML<BR>
<input type="checkbox" name="subject" value=""> Linux 서버<BR>
<input type="checkbox" name="subject" value=""> My SQL로 DB구축<BR>
<input type="checkbox" name="subject" value=""> PHP 프로그램 <BR>
<input type="checkbox" name="subject" value=""> 보안, 인증 <BR>
* 선택목록 만들기 :
- <select> ~ </select>
- <option> 이용해서 속성지정.
- selected : 초기 선택항목 지정.
<BR><BR>
당신이 좋아하는 연예인은 ?<br>
<select name="star1"> <!-- 콤보박스 (사이즈 없음) -->
<option value="이나영"> 이나영 </option>
<option value="장진영"> 장진영 </option>
<option value="한채영"> 한채영 </option>
<option value="지진희"> 지진희 </option>
<option value="양동근"> 양동근 </option>
</select>
<BR><BR>
당신이 싫어하는 연예인은 ?<br>
<select name="star2" size="5" multiple> <!-- 리스트 박스(사이즈 있음) -->
<!-- 위의 것과 다르게 값이 전달되려면 name을 다르게 해서 구분함.
size로 보이고싶음 만큼만 조절(부족하면 스크롤바 생김) ,
multiple : 다중항목 선택가능(ctrl과 shift사용) -->
<option value="이나영"> 이나영 </option>
<option value="장진영"> 장진영 </option>
<option value="한채영"> 한채영 </option>
<option value="지진희"> 지진희 </option>
<option value="양동근"> 양동근 </option>
</select>
* 텍스트 영역 필드 만들기 : <textarea> 태그
-<textarea> 태그를 닫을때 enter키를 누르지 말고 바로 닫는 태그 </textarea>를 써줄것.
- value 속성이 별도로 없고, 태그와 태그사이의 내용이 value가 됨.
- 닫는태그 앞에서 앤터를 누렀을 경우 커서의 위치가 원하지 않는 들여쓰기가 됨.
형식 :
당신의 소감은?<br>
<textarea name="option" cols="80" rows="8">감사합니다.</textarea>
* 그밖에 폼 관련 컨트롤(교재 136p 속성 참조)
- 보내질 데이터 : <input type="hidden" name="ip">
<!-- 문서와 문서에서 주고받는 키값을 숨기고 싶을때 -->
- 파일검색버튼 삽입 : <input type="file" name="file">
- 버튼 삽입: <input type="button" name="btn" value="click me">
=======================================================================
1. 특정한 영역에 대한 서식 : 태그안에 직접 스타일을 기술
형식 : <P style="text-indent:80px">
2. 스타일 시트의 형식 :
<style type="text/css">
<!--
( 브라우저에서 인식을 못하는 경우에는 주석으로 처리하라는 의미 )
-->
</style>
사용예)
<style type="text/css">
<!--
P { text-indent:"20px" ; color:blue;font-size="10pt"}
-->
</style>
3. 태그에서 무조건 반복되는 background 의 그림을 제어할 수 있다.
<style type="text/css">
<!--
P { text-indent:"20px"; color : blue;font-size="10pt"}
body {background-repeat:no-repeat }
-->
</style>
.
.
<body background="images/img01.jpg">
4. 같은 태그에서도 클래스 개념으로 다르게 구분할 수 있다. : 클래스 스타일 사용
<style type="text/css">
<!--
P.first { text-indent:"20px"; color : blue;font-size="10pt"}
P.second { text-indent:"20px"; color : red;font-size="13pt"}
body {background-repeat:no-repeat }
-->
</style>
.
.
<p class="first">
.
.
<p class="second">
.
.
5. 외부스타일시트 파일 이용하기
● CSS파일만들기
: css 영역복사 → 새파일(normal text : 빈문서 열기 )
→ 저장 : (파일명.CSS) → 붙이기 - 저장
● 문서보다 먼저 스타일을읽어야 하므로 head 안에 기입함.
<HEAD>
<TITLE> 외부 파일로 스타일 적용</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
※ 스타일시트의 우선순위
1. 태그안의 스타일 - 2. head안의 클리스 개념의 스타일 - 3. 링크시킨 스타일시트파일
- 2번보다 아래에 3번을 기술하면 3번에게 우선순위가 부여됨.
<예>
<style type="text/css">
<!--
P.first { text-indent:"20px"; color : blue;font-size="10pt"}
P.second { text-indent:"20px"; color : red;font-size="13pt"}
body {background-repeat:no-repeat }
-->
</style>
<link rel="stylesheet" type="text/css" href="style.css">
/* 스타일시트 파일안의 속성이 적용됨 */
</HEAD>
※ background 속성 적용 예 (style.css 파일 내용)
/* 스타일시트 파일에서의 주석형식. */
P { text-indent:"20px"; color : orange ;font-size="10pt"}
/*P.first { text-indent:"20px"; color : orange ;font-size="10pt"}
P.second { text-indent:"20px"; color : pink ;font-size="13pt"} */
body {background-repeat:no-repeat ;
background-position: 50% 50% ; /* 그림을 가운데 위치 */
background-attachment: fixed } /* 그림을 고정 (유리위에 그림이 있는것 같은 효과)*/
}
- 웹문서에서 사용 형식
: <link rel="stylesheet" type="text/css" href="style.css">
* 링크문자열의 밑줄을 css에서 없애기.
a {text-decoration:none} /*링크문자열의 밑줄을 지워줌. */
< 해당 웹문서에서 >
<HEAD>
<TITLE> 목차 페이지 </TITLE>
<link rel ="stylesheet" type="text/css" href="style.css"}
</HEAD>
* 링크의 종류별로 일정한 모양을 갖게 하는 스타일
a:link {text-decoration:none; /* 링크 자체의 스타일 */
color:white; font-size:11pt}
a:visited {text-decoration:none; /* 방문했던 링크에 대한 스타일 */
color:white; font-size:11pt}
a:active {text-decoration:none; /* 링크를 플릭하는 순간의 스타일 */:
color:white; font-size:11pt}
a:hover {text-decoration:underline; /* 마우스를 올렸을때의 스타일 */
color:red; font-size:13pt}
* 표를 만들지 않고 테두리선 만드는 스타일
P { text-indent:"20px"; color : orange ;font-size="10pt";
margin: 1cm ; /* 사방을 똑같은 간격으로*/
background:yellow;
border-width:5px; border-color:black;
border-style: groove}
=============================================================================
* <frame> 태그의 속성들
- 'border=0' 으로 하면 noresize를 안해도 크기 조절이 안됨.
: <frameset rows="100,* ,100" border="0" >
- 'frameborder=0'으로 하면 크기조절이 가능하므로 크기 조절이 안되게 하려면 noresize
를 사용할 것. : <frameset rows="100,* ,100" frameborder="0" >
<홈페이지 문서 만드는 과정>
1. 메뉴 파일 만들기 : 왼쪽 페이지에 목차 만들기
<HTML>
<HEAD>
<TITLE> 목차 페이지 </TITLE>
</HEAD>
<BODY link="white" vlink="white" alink="white">
<BR><BR>
<TABLE align="center" cellpadding="2" cellspacing="2" width="95%">
<TR bgcolor ="#FF9900">
<Th><A HREF="html001.html" target="_blank">첫번째 문서</A></Th> <!-- 새창으로 띄움 -->
</TR>
<TR bgcolor ="#FF9900">
<Th><A HREF="html002.html" target="right" >두번째 문서</A></Th>
</TR>
<TR bgcolor ="#FF9900">
<Th><A HREF="html005.html" target="right">세번째 문서</A></Th>
</TR>
<TR bgcolor ="#FF9900">
<Th><A HREF="html007.html" target="right">네번째 문서</A></Th>
※ <Th><A HREF="html007.html" target="_top">네번째 문서</A></Th>
: 새창으로 넘어가지 않고 현재의 창전체에 링크문서의 내용을 표시함.
</TR>
</TABLE>
</BODY>
</HTML>
2. 오른쪽 문서 만들기
<HTML>
<HEAD>
<TITLE> 메인화면 </TITLE>
</HEAD>
<BODY>
<br>
<TABLE align="center" cellpadding="2" cellspacing="2">
<TR align="center">
<TD><IMG SRC="images/logo1.gif.gif" WIDTH="240" HEIGHT="54" BORDER="0" ALT=""></TD>
</TR>
<TR align="center">
<TD><IMG SRC="images/bg_home1.jpg" WIDTH="650" HEIGHT="488" BORDER="0" ALT=""></TD>
</TR>
<TR >
<TD><FONT SIZE="" COLOR="blue"><marquee behavior="alternate">오늘도 행복한 하루되세요.</marquee></FONT></TD>
</TR>
</TABLE>
</BODY>
</HTML>
3. 프레임정보를 갖은 문서
: 프레임은 body의 밖에 기술할 것.
* 프레임을 나누는 이유 : 메뉴를 항상 화면에 띄우기 위함.
<HTML>
<HEAD>
<TITLE> 나의 허접 페이지 </TITLE>
</HEAD>
<FRAMESET ROWS="," COLS="160,*" frameborder=0 border=0>
<FRAME SRC="test01.htm" NAME="left">
<!-- 프레임 창의 이름을 name에서 사용자가 정의 -->
<FRAME SRC="test02.htm" NAME="right">
</FRAMESET>
</HTML>
* 문서안에 또다른 문서를 삽입하는 것: <iframe> 태그 (교재 129p~ )
<iframe src="html001.html" width="250" height="250" </iframe>
* 태그의 문제점.
- 들여쓰기
- 링크밑줄
- 배경그림 삽입시. (큰그림을 반복안되게 가운데 위치시키기)
- font size 를 픽셀로 표현이 불가함.
*태그의 문제점을 보완할 수 있는 것이 Cascading Style Sheet (CSS) 임
* 스타일 시트작성법 : 위치, 크기, 색상등만 지정이 가능
1. <tag> 안에 쓰는 방법 : 한줄만 사용할 때 (최우선 순위 적용)
2. <head> 영역에 만드는 방법 : 해당 문서 전체에 적용.
3. 외부파일로 만들어서 링크시키는 방법(*.css로 저장) : 사이트가 큰경우에 대부분 사용.
* css 소스 저장하는 법
- css 문서위치를 브라우저상에서 열기 - edit plus 로 불러들임.
==============================================================
* 사운드 파일 연결하기
- 외부 사운드 파일 재생
: <a href ="evergreen.mp3">음악듣기</a><br><br>
- 자동으로 시작하는 배경음악 삽입
: <embed src="evergreen.mp3" >
속성1. hidden =true : 컨트롤러를 화면에 안보여줌.
<table> - 교재88p ~
* table 만들기
1. 기본틀
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
2. 3*3의 테이블 작성.(border의 기본값은 0으로 테두리선은 없음. 주로 0이나 1만 사용됨)
<table border=1>
<tr>
<td>박찬호</td>
<td>박세리</td>
<td>박지은</td>
</tr>
<tr>
<td>지진희</td>
<td>이나영</td>
<td>정진영</td>
</tr>
<tr>
<td>한채영</td>
<td>선우용녀</td>
<td>한희</td>
</tr>
</table>
3. 셀의 안여백조절 : cellpadding , 셀과 셀 사이의 여백 조절 : cellspacing
: <table border=1 bordercolor = "blue" cellspacing="10" cellpadding="10">
4. 제목이 들어갈 칸 : <th> </th>
5. 테이블 바탕지정
<table border=1 bordercolor = "blue" cellspacing="10" cellpadding="10" bgcolor="yellow"> : 바탕색 지정
<table border=1 bordercolor = "blue" cellspacing="10" cellpadding="10" background
'images/bg_fam01.jpg" width="600" height="600"> : 배경그림과 크기 지정
6. 선의 색으로 table에 입체감을 느끼게..
<table border=3 bordercolor = "blue" cellspacing="10" cellpadding="10" background
="images/bg_fam01.jpg" width="600" height="600" bordercolordark="#FF0000"
bordercolorlight="#FFCC00">
* 두번째 테이블
1. 행 전체 색 지정 해서 메뉴로 활용할 수 있다.
<br>
<table width ="90%" align="center" cellpadding=4" cellspacing="4">
<tr bgcolor="#FFCC33">
<td >이나영 </td>
<td> 정진영</td>
<td> 한채영</td>
<td> 양동근</td>
</tr>
</table>
★ cellspacing 값을 주고, border값을 0으로 하면 서로 분리된 효과가 됨.
* 테이블 만들기 연습
<table border ="1" width="500" height="100" bordercolor="blue">
<tr >
<td rowspan="2"> a </td>
<td colspan="4"> b </td>
</tr>
<tr>
<td colspan="2"> g </td>
<td colspan="2"> i </td>
</tr>
<tr>
<td rowspan="2"> k </td>
<td> l </td>
<td rowspan="2"> m </td>
<td> n </td>
<td rowspan="2">o</td>
</tr>
<tr>
<td> q </td>
<td> s </td>
</tr>
</table>
* 테이블 만들기 실습
<br>
<table border="1" bordercolor="red">
<tr>
<td colspan="4"> <img src ="images/ky01.jpg"></td>
( 테이블에 그림삽입 예)
</tr>
<tr>
<td colspan="2" width="200"> <A HREF=""><img src ="images/ky01.jpg"></A>
</td> ----> 테이블안의 이미지에 링크걸기
<td colspan="2" width="200">g</td>
</tr>
<tr>
<td rowspan="2">i</td>
<td colspan="2">j</td>
<td rowspan="2">l</td>
</tr>
<tr>
<td>n</td>
<td>o</td>
</tr>
</table>
< 프레임> - 교재 116p~
* 정의 : 한 화면에 여러 개의 창을 만들어, 각 창안에 웹 문서 하나씩을 넣을 수게 해 주는 기능.
* body 안에 창이 들어가는 것이 아니라, 창(frame) 안에 body가 만들어진다는 것에 주의할 것.
* 프레임의 종류들
1. <frameset rows ="50%, *" cols=" " border="0"> : %값으로 나눔(상대적)
<!-- rows와 cols를 다 넣어놓아도 값만 안써주면 상관없음. -->
<frame src="html001.html">
<frame src="html002.html">
</frameset>
<BODY>
</BODY>
2. <frameset rows ="100, *" cols=" " border="0"> : 픽셀 단위로 나눔. (절대적)
3. <frameset cols="100,* ,100" >: 좌우 3개의 프레임으로 나눔
4. 먼저 상하로 나눔 --> 아래의 화면을 다시 좌우로 나눔.
<frameset rows="100,* " >
<frame src="html001.html">
<frameset cols="10%, *">
<frame src="html002.html">
<frame src="html003.html">
</frameset>
</frameset>
* 실습
<frameset rows="100,* ,100" >
<frame src="html001.html">
<frameset cols="10%, *,10%">
<frame src="html002.html">
<frame src="html005.html">
<frame src="html001.html">
</frameset>
<frame src="html002.html">
</frameset>
===============================================================
|
여행
윈도우서버 
