|
|
|
|
|
|
|
|
|
 |
|
|
 |
|
|
 |
|
|
 |
|
|
|
6만원 이상 무료배송
|
|
|
주문하시는
총상품금액의 합계가
6만원 이상일 경우
택배비가 무료입니다.
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
작성자:
블루
작성일: 2009-09-25 15:42
조회: 3795072
댓글: 1
|
|
|
1. FRAME TAG 개념 이해하기
FRAME이란 하나의 브라우저 창에서 여러개의 HTML 문서를 동시에 볼 수 있게 하는 기능을 의미한다. 우리가 사용하는 WINDOW 탐색기가 대표적인 프레임의 예이다. 왼쪽창에는 프로그램의 폴더 구조를 보여주고 오른쪽 창에는 폴더의 내용을 보여준다. 이런구조를 HTML에 적용한 것이 FRAME이다. 이것을 활용하면 홈페이지 내용을 하나의 브라우저 창에서 모드 확인할 수 있다. 너무 많이 프레임을 나누어도 복잡하므로 주의해야 한다.
1) FRAME의 기본구조
<HTML>
<HEAD><TITLE>프레임 나누기</TITLE>
</HEAD>
<FRAMESET><!--프레임으로 나누는 역할 -->
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
FRAME 에서는 <BODY> TAG를 사용하지 않는다.
(1) FRAMESET은 프레임으로 브라우저를 나누는 역할을 하고 그속성에는 다음과 같은 것들이 있다.
<FRAMESET cols="숫자(width , %)"> <! -- 수직으로 나눈다 -->
<FRAMESET rows="숫자"> <!-- 수평으로 나눈다 -->
<FRAMESET border="1"> <!-- 프레임의 경계선 두께를 말한다 -->
이 밖에 bordercolor="red", frameborder=1 or 0(1이면 프레임 경계선이 나타나고 0이면 안보인다. 기본값은 1이다.), framespacing=2 (프레임들간의 간격을 말한다.)등이 있다.
(2) FRAME 태그는 프레임에 나타날 HTML 문서의 경로와 이름을 지정한다.
* 속성 :
- <FRAME src="경로명 및 파일명“> : 프레임에 나타날 문서를 지정한다.
-<FRAME name="이름“> : 각 프레임의 이름을 지정한다. 이 속성이 가지는 기본값은 이름으로 지정할 수 없다.
-<FRAME marginheight, marginwidth=숫자> : 프레임의 상하좌우 여백을 지정한다. 입력단위는 픽셀이다.
-<FRAME noresize > : 프레임의 크기를 고정시킨다. 브라우저에서 프레임의 경계선을 움직이지 못하게 한다.
-<FRAME scrolling=yes, no, auto> : 프레임에 스크롤 바를 나타낼 것인지를 지정한다. 기본은 auto이며, 자동으로 나타나고 감추어 진다. yes면 무조건 스크롤 바가 나타나고 no이면 나타나지 않는다.
-<FRAME frameborder= "구분선 표시 지정“> : 구분선 표시가 1이면 구분선이 표시되고 0이면 숨겨진다. 기본으로 1이 지정되어 있다.
2) 프레임 나누기
(1) 프레임 수직 수평으로 나누기
<HTML>
<HEAD>
<TITLE>수직으로 나누기</TITLE>
</HEAD>
<FRAMESET rows="100,*"><!-- 수평으로 나누어진다. -->
<FRAME>
<FRAMESET cols="50%,*"><!-- 수직으로 나눈다 -->
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
</HTML>
수평으로 나누려면 <FRAMESET rows="200,*">로 바꿔주면 된다. 프레임의 크기는 픽셀과 %로 줄수 있고 rows="200, *"에서 * 표시는 프레임을 나누는데 하나는 200픽셀 크기로 나누고 다른 프레임은 나머지 크기로 한다는 뜻이다.
<FRAMESET rows="200,300,200"> : 이 태그는 프레임을 수평으로 세 개로 나누고 그 크기는 각각 200,300,200 픽셀이란 뜻이다. 즉 ROWS는 프렘이의 높이를 지정하는 태그이다. 수평으로 분할한다는 뜻이다.
<FRAMESET cols="200,300,400"> : 이 태그는 프레임을 수직으로 분할 할 때 사용하며 프레임의 너비를 나타낸다.
<FRAMESET rows="100,300"><!-- 프레임 높이 지정->
<FRAME src="프레임1.html"><!-프레임 이름->
<FRAMESET cols="200,400"><!-프레임 너비지정->
<FRAME src="프레임2.html"><!-프레임 이름->
<FRAME src="프레임3.html"><!-프레임 이름->
</FRAMESET>
</FRAMESET>
이 소스는 프레임을 다음과 같이 나누는 예제이다.
프레임1.html
프레임2.html
프레임3.html
(2) 프레임 구분선과 공백 없애기
<FRAMESET rows="100,*" frameborder="0"
border="0" framespacing="0">
이 소스는 프레이 간의 여백과 구분선을 없애준다. frameborder="0"
border="0" 속성은 네스케이프 네비게이터에
적용되고, framespacing="0" 속성은 익스플러어에서 적용되는 속성이다.
(3) 프레임을 지원하지 않는 브라우저를 위한 내용 지정하기
<NOFRAMES>
<BODY>
<P>이페이지를 볼 수 있는 브라우저가 필요합니다.</P>
</BODY>
</NOFRAMES>
(4)링크된 문서를 나타낼 프레임 지정하기
링크된 문서를 다른 프레임에서 열리게 하려면 target속성을 지정해야 한다. target 속성에 사용될 이름은 미리 <FRAME src="프레임 이름“>속성에서 선언을 해야 합니다.
<A href="frame1.html" target="contents">문서1</A>
target 속성의 종류 :
- _top: 프레임을 해제하고 링크될 문서를 창 전체로 불러온다.
- _parent : 링크될 문서를 링크전 원래의 프레임인 부모 프레임에 나타낸다. 부모프레임이 없는 경우는 _self 속성과 같다.
- _self: 링크될 문서를 원래 위치와 같은 프레임으로 불러온다.
- _blank: 이름이 없는 새로운 창을 열고 링크될 문서를 그 창으로 불러온다.
그 예제는 다음과 같다. 기본적으로 프레임에서는 세 개의 파일이 필요하며 그 파일은 다음과 같다.
첫 번째 파일 이름은 left_frame.html
<!-- 이 예제는 프레임의 왼쪽에 들어가는 소스이다.-->
<HTML>
<HEAD><TITLE>프레임 왼쪽 문서 연결하기</TITLE></HEAD>
<BODY>
연습문서 연결
<UL>
<A href="table_01.html"><LI>이미지 삽입 문서</A>
<A href="table_02.html"><LI>표만들기 문서</A>
</UL><BR>
검색엔진
<UL>
<A href="./Iframe_test.html" target="right">
<LI>프레임 테스트 </A>
<A href="./frame1.html" target="right">
<LI>프레임 테스트1</A>
</UL>
</BODY>
</HTML>
두 번째 파일은 오른 쪽으로 위치하는 소스이다. 파일 이름은 right_frame.html 이다.
<HTML>
<HEAD><TITLE> 본문임</TITLE></HEAD>
<BODY>
<CENTER>
<H3> 본문내용 </H3>
<HR>
<Font size=4> 오른 쪽에 나타나는 문서입니다. </Font>
</CENTER>
</BODY>
</HTML>
세 번째 파일은 위 두개의 파일을 각각의 위치에 지정하고 파일을 연결하는 파일이다. 파일 이름은 main_frame.html 이다.
<HTML>
<HEAD><TITLE>문서 보이기</TITLE></HEAD>
<FRAMESET cols="200,*">
<FRAME src="left_frame.html">
<FRAME src="right_frame.html">
</FRAMESET>
</HTML>
그림으로 보면 아래와 같다.
main_frame.html
left_frame.html
right_frame.html
(5) HTML 문서 안에 프레임을 삽입한다.
<IFRAME src="URL" name="프레임 이름“> , </IFRAME>
* 속성:
- width, height : 프레임 너비와 높이 (픽셀,%)
- marginwidth, marginheight : 프레임안의 상하 여백(픽셀)
- scrolling : 스코롤바 생성을 지정( auto, yes, no)
- frameborder : 프레임 구분선을 표시(1-표시, 0-숨김)
- align : 정렬 (left, center, right)
<IFRAME src="iframe.html" name="term" width="200" height="200"
align="right">
</IFRAME>
그 예제는 다음과 같다.
파일이름은 Iframe_test.html이다.
<HTML>
<HEAD>
<TITLE> HTML문서안에 프레임 넣기 </TITLE>
</HEAD>
<BODY>
<H1>자바의 특징</H1>
<IFRAME src="iframe.html" name="term" width="200"
height="120" align="right">
</IFRAME>
<p> 자바 언어의 특징은 <A href="sub_Iframe.html" target="term"> 플랫폼에 대 한 독립성</A>과 <A href="sm.html" target="term">객체지향적</A>이라는 점과 <A href="ak.html" target="term"> 인터프리터에 의해 실행</A> 된다 는 점이다. 또한 <A href="ss.html" target="term">멀티스레딩</A>이 가능하 다는 것이고 <A href="sc.html" target="term">분산환경의 응용에 적합</A> 하다는 점이다.
</p>
</BODY>
</HTML>
위 파일과 sub_Iframe.html 파일을 같은 디렉토리내에 위치시키고 링크를 연결하여 문서를 클릭하면 프레임안에 sub_Iframe.html 파일 문서가 뜰 것이다.
sub_Iframe.html 소스 :
<HTML>
<HEAD>
<TITLE>Ifrmame Test </TITLE>
</HEAD>
<BODY>
<P> 자바의 가장 커더란 특징은 플랫폼에 독립적이라는 점이다. JDK라는 가상 머신 만 O/S위에 탑재시키면 LINUX, WINDOWS, MAC어디서든 실행 가능하다는 점이다.
</P>
</BODY>
</HTML>
|
|
|
|
|
|
|
|
|
* 관련 댓글 한말씀 부탁합니다.
|
|
|
|
