|
◈ 프레임 만들기
프레임은 브라우저의 윈도우를 여러개로 나누어 각각의 윈도우에 다른 웹페이지를 보여주는 기능입니다. 여러분은 나누어진 브라우저의 윈도우를 초기 위치에 고정시키거나 사용자가 변경하도록할 수 있습니다. 프레임은 레이아웃의 디자인뿐만 아니라 홈페이지 전체 구성에도 큰 영향을 미칩니다. 따라서 여러분의 홈페이지를 디자인할 때는 구체적인 웹페이지 디자인 작업 이전에 먼저 프레임의 사용할 것인지의 여부를 결정하는 것이 좋습니다.
프레임을 만드는데는 두 가지 종류의 문서가 존재합니다. 첫번째는 브라우저 화면에 나타날 프레임 형식을 지정하는 문서이고, 두번째 것은 각 프레임 안에서 보여줄 실제 내용이 들어 있는 문서입니다.
▶ <FRAMESET></FRAMESET> : 이 태그는 브라우저에 프레임을 어떻게 만들 것인지를 지정하는 태그입니다. 즉 좌우 혹은 상하로 몇 등분할 것이며 각각 나누어진 프레임의 크기는 어떻게 할 것인지를 정하게 되는 것입니다.
|
<FRAMESET>태그의 기본 형식 |
|
<FRAMESET COLS="각 프레임의 넓이정보">
<FRAME SRC=" ">
<FRAME SRC=" ">
</FRAMESET> |
|
<FRAMESET>태그의 속성 |
|
COLS |
가로로 나눈다. |
|
ROWS |
세로로 나눕니다 |
|
ROWS, COLS의 속성값의 예 (1) |
|
<FRAMESET ROWS="30,20,*"> |
|
1. 브라우저 화면을 상하로 3등분 한다.
2. 첫 번째 프레임의 높이를 30픽셀로 한다.
3. 두 번째 프레임의 높이를 20픽셀로 한다.
4. 세번째 프레임의 높이는 남은 영역으로 만든다. |
|
ROWS, COLS의 속성값의 예 (2) |
|
<FRAMESET ROWS="30%,70%"> |
|
1. 브라우저 화면을 상하로 2등분 한다.
2. 첫 번째 프레임은 브라우저 높이의 30%를 차지한다.
3. 두 번째 프레임은 브라우저 높이의 70%를 차지한다. |
|
ROWS, COLS의 속성값의 예 (3) |
|
<FRAMESET COLS="*,2*"> |
|
1. 브라우저 화면을 좌우로 2등분 한다.
2. 첫 번째 프레임과 두번째 프레임의 넓이가 1:2가 되도록 한다. 즉 첫번째 프레임의 넓이가 브라우저의 1/3이 되고 두번째 프레임의 넓이가 브라우저의 2/3를 차지하게 된다. |
▶ <FRAME></FRAME> : <FRAMESET>과 </FRAMESET>태그 사이에 들어가게 되며 각 프레임에 대한 모든 것을 정의해야 하기 때문에 <FRAMESET>에 지정된 프레임의 수만큼 사용하게 됩니다.
|
<FRAME>태그의 기본 형식 |
|
<FRAME SRC="URL">
[NAME="name"]
[NORESIZE]
[SCROLLING="yes | no | auto]
[MARGINHEIGHT="numbur"]
[MARGINWIDTH="numbur"]
[frameborder="numbur"]> |
|
<FRAME>태그의 속성 |
|
SRC |
프레임이 들어갈 문서의 URL이 들어간다. |
|
NAME |
프레임의 이름. 다른 프레임 안에 있는 링크에서 이 프레임을 가리키고자 할 때 사용된다. |
|
NORESIZE |
일반적으로 프레임과프레임을 나누는 경계선은 마우스로 끌어서 이동시킬 수 있도록 되어 있다. NORESIZE 속성은 이 경계선이 전혀 움직일 수 없도록 하고 싶을 때 사용하게 된다. |
|
SCROLLING |
프레임에 스크롤바를 보여줄 것인지를 지정하는 속성. yes, no, auto가 있다. 여기서 auto는 문서의 길이가 프레임을 벗어나는 경우에만 자동으로 스크롤바를 만들어주게 된다. |
|
MARGINHEIGHT |
프레임 상하의 여백 설정(단위: 픽셀값) |
|
MARGINWIDTH |
프레임 좌우의 여백 설정(단위: 픽셀값) |
▶ <NOFRAME></NOFRAME> : 프레임을 지원하지 못하는 브라우저나 넷스케이프 2.0 이전 버전에서는 프레임을 볼 수 없기 때문에 화면에 아무 것도 나타나지 않습니다. 이때 사용하는 것이 바로 <NOFRAME>태그이며 이 태그 안에 들어간 정보들은 프레임을 지원하는 브라우저에는 나타나지 않지만 프레임을 지원하지 않는 브라우저에서는 나타나게 됩니다.
<프레임 예제>
|
<HTML>
<HEAD>
<TITLE>프레임 나누기 테스트 </TITLE>
</HEAD>
<BODY>
<H3>프레임_1</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>프레임 나누기 테스트 </TITLE>
</HEAD>
<BODY>
<H3>프레임_2</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>프레임 나누기 테스트 </TITLE>
</HEAD>
<BODY>
<H3>프레임_3</H3>
</BODY>
</HTML>
|
|
프레임을 상하로 나누기 예제 |
<HTML>
<HEAD>
<TITLE>상하로 프레임 나누기 테스트 </TITLE>
</HEAD>
<FRAMESET ROWS="50%, 50%" frameborder="YES">
<FRAME SRC="frame1_1.html" NAME="frame1" scrolling="AUTO" noresize marginwidth="10" marginheight="10" frameborder="YES">
<FRAME SRC="frame1_2.html" NAME="frame2" frameborder="YES" noresize scrolling="AUTO" marginwidth="10" marginheight="10">
</FRAMESET>
<noframes>이 페이지는 프레임이 지원되는 브라우저에서만 보입니다.</noframes>
</HTML> |
<예제 실행 화면>
|
프레임을 좌우로 나누기 예제 |
<HTML>
<HEAD>
<TITLE>좌우로 프레임 나누기 테스트 </TITLE>
</HEAD>
<FRAMESET COLS="120, 30%,*" frameborder="YES">
<FRAME SRC="frame1_1.html" NAME="frame1" SCROLLING="YES"
NORESIZE BORDER=0 marginwidth="5" marginheight="5" frameborder="YES">
<FRAME SRC="frame1_2.html" NAME="frame2" SCROLLING="NO"
BORDER=0 frameborder="NO" marginwidth="5" marginheight="5">
<FRAME SRC="frame1_3.html" NAME="frame3" BORDER=0 scrolling="AUTO" noresize frameborder="YES" marginwidth="7" marginheight="7">
</FRAMESET>
<noframes>이 페이지는 프레임이 지원되는 브라우저에서만 보입니다.</noframes>
</HTML> |
<예제 실행 화면>
|
POWERED BY TISTORY. THEME BY HE+STORY
