FRAME (3)


1. FRAMESET 만들기


  • FRAMESET을 만들어 보겠습니다. 아래의 예를 기본으로 이렇게 저렇게 응용하시면 되겠습니다.
  • 브라우저를 세로로 구분하려면 cols, 가로로 구분하려면 rows를 사용하시구요.
  • 여러 개의 화면으로 쪼개시려면 cols or rows="*,*, ... ,*"와 같이 컴머를 여러 개 사용하시면 되겠죠?
  • 화면을 쪼갠 숫자만큼 html 파일이 필요합니다.
  • 이제 이곳에 frameborder, border, noresize, scrolling 등 옵션 값을 원하는대로 넣어 주시면 된답니다.

↓


2. IFRAME



< IFRAME >....< /IFRAME >

  1. 아이프레임(IFRAME)은 Internal FRAME의 약자로서 HTML 문서 안에 제작자가 원하는 위치에 프레임을 만들 수 있습니다. iframe 은 Explorer에서 확장되어 만들어진 기능으로 Explorer에서만 지원하는 태그입니다.
  2. IFRAME을 한마디로 표현하자면, 일반 프레임의 경우 웹 페이지를 통째로 분할한 것에 비하여 IFRAME은 웹 페이지 내부에 일정한 영역을 만들고 그 안에 다른 웹 페이지를 넣은 것입니다.
  3. iframe은 < iframe >로 시작해서 < /iframe >로 끝납니다. 단, 다른 태그와 다른 점이 있다면 시작태그와 닫는태그 사이에 내용을 넣어줄 필요가 없다는 것이죠^^* (내용이 들어있는 다른 웹페이지를 고대로 불러오는 것이니까~!!)
  4. < IFRAME >은 일반 프레임과는 달리 반드시 < body >와 < body >사이에 삽입되어야 합니다.


< iframe src="http://www.blooberry.com/indexdot/html/tagpages/i/iframe.htm" width="700" height="400" frameborder="0" marginwidth="0" marginheight="0" topmargin="0" scrolling="auto" >< /iframe >

※ 위의 IFRAME 태그가 실행되어진 것입니다. 이렇게 웹페이지를 그대로 가져올 수 있습니다.
IFRAME의 속성
src 이곳에 iframe에서 불러올 문서의 위치와 문서의 이름을 지정합니다.
width - iframe의 폭을 지정합니다. n은 픽셀 단위입니다.
height iframe의 높이를 지정합니다.
frameborder iframe의 경계선을 나타나게 할 것인지를 결정합니다. yes로 하면 프레임 경계가 나타나고 no로 하면 프레임 경계가 나타나지 않습니다.
marginwidth 좌우 여백을 지정합니다.
marginheight 상하 여백을 지정합니다.
topmargin 상단의 공백을 지정합니다.
scrolling "yes"로 하면 스크롤 바가 항상 나타나고 "no"로 하면 내용이 잘리더라도 스크롤 바가 나타나지 않습니다. 물론 auto는 iframe의 크기보다 불러온 문서의 내용이 많으면 저절로 생기게 되겠죠.
name iframe의 이름을 지정합니다. name을 이용하면 iframe을 포함하고 있는 문서에서 하이퍼링크를 클릭하면 iframe에 내용이 나타나도록 target을 지정할 수 있습니다.


3. FRAME에 링크설정하기 (target)



< IFRAME name="프레임 이름">
< A href="URL/파일명" target="프레임 이름" >...< /A >

프레임에 link 를 설정할 때 중요한 속성 2개가 사용되는데 그 속성은 target과 name입니다.
  1. name
    우리가 만들어 내는 각각의 프레임에는 name이라는 속성을 프레임마다 이름을 부여할 수 있습니다. 이 name은 파일명과는 전혀 상관이 없으며, 사용자가 원하는 대로 임의로 설정해주면 됩니다.
  2. target
    target은 연결태그 (A)와 함께 사용되며 target의 속성값에 따라 다른 결과들을 가져올 수 있습니다.

    target="프레임 name명" 지정된 프레임 name값에 결과화면 보여주기
    target="_blank" 링크되는 html문서들을 모두 새 창으로 보여줍니다.
    target="_top" 모든 프레임 화면을 무시하고 새로운 html문서를 불러 옵니다.
    target="_parent" 가장 혼돈을 많이 하는 속성입니다. 쉽게 설명해서, 프레임의 상위 프레임 셋에 페이지를 불러옵니다.

name과 target의 작용원리

NAME : MENU

 NAME :MAIN




왼편의 name명을 "MENU", 오른편 name명을 "MAIN"으로 설정합니다.
frameset문서에서 왼쪽 메뉴를 클릭했을 때, target="MAIN"을 적어주면, 오른편 페이지에 링크된 파일이 나타나게 됩니다.

또한 오른편에 링크가 걸린 곳에 target명을 왼편의 name인 target="MENU"라고 설정을 하게 되면 오른쪽의 링크 부분을 클릭했을 때 왼쪽 frame에 결과화면이 나타나게 됩니다.
메뉴

메뉴 1

메뉴 2

메뉴 3

메뉴 4


< a href="http://www.truesea.net/" target="frame명">truesea< /a >

< a href=" http://daum.net/" target="_top">daum< /a >

< a href=http://www.truesea.net/2000> target="_blank"2000원으로 아침상차리기< /a >

truesea(target="frame명")

daum(target="_top")

2000원으로 아침상차리기(target="_blank")

한번씩 눌러 보셨나요? 첫번째의 경우(truesky)는 frame구조가 아니라서..프레임 명을 찾지 못하게 될겁니다. 이렇게 프레임 명을 찾지 못하게 된다면 새 창을 띄우게 됩니다. 에러나 경고박스가 뜨는 일이 없으므로 프레임명을 정확하게 입력해야 합니다.