프레임 나누기
페이지 정보
작성자 madalla 작성일13-02-08 09:50 조회2,098회 댓글0건본문
|
프레임이란? | ||||||
|
프레임은 홈페이지를 나누어 주는 것입니다. 한창에서 두 개 내지 세 개의 홈페이지 내용을 넣는다는 말이지요. 그리고 그 프레임과 내용들은 한 창 안에서 따로 놀게 됩니다. 프레임을 나눈다고 하면 일반적으로 한쪽에 메뉴를 만들고 한쪽은 내용입니다.
프레임에 대해 잘 이해가 안된다구요? 이렇게 생각해 보세요...브라우저 화면에서는 한 개의 화면으로 보여지지만 사실은 여러개의 창을 만들어 여러개의 문서를 동시에 볼 수 있도록 구성한 것입니다. 이처럼 프레임을 사용하면 여러개의 HTML을 한 개의 화면으로 볼 수 있는 장점이 있습니다. 그림으로 나타내자면 이렇게 되겠네요...(본 홈페이지의 프레임 구조입니다)
| ||||||
|
<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"> 이해가 되셨는지요? |
