2.4.1 프레임의 정의
Download
Report
Transcript 2.4.1 프레임의 정의
2.4.1 프레임의 정의
가로와 세로 복합 분할
COLS
: 2개의 세로 프레임 분할
ROWS : 2개의 가로 프레임 분할
<HTML>
<HEAD> <TITLE>복합분할</TITLE> </HEAD>
<FRAMESET COLS="150,*">
<FRAME SRC="1.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="2.html">
<FRAME SRC="3.html">
</FRAMESET>
</FRAMESET>
</HTML>
2.4.1 프레임의 정의
복합 분할 프레임의 결과
2.4.2 프레임의 서식 지정
프레임의 테두리선 변경
형 식 : <FRAMESET BORDER=“픽셀수">
프레임의 여백 조절
형식:
<FRAME MARGINWIDTH=“픽셀수” MARGINHEIGHT=“픽셀수”>
2.4.2 프레임의 서식 지정
프레임 여백 변경 예제
<HTML>
<HEAD> <TITLE>프레임의 여백 조절</TITLE> </HEAD>
<FRAMESET COLS="300,500">
<FRAME SRC="F_M1.html">
<FRAME SRC="F_M2.html" MARGINHEIGHT=50
MARGINWIDTH=50>
</FRAMESET>
</HTML>
2.4.2 프레임의 서식 지정
예제 결과
2.4.2 프레임의 서식 지정
프레임의 크기 변경 금지
사용자의
프레임의 변경 금지
형 식 : <FRAME NORESIZE>
프레임의 스크롤바 지정
스크롤바의
표시 여부를 결정
형식:
<FRAME SCROLLING = “YES" 또는 “NO" 또는 “AUTO">
2.4.3 타겟 프레임의 지정
타겟 프레임
특정
프레임으로의 이동
형 식 : <FRAME NAME = "프레임 이름 " >
<A HREF ="이름" TARGET = "문서를 출력할 프레임의
이름”>
브라우저에 나타날 텍스트
</A>
2.4.3 타겟 프레임의 지정
타겟 프레임 예제
main.html,
left.html, right.html, 1.html, 2.html
[Main.html]
기본적인 프레임 구조 정의
Name 속성
<HTML>
<HEAD> <TITLE>타겟 프레임 지정</TITLE> </HEAD>
<FRAMESET COLS="200,*">
<FRAME SRC = "left.html" NAME = "left">
<FRAME SRC = "right.html" NAME = "right">
</FRAMESET>
</HTML>
2.4.3 타겟 프레임의 지정
Main.html의
실행 결과
2.4.3 타겟 프레임의 지정
Main.html의
내용 분석
왼쪽 프레임 : left.html (메뉴)
오른쪽 프레임 : right.html (왼쪽의…)
[Left.html]
<HTML>
<HEAD> <TITLE>타겟 지정하기</TITLE> </HEAD>
<BODY>
<CENTER>
<H2>메뉴</H2>
<A HREF="1.html" TARGET="right">프레임 1</A> <P>
<A HREF="2.html" TARGET="right">프레임 2</A> <P>
</CENTER>
</BODY>
</HTML>
2.4.3 타겟 프레임의 지정
Left.html
내용 분석
1.html과 2.html 의 링크 설정
Target = right
클릭할 경우 항상 오른쪽 프레임에 1.html과 2.html이 실
행
왼쪽 프레임의 메뉴를 오른쪽 프레임에서 확인
효과적인 웹 문서의 구성
2.4.3 타겟 프레임의 지정
Left.html의
링크를 실행한 결과
2.4.3 타겟 프레임의 지정
다양한 타겟 기능
TARGET = “_blank”
: 새로운 윈도우를 생성한 후 링크된
문서를 표시한다.
TARGET = “_self”
: 링크된 문서를 현재 프레임에
표시한다.
TARGET = “_top”
: 프레임이 없어지고 윈도우 전체에
링크된 문서를 표시한다.
TARGET = “_parent” : 링크 부분이 있는 프레임에 새로운
프레임을 만든 후 문서를 표시한다.
2.5 입력 양식 만들기
양방향의 웹 서비스
사용자와
웹 서버간의 상호적인 정보 교류
CGI(Common Gateway Interface)
사용자로부터 정보 입력
입력 양식을 이용
2.5.1 입력 양식의 정의
입력 양식 태그
사용자의
입력 데이터를 웹 서버로 전송
<FORM> 태그
형식:
<FORM ACTION = “URL" METHOD = “GET" 또는 “POST"> </FORM>
ACTION : 입력 데이터를 처리할 CGI 프로그램의 URL이다.
생략되면 현재 문서가 사용된다.
METHOD : 사용자가 입력한 데이터를 서버에 전달하는 방법이다.
* GET : - 디폴트로 데이터가 환경변수를 통하여 서버에
전달된다.
- 데이터의 라인 수가 제한된다.
* POST : - 데이터가 표준 입력 방식으로 서버에 전달된다.
- 데이터의 라인 수에 제한이 없으므로 주로 사용된다.
2.5.1 입력 양식의 정의
입력 양식 태그의 속성 (계속)
형 식 : <INPUT TYPE = [속 성]
NAME = “입력 양식 이름”
VALUE = “입력 양식에서 표시될 문자열”
SIZE = “문자 수”
CHEKED = [속 성]
MAXLENGTH = “문자 수” >
2.5.1 입력 양식의 정의
입력 양식 태그의 속성 (계속)
TYPE
- TEXT
: 문자 입력
- PASSWORD : 문자 입력시 데이터를 *로 표시
- CHECKBOX : 체크상자를 생성
- RADIO
: 여러 개 중 하나를 선택하는 입력 양식 생성
- HIDDEN
: 숨겨진 입력 양식을 생성
- IMAGE
: 이미지 입력 양식을 생성
- SUBMIT
: CGI 프로그램에 데이터를 전달
- RESET
: 입력 내용을 취소
2.5.1 입력 양식의 정의
입력 양식 태그의 속성
NAME
- 입력한 내용을 지정할 변수의 이름을 지정
- SUBMIT과 RESET을 제외한 모든 TYPE의 필수요소
VALUE
- TEXT, PASSWORD : 입력값의 기본값을 지정
- CHECKBOX, RADIO : 해당 버튼이 선택되었을 때 CGI에 보내는 값을
정의
- SUBMIT, RESET
: 버튼에 표시될 내용을 지정
CHECKED
- CHECKBOX, RADIO의 기본값으로 선택
SIZE = “ 문자수 ” (기본값=20)
- TEXT, PASSWORD 입력 부분에 보이는 문자수를 정의
MAXLENGTH = “ 문자수 ”
- TEXT, PASSWORD에서 입력 받을 수 있는 최대 문자수를 정의
2.5.2 입력 양식 만들기 예제
INPUT TYPE = "TEXT"
<HTML>
<HEAD> <TITLE> 텍스트 입력 양식 </TITLE> </HEAD>
<BODY>
<FORM ACTION= "/cgi-bin/post-query" METHOD= "POST">
Name : <INPUT TYPE = “TEXT” NAME = “name” > <P>
Age : <INPUT TYPE = “TEXT” NAME = “age” SIZE = “5”> <P>
Address : <INPUT TYPE = “TEXT” NAME = “address”
SIZE = “40”><P>
URL : <INPUT TYPE = “TEXT” NAME = “url” VALUE= “”HTTP://”>
</FORM>
</BODY>
</HTML>
2.5.2 입력 양식 만들기 예제
INPUT TYPE = "TEXT" 결과
2.5.2 입력 양식 만들기 예제
INPUT TYPE = "PASSWORD"
<HTML>
<HEAD> <TITLE> PASSWORD 입력 양식 </TITLE> </HEAD>
<BODY>
<FORM ACTION = "/cgi-bin/post-query" METHOD= "POST" >
Your Name : <INPUT TYPE = “PASSWORD” NAME= “PS” >
</FORM>
</BODY>
</HTML>
2.5.2 입력 양식 만들기 예제
INPUT TYPE = "PASSWORD" 결과
2.5.2 입력 양식 만들기 예제
INPUT TYPE = "CHECKBOX“
복수
개의 내용을 선택
<HTML>
<HEAD> <TITLE> CHECKBOX 입력 양식 </TITLE> </HEAD>
<BODY>
<FORM ACTION = "/cgi-bin/post-query" METHOD = "POST" >
<INPUT TYPE = “CHECKBOX” NAME = “F” VALUE = “A” >
사과 <BR>
<INPUT TYPE = “CHECKBOX” NAME = “F” VALUE =
“O” CHECKED> 귤 <BR>
<INPUT TYPE = “CHECKBOX” NAME = “F” VALUE = “P”> 땅콩
</FORM>
</BODY>
</HTML>
2.5.2 입력 양식 만들기 예제
INPUT TYPE = "CHECKBOX" 결과
2.5.2 입력 양식 만들기 예제
INPUT TYPE = "RADIO"
하나의
항목 선택
<HTML>
<HEAD> <TITLE> RADIO 입력 양식 </TITLE> </HEAD>
<BODY>
<FORM ACTION= "/cgi-bin/post-query" METHOD= "POST">
<INPUT TYPE = “RADIO” NAME = “F1” VALUE = “A”> 사과
<INPUT TYPE = “RADIO” NAME = “F1” VALUE = “O”
CHECKED> 귤
<INPUT TYPE = “RADIO” NAME = “F1” VALUE = “P”> 땅콩
</FORM>
</BODY>
</HTML>
2.5.2 입력 양식 만들기 예제
INPUT TYPE = "RADIO" 결과
2.5.2 입력 양식 만들기 예제
선택 목록 입력 양식
<HTML>
<HEAD> <TITLE> 선택 목록 입력 양식 </TITLE> </HEAD>
<BODY>
<FORM ACTION = "/cgi-bin/post-query" METHOD = "POST">
<SELECT NAME = “fruit”?SIZE = “3”>
<OPTION> 바나나
<OPTION> 딸기
<OPTION> 복숭아
<OPTION> 포도
<OPTION> 사과
</SELECT>
</FORM>
</BODY>
</HTML>
2.5.2 입력 양식 만들기 예제
선택 목록 입력 양식 결과
2.5.3 문서 입력 창 만들기
<TEXTAREA> 태그
형 식 : <TEXTAREA [속성]> ∼ </TEXTAREA>
NAME = “변수명” : 입력한 내용을 저장할 변수의 이름을
지정한다.
ROWS = “행의 수” : 브라우저에 표시되는 줄 수를 지정한다.
(기본값은 1)
COLS = “열의 수” : 브라우저에 표시되는 열 수를 지정한다.
(기본값은 20)
2.5.3 문서 입력 창 만들기
문서 입력 창 예제 (계속)
가로
5줄, 세로 30줄의 문서 입력창
“INPUT TYPE=SUBMIT” : 전송 기능
RESET 속성 : 취소 기능
2.5.3 문서 입력 창 만들기
문서 입력 창 예제
<HTML>
<HEAD> <TITLE> 문서 입력창 양식 </TITLE> </HEAD>
<BODY>
<FORM ACTION = "/cgi-bin/post-query" METHOD= "POST" >
<TEXTAREA NAME = "col" ROWS = "5" COLS = "30">
</TEXTAREA> <P>
<INPUT TYPE = “SUBMIT” VALUE = “보내기” >
<INPUT TYPE = “RESET” VALUE = “취소” >
</FORM>
</BODY>
</HTML>
2.5.3 문서 입력 창 만들기
문서 입력 창 예제 결과