FRAME (2)


1. FRAME 형식


FRAMESET

  1. < FRAMESET >은 "창을 나눠라" 라고 지시하는 것입니다..
  2. 프레임 셋의 모든 내용은 < FRAMESET >...< /FRAMESET >태그 안에 들어갑니다.
  3. < FRAMESET >태그에 쓰이는 두 가지 속성(ROWS, COLS)은 그 창을 어떻게 나눌 것인가를 지시합니다.
    • ROWS
      ROWS는 "창을 가로로 나눠라" 라는 말입니다. 창의 갯수는 콤머로, 크기는 %와 * , 그리고 pixel로 나누어 집니다.

      % 1~100까지의 %수치로 창의 크기를 나눕니다. 당연히 모든 창의 크기의 합은 100%가 되어야 합니다.
      < frameset rows="20%, 60%, 20%"> ☞ 20:60:20 크기의 가로로 나뉜 3개의 창.
      < frameset rows="50%, 50%"> ☞ 50:50 크기의 가로로 나뉜 2개의 창
      * *란 무한대를 의미하는 것으로서 분할을 한 나머지 모두를 의미할 때 *를 사용합니다.
      < frameset rows="*,*"> ☞ 같은 크기의 가로로 나뉜 2개의 창
      < frameset rows="2*,*"> ☞ 2:1 크기의 가로로 나뉜 2개의 창
      < frameset rows="2*,*,*"> ☞ 2:1:1 크기의 가로로 나뉜 3개의 창
      pixel 브라우저를 나눌 때 정확히 픽셀을 지정하여 나누는 방법입니다.
      < frameset rows="200,600" > ☞ 200픽셀, 600픽셀의 나뉜 2개의 창
      < frameset rows="300,*" > ☞ 왼쪽은 300픽셀, 나머지는 남은 픽셀로 나누었습니다. 그런데 브라우저 화면은 개인적인 환경에 따라 달라질 수 있으므로 가급적 픽셀로 분할하는 방법은 피하는게 좋습니다.

    • COLS
      COLS는 '창을 세로로 나눠라'라는 뜻입니다. 창의 크기와 갯수는 위의 ROWS의 경우와 동일합니다.
FRAMESET=ROWS FRAMESET=COLS

<html> <head> <title>프레임 나누기</title> </head> <frameset rows="30%,70%"> <frame src="top.html"> <frame src="bottom.html"> </frameset> </html>
<html> <head> <title>프레임 나누기</title> </head> <frameset cols="30%,70%"> <frame src="left.html"> <frame src="right.html"> </frameset> </html>
ROWS와 COLS가 복합적으로 들어 있는 것
<html> <head> <title>가로와 세로로 프레임 나누기</title> <frameset rows="120,*"> <frame src="top.html"> <frameset cols="150,*"> <frame src="left.html"> <frame src="right.html"> </frameset> </frameset> </head> </html>


FRAME


  1. < frameset >으로 창을 나눈다음 각 창에 대한 설정을 해야 겠죠? 그 역할을 하는 Tag가 < frame>입니다. < frame> Tag에는 < frameset> Tag로 나눈 곳에 들어갈 html 파일을 지정하게 됩니다.
  2. < frame >태그의 속성에는 src, name, frameborder, marginwidth, marginheight, scrolling, noresize 등이 있습니다.
src = "url" 각 창들에 이어질 URL들을 연결합니다. 이 src 속성을 적지 않으면 프레임이 적용되지 않습니다.
name = "name" 프레임 기능을 제대로 쓸려면 각 프레임마다 이름이 있어야 합니다. 예를 들어 위의 결과에서 A라는 이름의 창에 어떤 문서랑 링크되어 있다고 할 때 그 링크된 페이지를 프레임내의 어떤 창으로 가져오기 위해서 창 하나하나에 이름을 지어 주는 겁니다.
marginwidth = "value"
marginheight = "value"		 프레임의 좌우, 상하 여백을 설정합니다.
frameborder="yes, or no" 프레임의 경계선을 보여줄지를 설정합니다. 속성값을 YES로 하면 경계선이 보이고, NO나 0을 하면 보이지 않습니다.
scrolling = "yes, no, auto" 디폴트값은 auto입니다. yes는 스크롤바가 보이고, no는 반대로 안보이겠죠 ?
noresize 프레임으로 창을 나눠 놓으면 창의 경계를 마우스로 드래그(Drag)해서 크기를 변경할 수 있습니다. 프레임의 크기를 고정시키고 싶으면 noresize를 넣어 줍니다.


NOFRAME


  1. 프레임을 나누어 홈페이지를 제작했는데, 사용자가 프레임을 지원하지 않는 웹 브라우저에서 그 화면을 보게되면 황당하겠죠? 이럴 경우에 경고문 형식으로 프레임으로 제작되었다는 것을 알려주는 기능을 합니다.
  2. < noframe >...< /noframe> 태그 사이에는 프레임으로 제작되었다는 문구나, 당신이 지금 사용하고 있는 브라우저는 프레임을 지원하지 않으므로 프레임을 사용하는 브라우저로 다시 방문해 주세요 등의 문구가 사용됩니다.
  3. 물론 프레임이 지원되는 태그에서는 < noframe >...< /noframe> 태그로 둘러싼 부분은 완전히 무시됩니다.
  4. 브라우저 초기시절(Netscape 2.0부터 추가)프레임을 지원하지 않는 브라우저들을 위해서 사용되던 태그입니다.
  5. 현재에는 거의 형식적인 태그입니다. 프레임을 지원하지 않는 브라우저가 거의 없기때문입니다.



2. FRAME 속성

(1) 프레임 크기 고정하기


< FRAME src="파일명" noresize>

  1. 프레임은 사용자가 원하는대로 크기를 움직여가며 조절할 수 있습니다.
  2. 아래의 왼쪽 프레임창에서 마우스 포인터를 세로 분할선 위에 올리고 우측으로 드래그 하면 오른쪽과 같은 현상이 발생합니다.
  3. 이렇게 제작자의 의도와는 달리 사용자들이 마음대로 화면을 바꿀 수 있는데 noresize속성을 이용하면 화면을 마음대로 조정하는 것을 막을 수 있습니다.
  4. noresize속성을 사용하지 않으면 frame border에 마우스를 가져가면 마우스 포인터가 바뀌면서 프레임을 움직일 수 있지만, noresize속성을 사용했을 경우에는 border에 마우스를 가져가도 마우스 포인터가 변하지 않고, 프레임의 크기를 변경하는 것이 불가능합니다.
  5. noresize를 적용하지 않은 경우 프레임의 크기를 사용자가 마음대로 조절할 수 있지만, 결국 브라우저에서 새로고침(F5) 버튼을 누르면 처음의 모습으로 돌아가게 됩니다.

※ noresize는 프레임의 크기를 고정시켜 아래처럼 화면을 마음대로 바꿀 수 없습니다.

→


(2) 스크롤바 제어하기


< FRAME src="파일명" scrolling="옵션값">

scrolling의 옵션값으로는 auto, yes, no가 있습니다.
  • auto ☞ 기본값으로 보여 줄지의 여부를 웹 브라우저가 결정하여 필요에 따라 보여줍니다.
  • yes ☞ 스크롤바가 처음부터 생성됩니다.
  • no ☞ 스크롤바가 생성되지 않습니다.

☆ 아래는 상, 중, 하 3개의 프레임으로 페이지를 나눕니다. 첫번째 부분은 스크롤이 no 두번째는 스크롤이 auto, 세번째는 스크롤이 yes로 설정되어 있습니다.

<html> <head> <title>프레임에서 스크롤바 제어하기</title> <frameset rows="*,*,*"> <frame src="상단.html" scrolling="no"> <frame src="중간.html" scrolling="auto"> <frame src="하단.html" scrolling="yes"> </frameset> </head> </html


(3) 프레임의 여백조절


< FRAME src="파일명" marginwidth="값", marginheight="값">

marginwidth, marginheight는 각각의 프레임 문서에서 여백을 만들 것인가, 만들지 않을 것인가를 결정하는 것입니다.
  • marginwidth ☞ 프레임의 왼쪽 여백을 조절합니다.
  • marginheight ☞ 프레임의 상단 여백을 조절합니다.
  • marginwidth, marginheight는 이미지 삽입에서 설명한 것과 사용방법이 동일합니다.
  • 여백값을 0으로 적용한 경우는 이미지가 프레임 끝선이 붙어 나온 것을 볼 수 있으며, 여백 값을 0으로 적용하지 않은 경우는 약간의 공백이 생긴 것을 볼 수 있습니다.
  • 이처럼 이미지를 사용하여 상단과 왼편에 메뉴를 넣을 경우, 정확한 수치를 적용하기 어려우므로 항상 여백 값을 0으로 만드는것이 좋습니다.

여백값을 "0"으로 적용여백값을 "0"으로 적용하지 않은 경우


(4) 프레임 경계선 없애기


< FRAME src="파일명" frameborder="no" border="0" framespacing="0">

  • frameborder는 프레임과 프레임 간의 경계선 부분을 표시하느냐, 표시하지 않느냐를 결정하는 속성입니다. 즉, 테두리선을 보여줄 것인가 보여주지 않을 것인가를 결정합니다.
  • frameborder란 육안으로 드러나는 경계선 즉, 프레임 사이에 도톰한 테두리를 말합니다. 기본값은 1로 육안상 라인이 표시되게 하고, 속성값으로 0을 주면 테두리는 사라집니다.
  • frameborder=0 이 경계선을 없애주는 기능을 할 뿐 프레임과 프레임을 붙여주는 기능은 하지 않습니다.
  • border=0은 "프레임과 프레임의 간격을 없애주는 기능"을 합니다.
  • 항상 프레임과 프레임을 붙여주려고 한다면 border=0을 적용해야 합니다.
  • frameborder="0" = frameborder="no" 와 같습니다.
  • frameborder="1" = frameborder="yes" 와 같습니다.

FRAMEBORDER=NO, BORDER=0FRAMEBORDER=NO, BORDER=1