프레임

1. 프레임(FRAME)의 기본 구조

프레임은 하나의 창을 여러 개의 창틀로 나누어 나타내는 역할을 한다.

프레임으로 구성된 문서는 HEAD와 FRAMESET으로 이루어진다. FRAMESET는 하나의 창의 두 개 이상의 창틀로 나누겠다는 것을 브라우저에게 알려주며, 또한 각각의 프레임의 폭을 결정한다. 프레임의 수만큼 FRAMESET 안에 FRAME 태그를 넣는다.

1.1. 프레임의 기본구조

 

<html>

<head><title> 프레임</title>

</head>

<frameset>

<frame>

<frame>

</frameset>

</html>

1.2. <FRAMESET></FRAMESET>

브라우저에 프레임을 어떻게 만들 것인지를 지정하는 태그이다.

 

속성

설명

col=숫자

<frameset cols="300,*">

화면을 수직으로 나눈다. 단위는 픽셀이나 퍼센트를 이용할 수 있다.

1. 브라우저 화면을 좌우로 2등분한다.

2. 첫 번재 프레임의 너비를 300픽셀로 한다.

3. 나머지 프레임의 너비는 남은 영역으로 한다.

rows=숫자

<frameset rows="30%,70%">

화면을 수평으로 나눈다.

1. 브라우저화면을 상하로 2등분한다.

2. 첫 번째 프레임은 브라우저 높이의 30%를 차지한다.

3. 두 번째 프레임은 브라우저 높이의 70%를 차지한다.

bordercolor=색상명

프레임 경계선의 색을 지정한다.

framespacing=숫자

브라우저내 프레임간의 간격을 지정한다.:F

border=숫자

프레임 경계선의 두께를 지정한다.

프레임의 경계선을 없애려면 border=0을 사용한다.

noresize=숫자

프레임의 크기를 고정시킨다.

1.3. <FRAME>...</FRAME>

<frame>는 프레임을 만드는 태그로서 프레임에 나타날 문서를 지정한다.

<frameset>와 </frameset>사이에 들어가며 <frameset>에서 정의 한 프레임의 수만큼 <frame>을 만들어야 한다.

 

속성

설명

border=숫자

프레임 주의 경계선 두께를 픽셀 단위로 지정한다.

border=숫자

프레임 주의 경계선 두께를 픽셀 단위로 지정한다.

src=URL

정의된 프레임 내에 나타내고자 하는 문서의 위치를 지정한다.

name=이름

각 프레임의 이름을 지정한다. name을 반드시 주어야만 된다.

target 속성의 값으로 프레임의 이름을 쓰면 링크를 클릭했을 때 그 내용이 해당 프레임에 나타나게 된다.

noresize

일반적으로 프레임과 프레임을 나누는 경계선은 마우스로 끌어서 이동시킬 수 있도록 되어있다. noresize 속성은 이 경계선이 전혀 움직일 수 없도록 하고 싶을 때 사용하게 된다.

scrolling=yes/no/auto

프레임에 스크롤 바를 보여줄 것인지를 지정하는 속성.

auto(기본값)는 필요할 때 스크롤 바가 생성된다.

yes는 항상 스크롤 바가 생성된다.

no는 스크롤 바가 생성되지 않는다.

marginheight

프레임의 상하의 여백 설정

marginwidth

프레임의 좌우의 여백 설정

1.4. 프레임 예제

1.4.1. 프레임 좌우 나누기

1.4.1.1. HTML 문서

 

<html>

<head><title>프레임 좌우 분할</title>

</head>

<frameset cols="20%,80%">

<frame src="col_1.html">

<frame src="col_2.html">

</frameset>

</html>

▶ col_1.html 파일

 

<html>

<head><title>col_1.html</title>

</head>

<body>col_1.html 문서의 내용입니다.

</body>

</html>

▶ col_2.html 파일

 

<html>

<head><title>col_2.html</title>

</head>

<body>col_2.html 문서의 내용입니다.

</body>

</html>

1.4.1.2. 브라우저 화면


1.4.2. 프레임 상하 좌우나누기 예제

1.4.2.1. HTML 문서

 

<html>

<head><title>프레임 상하 좌우나누기</title>

</head>

<frameset cols="50%,50%">

<frameset rows="60%,40%">

<frame src="row1.html">

<frame src="row2.html">

</frameset>

<frame src="doc.html">

</frameset>

</html>

▶ row1.html 파일

 

<html>

<head>

<title>row1.html</title>

</head>

<body>

row1.html 문서의 내용입니다.

</body>

</html>

▶ row2.html 파일

 

<html>

<head>

<title>row2.html</title>

</head>

<body>

row2.html 문서의 내용입니다.

</body>

</html>

▶ doc.html 파일

 

<html>

<head>

<title>doc.html</title>

</head>

<body>

doc.html 문서의 내용입니다.

</body>

</html>

1.4.2.2. 브라우저 화면


1.5. <IFRAME> 태그

HTML 문서 안에 다른 HTML문서를 창 형식으로 삽입한다.

<iframe>태그는 <frameset>태그안에서 사용되지 않고 <img>태그처럼 HTML문서의 어느 곳에나 올 수 있다.

 

속성

내용

width

프레임의 너비

height

프레임 높이

src

URL을 지정한다.

frameborder

프레임 구분선을 표시한다.(1:표시/0:숨김)

marginwidth

프레임 좌우 여백

marginheight

프레임 상하 여백

scrolling

스크롤(auto:자동/yes:있음/0:없음)

1.5.1. HTML 문서

 

<html>

<head><title>인라인 프레임</title>

</head>

<body>

<iframe src="test.html" width="200 height="200 name="box"

scrollong="auto" frameborder="1">

</iframe><p>

<a href="http://stat.andong.ac.kr" target="box">여기를 클릭</a>

하면 인라인 프레임에 내용을 보여줍니다.

</body>

</html>

1.5.2. 브라우저 화면-처음화면

1.5.3. 브라우저 화면 - 링크된 내용이 나타나는 화면



1.6. name과 target 속성 예제

1.6.1. target 의 속성

 

target="프레임 이름, _self, _top, _parent, _blank"

링크된 문서를 나타낼 특정 위치의 프레임의 이름을 지정한다.

_self : 자기 자신을 의미하므로, 현재 프레임의 내용이 선택된 내용으로 대치된다.

_top : 포함하고 있는 모든 프레임을 삭제하고 전체 브라우저 윈도우에 문서를 읽어 들인다.

_parent : 프레임 셋 안에 다시 프레미 셋이 정의될 경우 자신의 상위 프레임 셋이 전체 내용에 선택된 내용을 표시해준다.

_blank : 이름이 없는 새윈도우에 읽어들인다.

1.6.2. HTML 문서

Name은 프레임의 이름을 만드는 것이다.

링크를 하였을 때 어떤 프레임에 나타낼 것인지를 지정해야 한다.

 

<html>

<head><title>프레임 문서</title>

</head>

<frameset cols="20%,80%">

<frame src="menu.html">

<frame src="contents.html" name="right">

</frameset>

</html>

▶ menu.html. 파일

 

<html>

<head>

<title>menu</title>

</head>

<body>

원하는 메뉴를 클릭하세요.<p>

<a href="aboutme.html" target="right">1. 나의 소개</a><br>

<a href="http://anu.andong.ac.kr/~sonice" target="_blank">2. HTML 강좌</a><br>

<a href="sites.html" target="right">3. 추천사이트<br></a>

4. 게시판<br>

</body>

</html>

1.6.3. 브라우저 화면