|
1.
프레임이란?
프레임이란 웹 페이지를 수직이나 수평으로 여러개
영역으로 나누어 다른 웹 문서가 들어 갈 수 있도록 구성할 수 있습니다. 이 때 나누어진 각각의 창을 프레임이라고 하지요.
이런 프레임을 사용하면 모든 웹 페이지마다 반복적으로 넣어야 하는 내용을 따로 분리하여 작성하고 관리할 수 있어서 편리하기
때문에 홈페이지 만들 때 많이 사용합니다.
예를 들어 어느
웹 페이지로 이동하더라도 화면 상단은 항상 제목을 표시하던지 메뉴를 왼편에 유지하고 싶으면 각 페이지에 같은 내용을 넣을 것이 아니라,
프레임으로 화면을 나누고 하 부분만 문서를 바꾸어 주면 됩니다.
프레임을 알려면 먼저 "프레임"과 "프레임 셋"의 개념을 알아야
합니다. 웹 페이지를 여러 개 영역으로 나누었을 때 각각의 창을 프레임이라고 그랬지요. 각각의 프레임에 별도로
HTML문서를 연결합니다.
이러한 여러 프렘임을 총괄해서 전체를 나타내는 것이 바로 "프레임 셋"이라고 하지요.
프레임 셋도 역시
하나의 HTML문서로 되어 있습니다.
2. FRAMESET 태그 속성
모든 프레임은 2개 이상의 영역으로
나누어 집니다.
이때 나누는 방향을 지정하기 위해서 ROWS, COLS 속성을 사용하지요.
| <FRAMESET>...</FRAMESET>태그 - 기능 : 화면 분할하기 정보 지정 - 속성 : ROWS="가로나누기 비율n(%)" ; "*", COLS="세로나누기 비율n(%)" ; "*", FRAMEBORDER= yes ; no |
| <FRAMESET COLS="n(%), n(%)> |
화면을 세로 방향으로 나눌 때 왼쪽과 오른 쪽의 가로폭 크기 값을 콤마로 구분하여 지정하면
됩니다. |
| <FRAMESET ROWS="n(%), n(%)> |
화면을 가로 방향으로 나눌 때 위쪽과 아래 쪽의 높이 값을 콤마로 구분하여 지정하면 됩니다. |
| <FRAMEBORDER=n> |
프레임의 경계선을 지정하는 데, "0"은 경계선을 나타내지 않고, "1"은 경계선을 나타낼 때
사용합니다. |
3. FRAME 태그 속성
FRAMESET 태그를 이용해서
전체적인 프레임의 크기를 결정하고 나면, 이제 FRAME 태그를 이용하여 각 프레임을 설정하게 됩니다.
FRAME 태그는 종료 태그를 갖지
않지요.
| <FRAME>
태그 - 기능 : 화면 분할하기 - 속성 : SRC="html파일" ; "URL", NAME="프레임 이름", MARGINWIDTH=n, MARGINHEIGHT=n, SCROLLING=auto ; yes ; no, NORESIZE |
| <FRAME SRC="문서파일명"> |
FRAME 태그에 SRC 속성은 반드시 첨가되어야 하는 것으로 프레임에 불러올 HTML 문서의
파일명을 적어줍니다. 경로가 다르면 물론 경로까지 지정해 주어야 하지요. |
| <A HREF="문서파일명" TARGET=프레임 고유이름> |
프레임 링크를 할때 <NAME>태그로 이름을 주어 링크된 문서가 어느 프레임에 보여질 지를
지정합니다. |
| <MARGINWIDTH=n> |
프레임 창의 왼쪽 여백을 지정합니다. |
| <MARGINHEIGHT=n>> |
프레임 창의 위쪽 여백을 지정합니다. |
| <SCROLLING=n> |
yes, no, auto를 사용해 프레임 창의 스크롤바를 지정합니다. |
|
<NORESIZE> |
이 속성에는 값을 지정하지 않습니다. |
프레임 만들기
|
여기까지 오시느라 고생 많으셨지요?
드디어 종착역이군요.
지난강좌에서는 프레임 태그에 대한 공부를 하셨지요.
그러면 이제 프레임을 한번 만들어
볼까요?
1. 간단한 프레임 만들어 보기
좌우 수직으로 창을 나누어 2개의 프레임으로 만들어
봅시다.
주의 할 사항은 2개의 프레임 문서를 만든다면 몇 개의 문서로 만들어야 할까요?
실제로는 프레임 문서 2개, 그리고 프레임
셋 문서1개 해서 3개의 HTML문서가 만들어 져야하는 것을 명심 하셔야 합니다. 문서 크기는 양쪽 비율을 20 : 80 으로 나눠
볼까요?
자! 그러면 따라 해 보시죠!
[첫 번째 문서] 프레임 셋 문서 작성
☞ 문서명 :
test.html
| <HTML> <HEAD> <TITLE>프레임 셋 문서 </TITLE> </HEAD> <FRAMESET COLS=20%,*> <FRAME SRC=frame1.html> <FRAME SRC=frame2.html> </FRAMESET> </HTML> |
[두 번째 문서] 프레임 문서1
☞ 문서명 : frame1.html
| <HTML> <HEAD> <TITLE>프레임 문서1</TITLE> </HEAD> <BODY> frame1.html에 해당하는 문서 입니다. </BODY> </HTML> |
[세 번째 문서] 프레임 문서2
☞ 문서명 : frame2.html
| <HTML> <HEAD> <TITLE>프레임 문서2</TITLE> </HEAD> <BODY> frame2.html에 해당하는 문서 입니다 </BODY> </HTML> |
문서를 열 때 프레임 셋 문서인
test.html 문서만 열면 frame1.html과 frame2.html 문서가 한꺼번에 나타납니다.
어때요?
쉽죠?
2. 복잡한 프레임 만들어
보기
이번에는 오른 쪽에 있는 프레임을 상하
수직으로 20:80 비율로 나누어 프레임을 하나 더 만들고, 왼쪽 프레임문서에 메뉴를 만들어 하이퍼 링크까지 시켜
보겠습니다.
<FRAMESET ROWS=20%,*> 하고 똑같은 방법으로 실행시켜서 창을 가로로 나눈 프레임을 만들어 보세요.
그럼, 아래 예제와 같은 프레임 문서를 만들어 봅시다.
[첫 번째 문서] 프레임 셋 문서
작성
☞ 문서명 : test_2.html
| <HTML> <HEAD> <TITLE>프레임 셋 문서</TITLE> </HEAD> <FRAMESET COLS=20%,* frameborder="0" border="0"> <FRAME SRC=frame_1.html scrolling="no"> <FRAMESET ROWS=20%,*> <FRAME SRC=frame_2.html scrolling="no"> <FRAME SRC=frame_3.html name="detail"> </FRAMESET> </FRAMESET> </HTML> |
☞ 문서명 : frame_1.html
| <HTML> <HEAD> <TITLE>프레임 문서1</TITLE> </HEAD> <BODY bgcolor="#F6E5E5"> [메뉴화면]<br><br><br> <li><a href="menu1.html" target=detail>프레임이란?</a> <li><a href="menu2.html" target=detail>프레임셋이란?</a> </BODY> </HTML> |
[메뉴1 문서]
☞ 문서명 : menu1.html
| <HTML> <HEAD> <TITLE>메뉴1 문서</TITLE> </HEAD> <BODY> <font size="2"> <b>[프레임이란?]</b><br><p> 프레임이란 웹 페이지를 수직이나 수평으로 여러개 영역으로 나누어 다른 웹 문서가 들어 갈 수 있도록 구성할 수 있습니다. 이 때 나누어진 각각의 창을 프레임이라고 하지요. </font> </BODY> </HTML> |
☞ 문서명 : menu2.html
| <HTML> <HEAD> <TITLE>메뉴2 문서</TITLE> </HEAD> <BODY> <font size="2"> <b>[프레임셋이란?]</b><br><p> 웹 페이지를 여러 개 영역으로 나누었을 때 각각의 창을 프레임이라고 그랬지요. 각각의 프레임에 별도로 HTML문서를 연결합니다. 이러한 여러 프렘임을 총괄해서 전체를 나타내는 것이 바로 "프레임 셋"이라고 하지요. </font> </BODY> </HTML> |
☞ 문서명 : frame_2.html
| <HTML> <HEAD> <TITLE>프레임 문서2</TITLE> </HEAD> <BODY bgcolor="#F9F3F3"> frame_2.html에 해당하는 문서 입니다. </BODY> </HTML> |
[네 번째 문서] 프레임 문서3
☞ 문서명 : frame_3.html
| <HTML> <HEAD> <TITLE>프레임 문서3</TITLE> </HEAD> <BODY> frame_3.html에 해당하는 문서 입니다. </BODY> </HTML> |
'IT_Programming > HTML&CSS' 카테고리의 다른 글
| [펌] IFRAME에 대해서... (0) | 2007.02.13 |
|---|---|
| 프레임(Frame) 나누기 (0) | 2006.05.25 |
| 테이블 만들기 (0) | 2006.04.24 |
| 문서 연결하기 (0) | 2006.04.24 |
| BODY 태그의 활용 (0) | 2006.04.24 |