태그자료
< 자료공유 < 태그자료
자료실

프레임 나누기

페이지 정보

작성자 madalla 작성일13-02-08 09:50 조회1,272회 댓글0건

본문

프레임이란?
프레임은 홈페이지를 나누어 주는 것입니다. 한창에서 두 개 내지 세 개의 홈페이지 내용을 넣는다는 말이지요. 그리고 그 프레임과 내용들은 한 창 안에서 따로 놀게 됩니다. 프레임을 나눈다고 하면 일반적으로 한쪽에 메뉴를 만들고 한쪽은 내용입니다.
프레임에 대해 잘 이해가 안된다구요? 이렇게 생각해 보세요...브라우저 화면에서는 한 개의 화면으로 보여지지만 사실은 여러개의 창을 만들어 여러개의 문서를 동시에 볼 수 있도록 구성한 것입니다. 이처럼 프레임을 사용하면 여러개의 HTML을 한 개의 화면으로 볼 수 있는 장점이 있습니다. 그림으로 나타내자면 이렇게 되겠네요...(본 홈페이지의 프레임 구조입니다)
프레임파일
메뉴(Contents)
메인(header)
내용(Detail)
<FRAMESET></FRAMESET>
한 페이지에 두개 이상의 창을 작성
<FRAMESET COLS="n%,*">
세로로 화면을 나누는 방식
(프레임 열의 갯수와 그 폭을 지정)
<FRAMESET ROWS="n%,*">
가로로 화면을 나누는 방식
(프레임 행의 갯수와 그 높이를 지정)
<FRAME SRC="문서.파일명">
프레임에 불러올 HTML문서 링크
<MARGINWIDTH=n>
프레임 창의 가로 여백을 지정
<MARGINHEIGHT=n>
프레임 창의 세로 여백을 지정
<SCROLLING=YES,NO,AUTO>
프레임 창의 스크롤 지정여부,자동여부
<FRAMEBORDER=n>
프레임 경계선의 크기를 지정
<TARGET=_blank, _self, _parent, _top 파일명>
프레임 창에서 링크된 경우 링크될 때 보여주는 창을 지정
<NAME= >
프레임에 고유의 이름을 간단하게 씀
(target과 함께 쓰인다)
프레임 세로로 나누기
<html>
<head>
<title>프레임 세로로 나누기</title>
</head>
<frameset rows="1*" cols="40%, 60%" border="1">
<frame src="file1.html" name="left" scrolling="yes"
marginwidth="10" marginheight="14">
<frame src="file2.html" name="right" scrolling="yes"
marginwidth="10" marginheight="14">

</frameset>
</html>
프레임을 세로로 나누면 왼쪽에는
file1.html이 보여집니다.
file1.html 이파일이 메뉴파일이어야 하겠지염?
프레임을 세로로 나누면 왼쪽에는
file2.html이 보여집니다.
file2.html 이파일이 내용파일이어야 합니다.
프레임 가로로 나누기
<html>
<head>
<title>프레임 가로로 나누기</title>
</head>
<frameset rows="10%, 90%" cols="1*" border="1">
<frame src="파일1.html" name="top" scrolling="no"
marginwidth="10" marginheight="14">
<frame src="파일2.html" name="bottom" scrolling="yes"
marginwidth="10" marginheight="14">

</frameset>
</html>
여기는 프레임의 윗부분입니다...여기에 홈피의 타이틀을 넣지요...
여기는 프레임의 밑부분입니다. 여기에 내용을 넣습니다. 이 방법은 잘 안쓰이는데. 가끔 쓰이는데가 있긴 있습니다.
프레임을 3개로 나누기
<html>
<head>
<title>프레임을 3개로 나누자~</title>
</head>
<frameset rows="1*" cols="19%, 81%" border="4">
<frame name="contents" scrolling="auto" marginwidth="10" marginheight="14" target="header">
<frameset rows="18%, 82%" cols="1*">
<frame name="header" scrolling="auto" marginwidth="10" marginheight="14" target="detail">
<frame name="detail" scrolling="yes"
marginwidth="10" marginheight="14">

</frameset>
</html>
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="링크주소" target="main">
그러면 링크 타겟이 main으로 됩니다. 링크 타겟과 위에서 지정한 프레임 이름이 같아야합니다. 이런식으로 연결해주시면 됩니다. 만약 프레임 이름이 detail인 곳에 내용을 넣으시려면 링크하실 때
<a href="링크주소" target="detail">

이해가 되셨는지요?
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기