사이드바 영역으로 건너뛰기

2-8. FRAME

 

8. FRAME

 

8.1. 요소
8.2. 요소의 속성들
8.3. 요소의 속성들
8.4. 요소
8.5. 프레임간의 상호작용



8. FRAME

프레임 기능은 웹브라우저 화면을 분할하여 여러 개의 문서를 동시에 보여주기 위한 기능입니다. 예를 들어 화면을 좌우 두 개의 프레임으로 나누었다면 좌측과 우측 프레임에 서로 다른 문서를 동시에 보여줄 수 있게 됩니다. 이런 경우 좌측 및 우측에 나타날 문서 이외에 각 문서를 나타내는 방법, 각 문서들간의 관계 등을 설명하는 한 개의 문서가 더 필요하게 되는 데 이 문서를 마스터페이지 또는 프레임 정의문서라고 부릅니다.

마스터 페이지에 사용되는 요소는 , , 등이 있습니다.
요소는 프레임구조의 첫부분과 마지막 부분에 사용되는 요소로 각 프레임의 레이아웃을 설명하는 명령이며, 요소는 디스플레이될 실제 HTML 문서의 이름을 나타내는 명령입니다.
요소는 프레임 기능을 지원하지 못하는 웹브라우저를 위한 요소입니다.

8.1. 요소
프레임 문서는 일반 HTML 웹페이지와는 페이지의 기능상에서 큰 차이점을 가지고 있기 때문에 태그를 사용하지 못합니다. 따라서 프레임 문서는 다음과 같은 구조를 갖게 됩니다.

 







8.2. 요소의 속성들
cols/rows 속성
Frameset 태그 내에는 반드시 cols 또는 rows 속성을 사용하여야 합니다. cols 속성은 프레임을 좌우로 분리하는 속성이며 rows는 프레임을 상하로 나누는 속성입니다. 속성값은 각 프레임의 크기를 지정하는데 사용되는데 화면에 대한 비율(%) 또는 픽셀 값으로 나타냅니다.
여기서 화면의 크기를 나타내는 방법은 다음과 같은 여러 가지 방법들이 있습니다.
첫 번째의 예 20%, 20%, 60% 는 좌우로 나누어진 세 개의 프레임이 각각 화면의 20%, 20%, 60%가 되도록 하라는 의미인데 이 경우는 세 개 값의 합이 100%가 되어야 합니다. 두 번째의 300, 600은 상하로 나우어진 두 개의 프레임의 높이가 각각 300픽셀, 600픽셀이 되도록 하라는 의미입니다. 창의 크기를 나타내는데 부호 *를 사용할 수도 있는데 100,*의 의미는 첫 번째 창의 크기는 100픽셀로 하고 화면의 나머지를 두 번째 창으로 사용하라는 의미가 되며 다음의 *,3*의 의미는 두 번째 창이 첫 번째 창의 3배가 되도록 창을 나누라는 의미가 됩니다.

  cols="20%,20%,60%"
rows="300,600"
rows="100,*"
cols="*,3*

border 속성
프레임간의 경계선의 두께를 지정하는 속성입니다.

다음의 예제코드를 보면서 결과를 예측해 보시기 바랍니다.









8.3. 요소의 속성들
name 속성
각 프레임의 이름을 지정하는 속성입니다.
이름을 지정하는 이유는 프레임을 사용하면서 프레임간의 상호작용을 지원하는 target 속성을 사용하기 위함인데 target 속성은 Anchor 요소의 속성이 됩니다.

 


marginwidth/marginheight 속성
지정한 픽셀 값만큼 웹브라우저의 좌우 또는 상하에 여백을 두고 나타나게 합니다.

 

scrolling 속성
프레임의 스크롤바를 없애거나 만들 때 사용합니다. 속성값으로는 YES, NO, AUTO 세 종류가 있는 데 속성값에 YES를 사용하면 항상 스크롤바를 만들어 주고 NO를 사용한 경우는 항상 스크롤바를 만들어 주지 않으며 AUTO를 사용하면 문서의 양이 한 화면을 넘는 경우 자동으로 스크롤바가 생기게 합니다. 이 속성의 기본값은 AUTO입니다.

 

noresize 속성
사용자가 프레임의 크기를 임의로 조절할 수 없도록 하는 속성입니다. 이 속성은 속성값을 갖지 않습니다.

 

8.4. 요소
프레임기능을 제공하는 웹브라우저의 경우에는 태그에 따라오는 <BODY></BODY> 태그 내의 내용을 무시하게 되며, 프레임기능을 제공하지 않는 웹브라우저의 경우는 <BODY></BODY> 내의 내용을 웹브라우저에 표현합니다. <BR> <TABLE width="100%" border=0> <TBODY> <TR> <TD width=15>&nbsp;</TD> <TD bgColor=#ecefc2><FRAMESET cols=50%,50%><BR><FRAME src="table.html"><BR><FRAME src="link.html"><BR></FRAMESET><BR><NOFRAMES><BR><BODY><BR>웹브라우저에 나타날 내용...<BR></BODY><BR>

8.5. 프레임간의 상호작용
태그의 target 속성
태그에 target="프레임 이름"의 형식으로 target 속성을 삽입하면 태그에 의해 링크된 문서는 지정된 이름의 프레임에 나타나게 됩니다.

Magic target
target 속성의 속성값 중에 임의로 정의한 프레임의 이름과 관계없이 특별한 속성값을 의미합니다. 이 특수 target은 _로 시작하며 반드시 소문자를 사용해야 합니다.

Base target
한 문서내의 모든 링크들을 모두 같은 프레임에 나타내도록 한다면 모든 태그에 속성을 사용하지 않고 문서의 첫 링크 앞에 다음과 같은 HTML 코드를 넣으면 됩니다.

 

이 코드는 "지금부터 나오는 모든 anchor에 연결된 문서들은 모두 display란 이름을 가진 프레임(오른쪽 프레임)에 보여 줍니다"라는 의미를 나타냅니다.


진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크
  • 태그
  • 글쓴이
    진보호스팅
  • 등록일
    2004/07/29 15:40
  • 수정일
    2004/07/29 15:40
  • 분류
    웹페이지 제작
  • 트랙백
    0개
  • 댓글
    0개