프레임 나누기

◈ 프레임이란?

프레임은 홈페이지를 나누어 주는 것입니다. 한창에서 두 개 내지 세 개의 홈페이지 내용을 넣는다는 말이지요. 그리고 그 프레임과 내용들은 한 창 안에서 따로 놀게 됩니다. 프레임을 나눈다고 하면 일반적으로 한쪽에 메뉴를 만들고 한쪽은 내용입니다.

프레임에 대해 잘 이해가 안된다구요? 이렇게 생각해 보세요...브라우저 화면에서는 한 개의 화면으로 보여지지만 사실은 여러개의 창을 만들어 여러개의 문서를 동시에 볼 수 있도록 구성한 것입니다. 이처럼 프레임을 사용하면 여러개의 HTML을 한 개의 화면으로 볼 수 있는 장점이 있습니다. 그림으로 나타내자면 이렇게 되겠네요...(본 홈페이지의 프레임 구조입니다)

프레임파일
메뉴(Contents)	메인(header)
	내용(Detail)

한 페이지에 두개 이상의 창을 작성

세로로 화면을 나누는 방식

(프레임 열의 갯수와 그 폭을 지정)

가로로 화면을 나누는 방식

(프레임 행의 갯수와 그 높이를 지정)

프레임에 불러올 HTML문서 링크

<MARGINWIDTH=n>

프레임 창의 가로 여백을 지정

<MARGINHEIGHT=n>

프레임 창의 세로 여백을 지정

<SCROLLING=YES,NO,AUTO>

프레임 창의 스크롤 지정여부,자동여부

<FRAMEBORDER=n>

프레임 경계선의 크기를 지정

<TARGET=_blank, _self, _parent, _top 파일명>

프레임 창에서 링크된 경우 링크될 때 보여주는 창을 지정

<NAME= >

프레임에 고유의 이름을 간단하게 씀

(target과 함께 쓰인다)

프레임 세로로 나누기

프레임을 세로로 나누면 왼쪽에는
file1.html이 보여집니다.
file1.html 이파일이 메뉴파일이어야 하겠지염?

프레임을 세로로 나누면 왼쪽에는

file2.html이 보여집니다.

file2.html 이파일이 내용파일이어야 합니다.

프레임 가로로 나누기

여기는 프레임의 윗부분입니다...여기에 홈피의 타이틀을 넣지요...

여기는 프레임의 밑부분입니다. 여기에 내용을 넣습니다. 이 방법은 잘 안쓰이는데. 가끔 쓰이는데가 있긴 있습니다.

프레임을 3개로 나누기

3개의 프레임 contents(목차),header(머리부분),detail(세부내용)으로 나누어져 있습니다.
name은 자신이 알아서 정해주는 것인데요.. name에 따라 target도 달라집니다.
모양은 대략 아래와 같은 모양입니다.

이름:contets 타겟:header 여기에는 메뉴가 들어갑니다.	이름:header 타겟:detail 여기에는 제목이 들어갑니다.
	이름:detail 여기에는 내용이 들어가는데요...타겟이 기본적으로 detail으로 되어 있습니다. 특별히 이름은 없구요... 이 홈에서 쓰고 있는 방법입니다...^^

☞ 기본적인 4가지의 target
_blank: 새로운 창에 링크된 내용을 표시
_parent: 현재 문서를 부른 링크가 존재하는 문서에 링크된 내용을 표시
_self: 자신의 프레임에 링크된 내용을 표시
_top: 프레임을 없애고 웹 브라우저 전체 화면에 링크된 내용을 표시
_blank와 비슷하지만, 새 웹 창을 열지 않는 것이 다릅니다.
☞ 이렇게 4가지 타겟 외에 프레임이 생길 때마다 자신이 임의로 타겟을 정할 수 있습니다.

그리고...초보자분들은 주로 왼쪽과 오른쪽으로 프레임을 나누어서 많이 사용하시더군요...글구 왼쪽을 메뉴로 놓고 오른쪽은 내용이 되도록 만들게 하신 분이 많던데...왼쪽에 메뉴가 있고 그 메뉴를 클릭하면 오른쪽에 내용이 생겨야 하는데 왜 왼쪽(메뉴있는쪽)이 바뀌는지 궁금하신 분이 많은 것 같습니다...저두 옛날에 이런적이 있었습니다...방법은 프레임에 이름을 정해주고, 타겟을 프레임 이름으로 해야 한다는 것입니다.
제 설명을 잘 따라오세요~

<html>
<head>
<title>제목없음</title>
</head>
<frameset cols="23%, 77%" border="0">
<frame src="왼쪽프레임주소">
<frame src="오른쪽프레임주소" name="main">
<noframes>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</p>
</body>
</noframes>
</frameset>
</html>

왼쪽과 오른쪽으로 프레임을 나누었다면 프레임셋 소스는 이렇게 되어있을 것입니다. 저기 오른쪽 프레임셋 소스 부분이 있지요?
<frame src="오른쪽프레임주소" name="main">
거기에 name="main" 을 추가해 오른쪽 프레임 이름을 "main" 으로 추가해줍니다. 그러면 오른쪽 프레임 이름이 "main" 으로 되져...글구 왼쪽 메뉴에서 이렇게 불러와 주면 됩니다. 메뉴에서 자료를 링크할때...
<a href="링크되는주소">링크이름</a>
이렇게 되어있져?? 거기에다가 target을 정해줍니다.
<a href="링크주소" target="main">
그러면 링크 타겟이 main으로 됩니다. 링크 타겟과 위에서 지정한 프레임 이름이 같져? 이런식으로 연결해주시면 됩니다. 만약 프레임 이름이 detail인 곳에 내용이 생기기라면 링크하실 때
<a href="링크주소" target="detail">
이렇게 링크를 하셔야 겠져...다시 이부분에 대해서 설명하자면...방금전에 오른쪽 프레임 이름을 "main" 으로 했져?? 이제는 링크에다가 target="main" 을 추가합니다.
그럼 오른쪽 프레임에 내용이 들어간것을 알수있습니다. 그리구 이작업은 나모에서 하시면 더 쉽게 하실수 있습니다. 나모에서 프레임을 나누시구요...프레임 이름을 정할 HTML이 있는 부분에서...오른쪽 버튼을 누르시고 프레임 속성을 클릭합니다.
거기에서 프레임 이름을 main으로 하세요. 그리고 링크할때 링크 걸어둔 곳에서 마우스 오른쪽 버튼을 클릭해서 하이퍼링크 속성을 클릭합니다. 주소 적는곳 아래에 대상 프레임이라는 곳 있져? 거기에 main을 적습니다. 그러면 링크가 되져...별 것 아닌 것 같지만 해보면 조금 힘들다는걸 느낍니다..(ㅡㅡㆀ)

이해가 되셨는지요?
프레임 이거 처음에는 엄청나게 시행착오를 많이 거쳐야 됩니다...저두 엄청난 시행착오 끝에 겨우 되었는데 이해만 하고 나니 엄청 쉽더군요...(^^;) 여러분도 이해가 안되시면 처음부터 다시 정독하시면서 태그연습장에서 직접 실습도 해보세요~

앞으로 계속