14. 1 프레임 문서 만들기

프레임이란 ?

프레임(frame)의 사전적 의미는 틀, 구조, 뼈대입니다. 다시 말해 프레임은 어떤 대상의 영역 구분을 뜻합니다.

인터넷 홈페이지에서 말하는 프레임(frame)이란 웹 브라우저의 창을 수직이나 수평 방향으로 나눌 때 그 각각의 창을 의미합니다. 좀 더 확대하여 말하면 화면 영역을 몇 개의 창으로 나눠 사용하는 홈페이지 제작기법입니다. 프레임은 내부에 하나의 HTML 문서를 갖고 있으면서 이웃해 있는 다른 프레임과 함께 하나의 화면을 구성합니다. 따라서 각각의 프레임은 하나하나가 독립적인 웹 문서가 됩니다.

왜 프레임인가?

홈페이지를 만들 때 프레임을 이용하면, 문서에 공통적으로 들어가야 하는 부분을 일일이 반복해서 만들어야 하는 수고를 줄일 수 있습니다. 따라서 복잡한 구조나 내용이 많은 홈페이지에서 많이 이용합니다.

프레임 문서 만들기

1. 새 프레임셋 만들기

새 프레임셋 만들기는 프레임셋과 개별 프레임을 포함하는 프레임 문서 전체를 만드는 것입니다. 새 프레임셋을 만들기 위해서는 사용자가 직접 프레임을 나눠 새 프레임셋을 만들거나 리소스 관리자 - 문서 탭의 프레임셋을 이용합니다.

가. 메뉴에서 [프레임 > 새 프레임셋]  또는 [파일 > 새 글]을 선택합니다.

나. 리소스 관리자 대화 상자 왼쪽 리소스 구성보기에서 프레임셋을 선택합니다.

다. 오른쪽 미리보기에서 원하는 프레임셋을 선택하고 확인 단추를 누릅니다. 선택한 프레임셋에 대한 설명이 대화 상자 아래 설명에 나타납니다.

라. 편집 창에 선택한 프레임셋이 나타납니다.

2. 프레임 나누기

편집 창에 열려 있는 문서에 프레임을 추가하거나, 프레임셋 문서에서 프레임을 나눌 수 있습니다. 리소스 관리자 - 문서 탭의 프레임셋에서 만든 프레임셋 문서에는 프레임 이름과 대상 프레임이 자동으로 설정됩니다. 그러나 프레임 나누기로 프레임을 나눈 경우에는 프레임 속성 대화 상자에서 프레임 이름을 정해 주어야 기본 대상 프레임 목록에 이름이 등록됩니다. 프레임 나누기 작업은 돌이킴(Ctrl+Z)으로 취소할 수 없습니다.

가. 메뉴에서 [프레임 > 프레임 나누기]를 선택합니다.

나. 새 프레임을 추가할 방향으로 프레임을 나눕니다.

a. [왼쪽] 으로 프레임을 나누면 작업 중인 프레임은 오른쪽에, 새 프레임은 왼쪽에 추가됩니다.

b. [오른쪽] 으로 프레임을 나누면 작업 중인 프레임은 왼쪽에, 새 프레임은 오른쪽에 추가됩니다.

c. [위쪽] 으로 프레임을 나누면 작업 중인 프레임은 아래쪽에, 새 프레임은 위쪽에 추가됩니다.

d. [아래쪽] 으로 프레임을 나누면 작업 중인 프레임은 위쪽에, 새 프레임은 아래쪽에 추가됩니다.

프레임 속성 살펴보기

1. 프레임 이름

프레임 이름은 여러 프레임 중에서 각 프레임을 구별하기 위해 부여한 고유값입니다. 이에 반해 문서의 파일 이름은 프레임에서 열릴 문서의 이름입니다.

그림에서 banner, contents, detail은 A,B,C 각 프레임의 이름이며, a.html, b.html, c.html은 A,B,C 각 프레임에 열려 있는 문서 이름입니다. 프레임 이름은 프레임 사이에 하이퍼링크를 지정할 때 이용합니다.

2. 대상 프레임

대상 프레임은 하이퍼링크에 연결된 문서를 보여줄 프레임을 의미합니다. 사용자가 입력한 프레임 이름이나 기본 프레임으로 대상 프레임을 지정할 수 있습니다. 기본 프레임으로는 _blank, _parent, _self, _top이 있습니다.

_blank : 링크된 내용을 새로운 창으로 보여줍니다.

_parent : 링크된 내용을 현재 프레임을 포함하는 프레임셋 전체에 보여줍니다.

_self : 링크된 내용을 현재 프레임에 보여줍니다.

_top : 링크된 내용을 프레임을 모두 없애고 웹 브라우저의 화면 전체에 보여줍니다

B 프레임에서 하이퍼링크한 문서를 모두 C 프레임에서 열고자 할 때, B 프레임의 대상 프레임은 C 프레임입니다. B 프레임의 대상 프레임을 지정하려면, B의 프레임 속성 대화 상자를 열어 기본 대상 프레임 목록에서 C 프레임 이름인 'detail'을 지정하여 줍니다.

3. 프레임 크기와 여백

프레임 크기는 너비와 높이로 지정하며, 단위는 '픽셀' '%' '*(상대적)'이 있습니다. 프레임 여백은 왼쪽 여백과 위쪽 여백으로 지정하며, 단위는 '픽셀'입니다.

가. 픽셀

프레임 크기를 픽셀 단위로 고정합니다. 웹 브라우저에 따라 차이가 있으나 모든 프레임이 픽셀로 설정되어 있고 브라우저의 크기가 각 프레임 크기의 합과 다를 때 사용자가 의도했던 모양과 달라질 수 있습니다. 적어도 하나의 프레임은 '*(상대적)'으로 지정하는 것이 좋습니다.

나. %

현재 창의 크기를 100으로 가정하고 해당 프레임의 크기를 %로 지정합니다.

모든 프레임 크기의 합이 100%를 넘을 경우에는 모든 프레임이 같은 비율로 크기가 줄어듭니다. 또 프레임의 크기의 합이 100%가 안 될 때는 '*(상대적)' 속성이 있는 프레임이 나머지 공간을 차지하며 '*(상대적)' 속성이 있는 프레임이 없다면 모든 프레임이 같은 비율로 크기가 늘어납니다.

다. *(상대적)

다른 프레임이 차지하고 남은 공간을 지정하거나 상대적인 크기를 지정합니다. 두 개의 프레임이 있을 때 각 프레임의 크기를 '1'과 '2'로 지정한다면 프레임셋의 크기를 3으로 보고 각 프레임은 1대 2의 비율로 공간을 차지합니다.

'픽셀'은 cm, mm 등과 같이 길이를 재는 단위로 고정된 값입니다. 이에 비해 '%'는 전체 창의 크기에서 몇%를 차지하는지 보여주는 단위로 그 크기가 고정돼 있지 않고, 브라우저의 크기에 따라 달라집니다. '*(상대적)'은 전체 창 크기에서 인접 프레임의 너비와 높이를 뺀 나머지 프레임 크기입니다.

4. 스크롤 막대 보이기와 감추기

스크롤 막대(scroll bar)는 일반적으로 문서가 창 크기보다 클 때 나타납니다. 프레임 속성 대화 상자에서 문서의 크기와 관계없이 스크롤 막대가 보이거나 보이지 않거나 또는 창 크기에 따라 자동으로 나타나도록 지정할 수 있습니다.

5. 프레임 경계선 두께

웹 브라우저에서 보이는 프레임의 경계선 두께를 조절합니다. 프레임 경계선이 보이지 않거나, 뚜렷하게 보입니다.

두께를 '0'으로 지정하면 웹 브라우저에서 프레임의 경계가 보이지 않습니다. 특히 인터넷 익스플로러에서는 두께를 '4' 이하로 주면 경계선이 보이지 않게 됩니다.

프레임 문서 저장하기

프레임으로 만든 문서를 저장할 때는 개별 프레임 문서와 프레임셋도 함께 저장해야 합니다. 프레임 문서와 프레임셋 전체를 저장하려면 모든 프레임 저장하기를, 프레임셋을 저장하려면 프레임셋 저장하기를, 프레임셋을 다른 이름으로 저장하려면 다른 프레임셋으로 저장하기를 선택합니다. 프레임 내용을 수정한 뒤에는 수정한 프레임을 따로 저장하거나 모든 프레임 저장하기를 선택해야 합니다. 프레임 문서를 따로 저장하지 않고 프레임셋만 저장한 뒤 문서를 닫으면 수정된 프레임 문서를 저장할 것인지 묻는 대화 상자가 나타납니다.

1. 모든 프레임 저장하기

가. 현재 편집 창에 열려 있는 프레임셋과 개별 프레임 문서를 동시에 저장하려면 메뉴의 [프레임 > 모든 프레임 저장하기]를 선택합니다.

나. 프레임이나 프레임셋을 한 번도 저장하지 않았다면 다른 이름으로 저장 대화 상자가 차례로 나타납니다.

다. 파일 이름을 지정해주고 저장 단추를 누릅니다.

2. 프레임셋 저장하기

가. 메뉴의 [프레임 > 프레임셋 저장하기]를 선택합니다.

나. 프레임셋을 한번도 저장하지 않았다면 다른 이름으로 저장 대화 상자가 나타납니다. 이미 저장했던 프레임셋을 수정했다면 수정한 내용이 프레임셋에 자동 저장됩니다.

다. 파일 이름을 지정하고 저장 단추를 누릅니다.

프레임셋 문서는 개별 프레임의 이름, 크기, 속성 등에 관한 정보만을 갖고 있습니다. 따라서 프레임 내용을 변경했을 경우 해당 프레임을 따로 저장해야 합니다.

3. 다른 프레임셋으로 저장하기

가. 현재 프레임셋을 다른 이름으로 저장하려면 메뉴의 [프레임 > 다른 프레임셋으로 저장하기]를 선택합니다.

나. 다른 이름으로 저장 대화 상자가 나타나면 파일 이름을 지정해주고 저장 단추를 누릅니다.

(프레임셋(frame1.html)을 다른 프레임셋(frame2.html)으로 저장한 예)

다른 프레임셋으로 저장하기는 현재 프레임셋을 새로운 이름으로 저장하고, 기존의 프레임셋은 그대로 둡니다. 그림과 같이 서로 다른 이름의 프레임셋(frame1,frame2) 2개가 개별 프레임 문서(a.html, b.html, c.html)를 공유하게 됩니다.

개별 프레임 문서의 이름을 바꾸려면 [파일 > 다른 이름으로 저장] 을 선택합니다.

(예시)  index.htm

전통놀이 메뉴 페이지 left.htm (frame name = left) 넓이 : 150 픽셀	전통놀이 공지 페이지 right.htm (frame name = right)