FRAME (1)


FRAME 이란?

FRAME 의 레이아웃

FRAMESET의 구조



1. FRAME 이란?



  1. 프레임(Frame)이란?
    • 웹페이지를 여러 개의 스크롤이 가능한 분할된 영역으로 나눈 것을 프레임이라고 합니다.
    • 분할된 각각의 프레임은 마치 독립된 윈도우처럼 다른 정보들로 구성됩니다.즉, 하나의 화면이 여러 개의 HTML문서로 구성되어 있음을 의미합니다.
    • 각 프레임은 어떤 결과를 다른 프레임에 출력할 수도 있습니다.
    • 동적으로 프레임 창의 크기를 조절하는 것이 가능합니다.
    • 분할된 각각의 페이지를 컨트롤할 HTML페이지를 "프레임 셋"이라고 합니다.

  2. 프레임을 적용하는 경우
    • 고정적으로 변하지 않고 한자리에 있어야 되는 툴 바와 같은 경우입니다.
    • 목차가 필요하고, 클릭하면 연결된 프레임에 결과가 출력되게 할때 적용.
    • 한 프레임에서 질문을 받으면 다른 프레임에 결과가 출력되게 하는 경우에도 frame을 사용합니다.

  3. 프레임 문서(Frame Document)의 구성
    • 프레임 문서는 기본적인 HTML문서와는 조금 다른 형태입니다.
    • 프레임 문서는 ( body ) .... ( /body )를 가지지 않습니다.
    • 프레임 문서는 ( body ) .... ( /body )대신 ( frameset ) ....( /frameset )을 사용합니다.
    • (frameset) 태그 이전에 ( body )가 나오면 ( frameset )이 무시됩니다.


    기본적인 Html문서의 구성
    <html> <head><title> title </title></head> <body> ....문서의 본문....</body> </html>
    프레임 문서의 구성
    <html> <head> <title> title </title> </head> <frameset> 프레임으로 나누는 태그들</frameset> </html>

  4. 프레임(Frame)의 장점
    • 관리의 편리성 : 프레임을 적용하면 사이트를 제작하거나 수정할 때 시간 단축 및 작업의 양을 최소화할 수 있습니다.
    • 이동의 일관성 : 원하는 페이지의 화면만을 이동시킬 수 있으므로 방문객이 사이트 내에서 항상 일관되게 머무르게 할 수 있습니다.

  5. 프레임(Frame)의 단점
    • 배치의 문제점 : 프레임을 잘못 배치하면 사용자의 이동, 즉 네비게이션을 혼란스럽게 만들 수가 있습니다.
    • 검색엔진 등록의 문제점 : 검색엔진의 스파이더에 혼란을 야기하여 자신의 홈페이지에 대한 검색엔진 링크에 오류가 발생할 수 있습니다. 하지만 (NOFRAMES) 태그를 이용하여 이 문제를 해결할 수 있습니다.



2. FRAME 의 레이아웃



프레임 셋 문서(아래)는 전체 3페이지로 구성됩니다.

1. 분할될 프레임들의 정보를 담아놓는 메인 HTML 문서(프레임 셋 문서)
2. 왼쪽 정보만을 담아 놓는 HTML문서
3. 오른쪽의 정보만을 담아놓는 HTML문서

NAME : LEFT

→ HTML문서
NAME :RIGHT








→ HTML문서
메뉴

메뉴 1

메뉴 2

메뉴 3

메뉴 4
메뉴

메뉴 1

메뉴 2

메뉴 3

메뉴 4




↓
-------
-------
right01.html
-------
-------
 ↓
-------
-------
right02.html
-------
-------
 ↓
-------
-------
right03.html
-------
-------
 ↓
-------
-------
right04.html
-------
-------
※ 프레임을 활용하여 오른쪽 페이지가 right01, right02, right03, right04로 유동적으로 변경됨을 표현한 것입니다.

프레임(Frame)을 활용한 레이아웃


다음은 프레임을 이용한 사이트(기상청)입니다.
프레임의 목적에 맞게 제작되어 있으며 상단메뉴와 메인화면으로 나뉘어져 있습니다. 상단메뉴는 항상 그대로 있으면서 하단 메인 화면은 메뉴에 따라 항상 유기적으로 변하는 형식으로 구성되어 있습니다. 메뉴를 한 개씩 눌러 보세요.


3. FRAMESET의 구조



  1. 지금까지 학습한 HTML 문서의 모든 내용은 < BODY >...< /BODY >내부에 삽입되었지만 FRAMESET의 모든 내용은 < frameset > 과 < /frameset >안에 프레임으로 나누는 태그들이 들어가게 됩니다.
  2. FRAMESET 문서는 각각의 페이지를 컨트롤 할 수 있는 기본적인 정보만을 담고 있으며 기존의 HTML문서와는 달리 이미지와 텍스트 정보는 가지고 있지 않습니다.
  3. 만약 세로 분할을 2개로 나누었다면 만들어야 할 HTML문서는 좌측과 우측 그리고, 좌측과 우측의 페이지 정보를 담아두는 프레임 셋 문서, 이렇게 3개의 문서가 필요합니다.
  4. FRAMESET 문서의 기본구조는 아래와 같습니다.


    <HTML> <HEAD> <TITLE>프레임셋의 기본구조</TITLE> </HEAD> <FRAMESET option=option값> <FRAME> </FRAMESET> </HTML>



프레임(Frame)의 주요속성

BORDER < FRAME BORDER="두께" >
프레임 경계선의 두께를 설정합니다.
FRAMEBORDER < FRAME FRAMEBORDER ="YES, NO" >
프레임의 경계선을 보여줄지를 설정합니다. 속성값을 YES로 하면 경계선이 보이고, NO나 0을 하면 보이지 않습니다.
BORDERCOLOR < FRAME BORDERCOLOR="16진수, 색이름" >
프레임 경계선의 색을 설정합니다.
MARGINHEIGHT < FRAME MARGINHEIGHT="상하 여백" >
프레임의 위아래 여백을 설정합니다.
MARGINWIDTH < FRAME MARGINWIDTH="좌우 여백" >
프레임의 좌우 여백을 설정합니다.
NAME < FRAME NAME="이름" >
FRAME 각각의 고유한 이름을 부여합니다. 스크립트나 프로그램에서 각 프레임을 호출할 때 사용합니다.
NORESIZE < FRAME NORESIZE >
프레임의 크기를 변경하지 못하게 설정합니다. 속성값은 없습니다.
SCROLLING < FRAME SCROLLING="YES, NO, AUTO" >
스크롤바를 사용할 것인지를 설정합니다. YES로 설정하면 페이지가 프레임 크기를 벗어나도 기본적으로 스크롤바가 생성되고, NO는 생성되지 않습니다. AUTO로 설정하면 페이지가 프레임을 벗어날 때만 생성됩니다.
SRC < FRAME SRC="파일경로" >
각 프레임에 출력될 파일 경로를 입력합니다.