프레임(화면분할) 만들기 [1] : FRAME 태그와 속성
브라우져에서는 한 화면에 하나의 웹 페이지만을 보여주게 됩니다.
다른 웹 페이지 내용을 보려면 새창을 열어야 합니다.
여러개의 웹페이지를 보려면 그 만큼의 창을 열어야 겠지요...
그러나 프레임으로 홈페이지를 만들면 더욱 편리하고
당신이 공들여 만든 홈페이지 디자인을 그대로 유지한 채
다른 웹 정보를 원 하는 위치에 열어 보여 줄 수가 있습니다.
이런 기능을 수행 하는 것이 바로 프레임(FRAME) 으로,
홈 페이지에서는 없어서는 안될만큼 필수적으로 쓰여지는 기능입니다.
프레임은 창을 여러개 띄우지 않고 두개 또는 그 이상의 페이지를 볼 수 있도록 해 줍니다.
즉 쉽게 말해서 하나의 스크린을 몇 부분으로 나눈 후 나누어진 각 부분에
서로다른 웹 페이지를 보여주는 것이지요..
※ 프레임태그의 기본 프레임태그의 가장 기본적인 명령어는<frame>과 <frameset></frameset> 입니다.
근데 이 명령어로만은 백날을 해봐도 화면이 나누어 지지 않지요...
여기에 옵션(속성)명령어를 붙여야 합니다.
① frameset 태그 속성 ( <frameset rows="30%, 70%" / cols="20%, * " frameborder="0/1"> )
| rows="가로화면비율%" | 화면을 가로로 나누는 명령어 |
| cols="세로화면비율%" | 화면을 세로로 나누는 명령어 |
| frameborder=0 혹은 1 | 프레임 구분선을 나타낼땐 1, 그렇지 않을땐 0 을 설정 |
| framespacing="수치" | 프레임 간의 간격을 조정 |
| |
② frame태그 속성( <frame src="웹페이지주소" scrolling="auto/yes/no" marginwidth="수치" marginheight="수치"> )
| name="문자열" | 프레임 이름을 지정, target 링크할 경우 필요함 |
| noresize | 프레임 경계를 마우스로 조절을 못하게 함 |
| scrolling="auto/yes/no" | 스크롤바를 생기게 할지 정하는 명령어. auto : 자동, yes : 스크롤 생김, no : 스크롤 안 생김 |
| marginwidth="수치" | 프레임 좌우경계선과 그 안에 내용과의 여백조정 |
| marginheight="수치" | 프레임 상하경계선과 그 안에 내용과의 여백조정 |
| <frame src="불러올 웹페이지"> | 나누어진 화면에 불러올 웹페이지 지정 |
③ 프레임태그의 기본형식
프레임태그의 기본형식은 아래와 같습니다.
ⓐ <frameset row="가로분할비율" 혹은 cols="세로분할비율">
ⓑ <frame src="웹페이지주소" >
ⓒ <frame src="웹페이지주소">
ⓓ </frameset> |
& 프레임 만들기 예제
위 , 아래 두개의 프레임으로 수평분할하는 예제 |
* 가 이 드 *
★ 화면을 두개의 프레임으로 분할하기 위해서는 아래처럼 두개의 웹문서와 프레임으로 분할 설정한 문서 이렇게 3개의 문서가 필요.
상단 HTML 문서 예
(파일이름을top.html 로 가정) |
상단 HTML 문서 예
(파일이름을 main.html 로 가정) |
프레임 설정 HTML 문서 예
(파일이름을 index.html 로 가정) |
| <html>
<head>
<title>하단의 메인페이지 문서입니다</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title> 프레임 분할 예제 </title>
</head>
<frameset cols="100,*">
<frame name="top" src="top.html">
<frame name="main" src="main.html">
</frameset>
</html> |
|
위의 상단문서와 하단의 메인문서를 한 화면에 수평분할한 예 |
html 문서 시작 *---> <html>
head 시작 *---> <head>
페이지 타이틀 넣기 *---> <title> 프레임 분할 예제 </title>
head 끝 *---> </head>
프레임 분할설정 *---> <frameset cols="120,*">
☞ 가로로 120 픽셀과 나머지로 분할.
상단 프레임 설정 *---> <frame name="top" src="top.html">
☞ 항상 먼저 설정될 프레임 문서가 앞에 설정된다
가로로 100 픽셀과 나머지로 분할.
하단 프레임 설정 *---> <frame name="main" src="main.html">
프레임 분할 끝 *---> </frameset>
html 끝 *---> </html>
|
| 프레임으로 수평분할 된 결과
top.html 문서내용
전체화면에서 100 픽셀만큼 배당 |
main.html 문서내용
120 픽셀영역을 제외한 나머지 부분을 배당 |
|
좌 , 우 두개의 프레임으로 수직분할하는 예제 |
* 가 이 드 *
★ 화면을 두개의 프레임으로 분할하기 위해서는 아래처럼 두개의 웹문서와 프레임으로 분할 설정한 문서 이렇게 3개의 문서가 필요.
왼쪽 HTML 문서 예
(파일이름을 main.html 로 가정) |
오른쪽 HTML 문서 예
(파일이름을 right.html 로 가정) |
프레임 설정 HTML 문서 예
(파일이름을 index.html 로 가정) |
<html>
<head>
<title>왼쪽 문서입니다</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title>오른쪽 문서입니다</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title> 프레임 분할 예제 </title>
</head>
<frameset cols="*,150">
<frame name="top" src="left.html">
<frame name="main" src="right.html">
</frameset>
</html> |
|
위의 왼쪽 메인문서와 오른쪽 문서를 한 화면에 수직 분할한 예 |
html 문서 시작 *---> <html>
head 시작 *---> <head>
페이지 타이틀 넣기 *---> <title> 프레임 분할 예제 </title>
head 끝 *---> </head>
프레임 분할설정 *---> <frameset rows="*,150">
☞ 세로로 150 픽셀과 나머지로 분할.
왼쪽 프레임 설정 *---> <frame name="left" src="left.html">
☞ 항상 먼저 설정될 프레임 문서가 앞에 설정된다
오른쪽 프레임 설정 *---> <frame name="right" src="right.html">
프레임 분할 끝 *---> </frameset>
html 끝 *---> </html>
|
| 프레임으로 분할 된 결과
left.html 문서내용
150 픽셀영역을 제외한 나머지 부분을 배당 | right.html 문서내용
전체화면에서 150 픽셀만큼 배당 |
|
왼쪽, 위쪽 , 오른쪽 3 개의 프레임으로 수직.수평분할하는 예제 |
* 가 이 드 *
★ 화면을 두개의 프레임으로 분할하기 위해서는 아래처럼 세개의 웹문서와 프레임으로 분할 설정한 문서 이렇게 4개의 문서가 필요.
아래 예는 수평분할을 먼저 한 후 수직분할을 한 예이다..
상단 HTML 문서 예
(파일이름을 1.html 로 가정) |
왼쪽 HTML 문서 예
(파일이름을 2.html 로 가정) |
오른쪽 HTML 문서 예
(파일이름을 3.html 로 가정) |
프레임 설정 HTML 문서 예
(파일이름을 index.html 로 가정) |
<html>
<head>
<title>
상단 문서입니다
</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title>
왼쪽 문서입니다
</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title>
오른쪽 문서입니다
</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title> 3 개의 프레임으로 나누기 </title>
</head>
<frameset cols="22%,*">
<frame src="1.htm">
<frameset rows="120,*">
<frame src="2.htm">
<frame src="3.htm>
</frameset>
</frameset>
</html> |
|
위의 왼쪽, 위쪽 , 오른쪽 3 개의 문서를 한 화면에 수직.수평 분할한 예 |
html 문서 시작 *---> <html>
head 시작 *---> <head>
페이지 타이틀 넣기 *---> <title> 프레임 분할 예제 </title>
head 끝 *---> </head>
프레임 수평분할설정 *---> <frameset <font color=blue>cols="22%,*"</font>
☞ 가로로 수평분할을 먼저 설정한다.
상단 프레임 설정 *---> <frame src="1.htm">
프레임 수직분할 설정*---> <frameset <font color=red>rows="120,*"</font>>
☞ 수직으로 분할할 두개의 프레임 비율을 설정한다.
★ 위에 수평분할을 한 22%를 제외하고 나머지 부분의 스크린을 기준으로
분할하게 된다
수직 프레임문서*---> <frame src="2.htm">
☞ 먼저 할당할 문서를 설정한다(예에서는 1.html).
나머지수직프레임문서*---> <frame src="3.htm>
수직 프레임 분할 끝 *---> </frameset>
수평 프레임 분할 끝 *---> </frameset>
html 끝 *---> </html>
|
| 프레임으로 분할 된 결과
2.html 문서내용
전체화면에서 120 픽셀만큼 배당 | 1.html 문서내용
전체화면에서 22 % 만큼 배당 |
3.html 문서내용
22 % 를 제외한 나머지 배당 |
|
왼쪽, 위쪽 , 오른쪽 3 개의 프레임으로 수직.수평분할하는 예제 |
* 가 이 드 *
★ 화면을 두개의 프레임으로 분할하기 위해서는 아래처럼 세개의 웹문서와 프레임으로 분할 설정한 문서 이렇게 4개의 문서가 필요.
아래 예는 수직분할을 먼저 한 후 수평분할을 한 예이다..
상단 HTML 문서 예
(파일이름을 1.html 로 가정) |
왼쪽 HTML 문서 예
(파일이름을 2.html 로 가정) |
오른쪽 HTML 문서 예
(파일이름을 3.html 로 가정) |
프레임 설정 HTML 문서 예
(파일이름을 index.html 로 가정) |
<html>
<head>
<title>
왼쪽 문서입니다
</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title>
상단 문서입니다
</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title>
오른쪽 문서입니다
</title>
</head>
<body>
내용(메뉴)
</body>
</html> | <html>
<head>
<title> 3 개의 프레임으로 나누기 </title>
</head>
<frameset rows="120,*">
<frame src="1.htm">
<frameset cols="22%,*">
<frame src="2.htm">
<frame src="3.htm>
</frameset>
</frameset>
</html> |
|
위의 왼쪽, 위쪽 , 오른쪽 3 개의 문서를 한 화면에 수직.수평 분할한 예 |
html 문서 시작 *---> <html>
head 시작 *---> <head>
페이지 타이틀 넣기 *---> <title> 프레임 분할 예제 </title>
head 끝 *---> </head>
프레임 수직분할설정 *---> <frameset <font color=blue>rows="120,*"</font>
☞ 세로로(120 : 나머지) 수직분할을 먼저 설정한다.
왼쪽 수직프레임 설정 *---> <frame src="1.htm">
프레임 수평분할 설정*---> <frameset <font color=red>rows="22%,*"</font>>
☞ 수평으로 분할할 두개의 프레임 비율을 설정한다.
★ 위에 수직분할을 한 22%를 제외하고 나머지 부분의 스크린을 기준으로
분할하게 된다
수평 상단 프레임문서*---> <frame src="2.htm">
☞ 먼저 할당할 문서를 설정한다(예에서는 1.html).
수평 나머지 프레임문서*---> <frame src="3.htm>
수평 프레임 분할 끝 *---> </frameset>
수직 프레임 분할 끝 *---> </frameset>
html 끝 *---> </html>
|
| 프레임으로 분할 된 결과
2.html 문서내용
전체화면에서 120픽셀 만큼 배당 |
1.html 문서내용
전체화면에서 22 % 만큼 배당 | 3.html 문서내용
120 을 제외한 나머지 배당 |
앞의 수평분할을 먼저한 예와 결과를 비교해 보세요 ! |
& 아이프레임(IFRAME) 태그의 의미와 속성
IFRAME 태그는 위의 화면분할 프레임과는 달리 현재의 웹 페이지내에서 다른 웹 페이지의
내용을 불러와 설정한 속성대로 나타내 주는 기능을 하느 태그입니다.
이 기능은 마이크로소프트의 익스플로러 버젼 4.0 이상의 브라우져에 내장된
기능을 이용하는 태그로 넷스케이프 브라우져에서는 수행이 안되는 기능태그입니다
* iframe 으로 다른 문서를 불러들이는 형태
<iframe> </iframe> 태그속성
<iframe 속 성> |
| src="페이지 주소" | 아이 프레임으로 불러올 문서의 주소를 설정한다. |
| frameborder="수치값" | 프레임의 테두리 두게를 설정하는 것으로 0 의 값을 주면 테두리가 없어진다. |
| scrolling="속성값" | 스크롤바를 나타낼 것인가를 결정하는 속성으로 속성값은 yes 또는 no |
| name="이름" | 프레임에 이름을 부여해 주는 속성으로 임의 이름으로 설정해 준다 |
| width="창의 넓이값" | 프레임 창의 가로 즉, 넓이 크기값을 설정하는 속성이다. |
| height="창의 높이값" | 프레임 창의 세로 즉, 높이 크기값을 설정하는 속성이다. |
| leftmargin="수치값" | 프레임의 왼족여 백값을 설정하는 속성으로 수치값을 0 으로 주면 여백이 없어진다. |
| rightmargin="수치값" | 프레임의 오른쪽 여백값을 설정하는 속성으로 수치값을 0 으로 주면 여백이 없어진다. |
| topmargin="수치값" | 프레임의 상단 여백값을 설정하는 속성으로 수치값을 0 으로 주면 여백이 없어진다. |
| bottommargin="수치값" | 프레임의 하단 여백값을 설정하는 속성으로 수치값을 0 으로 주면 여백이 없어진다. |
| 아이프레임(IFRAME) 예제 |
| 태그 설정 예문 | 프레임 출력결과 |
| <iframe src="http://www.yahoo.co.kr" width="200" height="100" frameborder="0" scrolling="yes"></iframe> | |
스크롤바 값을 NO 로 설정 하였을 때
<iframe src="http://www.yahoo.co.kr" width="200" height="100" frameborder="0" scrolling="no"></iframe> | |
위의 속성값을 모두 설정해 주었을 때
<iframe src="http://www.daum.net/" name="daum" width="200" height="100" frameborder="0" scrolling="yes" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"></iframe> | |
테두리 값을 10px 로 주었을때
<iframe src="http://www.naver.com/" name="naver" width="200" height="100" frameborder="10px" scrolling="yes" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"></iframe> | |
IFRAME 페이지를 투명하게 표현하기
<iframe src="불러올 페이지 주소" width="넓이" height="높이"AllowTransparency="true">
위와 같이 iframe 태그내에 AllowTransparency="true" 속성을
추가해 준 후 반드시 iframe으로 불어올 페이지내에서
<body> 태그안에다가 다음과 같이 스타일을 넣어준다
<body style="background-color:transparent"> | ★ 옆과 같이 allowTransparency 속성을 쓰지 않고 Alpha 필터를
이용해 IFRAME 자체를 투명하게 표현할 수도 있다 ifrmae 태그내에 style="filter: Alpha(Opacity=60);" 이와같이 스타일로 필터의 정도를 지정해 주면 된다. ----------- (투명정도)
태그의 설정
<iframe src="불러올 페이지 주소" width="넓이" height="높이"style="filter: Alpha(Opacity=60);">
|
댓글 없음:
댓글 쓰기