[HTML] 프레임 태그

HTML 2014. 7. 14. 09:00

(1) 프레임 나누기 기본 형식

  • 프레임을 나눌 때는 프레임을 나누는 역할을 하는 최초의 HTML 문서가 있어야 한다.
  • 이 때 최초의 HTML 문서의 파일명이 보통 메인 파일이 "index.html(html)"로 된다.
  • 프레임을 나누는 태그는 일반 HTML 문서의 <BODY>~</BODY> 태그 대신 사용된다.
  • 프레임은   <FRAMESET COLS=~>는 좌우로 나누는 태그
  • <FRAMSET ROWS=~>는 상하로 나누는 태그

(2) 좌우 프레임 나누기

   <FRAMESET COLS="X%,Y% border="0">

          <FRAME SRC="A.HTML">

          <FRAME SRC="B.HTML">

   </FRAMESET>

 <FRAMESET COLS="X%,Y%">

  • 창을 좌우로 나눈다. 「창1」이 X% 만큼, 「창2」가 Y% 만큼의 크기가 된다.
  • ★ 항상 X%+Y%=100%가 되게한다.

 < FRAMESET SRC="A.HTML>,<FRAME SRC="B.HTML">

  • 「창1,「창2」에 A.HTML, B.HTML 문서가 나타난다.
  • 태그가 나타나는 순서에 의해 문서의 위치가 「창1」인지 「창2」인지가 결정된다.

 </FRAMESET>

  • 프레임 끝을 표시한다

(3) 상하 프레임 나누기

 <FRAMESET ROWS = "X%,Y% border="0">

          <FRAME SRC="A.HTML">

          <FRAME SRC="B.HTML">

</FRAMESET>

 

(4) 프레임 나누기 속성

 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="수치" arginwidth="수치"> )

 name="문자열"

 프레임 이름을 지정, target 링크할 경우 필요함 

 noresize

 프레임 경계를 마우스로 조절을 못하게 함

 scrolling="auto/yes/no"

 스크롤바를 생기게 할지 정하는 명령어.

  auto : 자동, yes : 스크롤  생김, no : 스크롤 안 생김

 marginwidth="수치"

 프레임 좌우경계선과 그 안에 내용과의 여백조정

 marginheight="수치"

 프레임 상하경계선과 그 안에 내용과의 여백조정

 <frame src="불러올 웹페이지">

 나누어진 화면에 불러올 웹페이지 지정

(5) 프레임 나누기 예

프레임이있는 페이지 소스

결과

<frameset cols="30%,70%">
      <frame src="left.htm" name="left">
      <frame src="right.htm" name="right">
</frameset>

left.htm

right.htm

cols 는 세로로 나눔을 뜻합니다. 30%, 70% 의 비율로 나눠주었군요. 위에쓴 left.htm 이라는 문서가 화면의 왼쪽 30%비율을 차지합니다.

<frameset rows="50%,50%">
      <frame src="top.htm" name="top">
      <frame src="bottom.htm" name="bottom">
</frameset>

top.htm

bottom.htm

rows는 가로로 나누는 것이군요. 50%, 50% 의 비율이구요, 위쪽에 쓴 top.htm 이 문서의 위쪽에 옵니다.

<frameset rows="20%,30%,50%">
      <frame src="top.htm" name="top">
      <frame src="middle.htm" name="middle">
      <frame src="bottom.htm" name="bottom">
</frameset>

top.htm

middle.htm

bottom.htm

rows는 가로로 나누는 것이군요. 50%, 50% 의 비율이구요, 위쪽에쓴 top.htm 이 문서의 위쪽에 옵니다.


<frameset rows=
"20%,*">
      <frame src="top.htm" name="top">

         <frameset cols="*.2*">
            <frame src="middle.htm" name="middle">
            <frame src="bottom.htm" name="bottom">

         </frameset>
</frameset>

top.htm

mid
dle
.htm

bottom.htm

먼저 위-아래를 나눕니다. 20%옆에 *은 나머지비율을 뜻합니다. 밑쪽에 위치할 문서가 또 분할되었군요. 다시한번 framset 을써주고 세로로 나눕니다. 2*  *의 두배를 뜻합니다.

<frameset rows="20%,*,20%">
      <frame src="top.htm" name="top">

          <frameset cols="*.2*">
              <frame src="left.htm" name="left">
              <frame src="right.htm" name="right">
         </frameset>

      <frame src="bottom.htm" name="bottom">
</frameset>

top.htm

left
.htm

right.htm

bottom.htm

먼저 가로로 세단계를 나눕니다. 맨 위와 맨 아래를 각각20%로 설정했군요. 가운데 들어갈 문서를 세로로 나눠주었습니다. 가운데 자리에 framset 을써서 세로로 나눕니다. "*,2*" 는 오른쪽 면적이 왼쪽의 2배가 됩니다.

<frameset cols="50%,*" rows="50%,*">
      <frame src="1.htm" name="1">
      <frame src="2.htm" name="2">
      <frame src="3.htm" name="3">
      <frame src="4.htm" name="4">
</frameset>

1

2

3

4

무작정 frame 태그를 이용하여 4개로 쭉 나눠주면 이와같은 모양이 됩니다.

 

출처: http://xmljang.com.ne.kr/html

블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요