프레임 나누기
◈ 프레임 나누기
▶ 프레임의 기본구조.
기본 형식은 <frameset>과 <frame> 태그로 기본구조를 이루게 된다.
이때는 <head> 바로 밑에 <body>없이 써준다는 것을 명심하여야한다.
<HTML>
<HEAD>
<TITLE>프레임의 기본구조</TITLE>
</HEAD>
<frameset rows=분할할 프레임 높이나 넓이a, 분할할 프레임 높이나 넓이 b>
<frame src=a프레임 문서.html name=a프레임 이름>
<frame src=b프레임 문서.html name=b프레임 이름>
</frameset>
</HTML>
▶ 상하로 2단or 3단나누기 :
상하로 분할할 경우에는 ‘rows'라는 태그 속성을 사용하는데, 두 개의 프레임 문서가 필요하다.
(row는 행(줄)이잖아 줄로 나누었으니 상하로 나뉘게 되잖아~ 이해되삼? -_ㅜ;)
예) 상하 2단 : 위쪽 a문서,아래쪽 b문서 이것은 태그의 순서에 의해 결정된다.
<frameset rows=100,*>
<frame src=a.html>
<frame src=b.html>
</frameset>
a문서는 100의 높이를 갖고 b는 '*'를 사용하여 화면 높이에서 100을 뺀 나머지의 높이를 갖게했다.
예)상하 3단 :위쪽 a문서, 가운데b문서,아래쪽 c문서이것은 태그의 순서에 의해 결정된다.
<frameset rows=100,*,100>
<frame src=a.html>
<frame src=b.html>
<frame src=c.html>
</frameset>
a와 c의 문서는 각각 100의 높이를 갖고 '*'를 사용한 b문서는 200을 뺀 나머지의높이를 갖게했다.
▶ 좌우로 2단 or 3단 나누기 :
좌우로 분할할 경우에는 ‘cols'라는 태그 속성을 사용하는데 두 개의 프레임 문서가 필요하다.
(col는 열(칸)이잖아 칸으로 나누었으니 좌우로 나뉘게 되잖아~ 이해되삼? -_ㅜ;)
예)좌우 2단 : 좌측 a문서, 우측 b문서 이것은 태그의 순서에 의해 결정된다.
<frameset cols=100,*>
<frame src=a.html>
<frame src=b.html>
</frameset>
a문서는 100의 넓이를 갖고 b는 '*'를 사용하여 화면 넓이에서 100을 뺀 나머지의 넓이를 갖게했다.
예)좌우 3단 : 좌측 a문서, 가운데b문서, 우측 c문서이것은 태그의 순서에 의해 결정된다.
<frameset cols=100,*,100>
<frame src=a.html>
<frame src=b.html>
<frame src=c.html>
</frameset>
a와 c의 문서는 각각 100의 넓이를 갖고 '*'를 사용한 b문서는 200을 뺀 나머지의널이를 갖게했다.
▶ 상하 좌우 3단으로 나누기 :
제목(상단), 메뉴(하단 좌), 메인(하단 우)의 형식을 갖는 문서를 의미한다.상하 분할과좌우 분할을 합쳐서 사용하여 두 개의 <frameset> 태그가 필요하며, 첫 번째 <frameset>안에 두 번째<frameset>태그를 써주어 모두 세 개의문서로 나뉘어지게 된다.
예)상하 좌우 3단 :상단 a문서,하단좌측b문서, 하단 우측 우측 c문서역시 태그에 의해 결정된다.
<frameset rows=80,*>
<frame src=a.html>
<frameset cols=100,*>
<frame src=b.html>
<frame src=c.html>
</frameset>
</frameset>
위의 프레임은 먼저 상하로 나누고 하단을 다시 좌측과 우측으로 나누어 3개의 문서를 갖게했다.
a문서의 높이가 80이고 나머지의 높이는 넓이가 100인 b문서와 100을 뺀 나머지의 넓이를 갖는 c문서의 공통 높이가 된다.
▶프레임의 타겟설정:
프레임이 나누어진 문서에서 링크를 설정할 때에는 반드시 타겟(target)을 설정해 주어야한다. 타겟
설정이라는 것은 프레임으로 나뉘어진 문서(index.html)에서 새로 열릴 문서의 위치을 표시해 주는 것으로 새 문서는 해당 타겟에서 열리게 된다.
예)상하 좌우 3단 프레임 문서(index.html)라고하면 이것은 a, b, c 3가지 문서를 갖는다.
<frameset rows=80,*>
<frame src=a.html name=aa>
<frameset cols=100,*>
<frame src=b.html name=bb>
<frame src=c.html name=cc>
</frameset>
</frameset>
a 문서의 이름을 aa로, b문서의 이름을 bb로, c문서의 이름을 cc로 지정하였다.
b 문서에서 <a href="URL/x.html" target="cc"> 내용 </a> 과 같이 설정하였다면,
b문서에서 x문서를 링크하여 c문서 위치에서 실행되도록 한다.이것은 문서 b에있는내용이다.
▲ FRAME의 속성(옵션) :
* frameborder : 프래임의 경계선 표시 여부를 1(기본값)과 0의 값으로 결정한다.
* frameborder=0 일때도경계부분이 남는데이때, framespacing=0(익스플로러) 와 border=0(넷스케이프)를 사용한다. 그 외에는bordercolor 속성을 사용하여경계선의 색상을 지정하면된다.
* scrolling : 스크롤이 브라우저에 보이는지의 여부를 auto(기본값), yes, no로 결정한다.
* noresize : 프레임 경계선을 고정하고 창 사이즈 변경할 수 없도록 한다.
* name : 해당 프레임 이름을 설정하여 a태그에서 target=name으로 사용한다.
프레임 안에서 링크할 때 링크된 문서가 어느 프래임에 나타날 것인지를 지정한 것이다.
* marginwidth : 프레임 내의 좌우 여백(픽셀) ; marginheight : 프레임 내의 상하 여백(픽셀)
예)상하 좌우 3단 프래임의 실례 :
<frameset rows="70,*" frameborder="1" bordercolor="skyblue">
<frame src="head.html" name="head" scrolling="no" marginheight="2" noresize>
<frameset cols="200,*" frameborder="0" framespacing="0" border=0>
<frame src="body.html" name="main" scrolling="no" marginheigh="5" marginwidth="5" noresize>
<frame src="right.html" name="menu" scrolling="auto" marginheigh="5" marginwidth="5" noresize>
</frameset>
</frameset>
<noframes></noframes>
위의 프레임은 먼저 상하로 나누고 하단을 다시 좌측과 우측으로 나눈 문서의실례이다.
html의 기본형과 비교했을 때 자세히 보면 body 태그가 없다. body 대신에 frameset을 사용한다.
frameset태그 안의frame이 상하(rows) 와 좌우(cols)로 나뉘어질 각각의 html 문서를 넣는 곳이다.
위에서 처럼 프레임으로 나눈 페이지는 index.html이란 이름으로 저장하는 것이 일반적이다.
우측문서의 목록을 클릭 했을때 중간 부분인 BODY에 내용이 나타나게 하려면, 위에서 BODY의 이름을 main으로 지정했기때문에 <a href="URL" target="main"> 내용 </a> 이렇게 써주어야 한다.
참고로 noframes 의 부분은 프레임을 볼 수 없는 환경의 컴퓨터 사용자들에게 보이기 위함이다.
▶ IFRAME 문서 내에서 다른 문서를 열기 :
<iframe src="url" width="넓이" height="높이" frameborder="n"></iframe>
* name : 프레임명
* width : 프레임의 가로폭(픽셀 또는 %) ; height : 프레임의 높이(픽셀 또는 %)
* align = left, center, right로 문서상에서의 프레임 위치를 지정할 수 있다.
* scrolling : 스크롤바의 생성 여부를 auto(기본값), yes, no로 지정할 수 있다.
* marginwidth : 프레임 내의 좌우 여백(픽셀) ; marginheight : 프레임 내의 상하 여백(픽셀)
* frameborder : 프레임 테두리의 표시 / 0: 표시안함, 1: 표시함 - 기본값
예) <center><iframe width="570" height="500" src="http://chicken.hosanna.net/main.asp" frameborder="1"></iframe></center>
이렇게 하면 호산나 넷의 닭살 돋는 묵상을 메일 볼 수 있다. 영양 듬뿍 닭 한 마리의 감동을 맛보라.
※ 프레임이 나누어진 페이지(index.html)의 소스를 보려면 브라우져의 보기에서'소스'를 선택하면 된다. 그러나 그 프레임 속에 있는 각 페이지들은 화면에서 각 페이지 위에 마우스를 위치시키고바로가기 메뉴(마우스우측클릭)의'소스보기'를 클릭해야한다.