프레임 태그와 테이블 태그

 

1. frame태그의 개념

 

- 웹브라우저의 화면을 2개 이상의 영역으로 구분한 다음, 각각의 영역에 html문서를 삽입한 뒤 하나의 프레임셋(frameset)으로 만든 문서를 프레임페이지 라고 합니다. 보통은 모바일 페이지보단 PC화면용 제작 페이지에서 많이 보이는 구조입니다.

일반적인 경우 아래의 그림과 같이 수직으로 좌우측 분할을 하든가 아니면 상하로 분할하는 형식을 취하는 게 보통입니다. 2개 좌우 또는 상하로 분할된 경우 두개의 각각의 페이지는 외관상 한개의 페이지처럼 통합되어 한화면에 보여지게 되는데 두개의 프레임페이지와 한개의 통합페이지 총 3개의 HTML 문서가 필요하게 됩니다.

 

 

 

- 프레임관련 태그로는 <frameset> <frame> <noframes> 이 있습니다. 단 html5에서는 세가지의 태그를 지원하지 않아 퇴화될 태그명령어로 볼 수 있으나 html문서의 기본구조를 이해하는데 도움이 되므로 간략히 살펴보기로 하겠습니다.

참고로 프레임은 html5에서 퇴화하는 태그이므로, 굳이 프레임을 사용하려면 html4.01 또는 xhtml 문서로 작성해야 합니다. 즉 DOCTYPE 선언 시 HTML 4.01 Frameset DTD 혹은  XHTML 1.0 Frameset 로  설정해야 문제가 발생하지 않습니다. html5에서는 iframe 태그나 Div, Overflow 태그를 이용하여 프레임개념을 대체하고 있습니다.

 

2. frame태그의 기본속성

 

- FRAMESET 속성 : 프레임을 어떻게 나눌지를 지정하는 태그입니다.

cols : 수직으로 나누고자하는 프레임크기를 픽셀이나 비율을 이용해서 순서대로 지정함(크기, 비율, *), *는 지정한 크기를 제외한 나머지 크기
rows : 수평으로 나누고자하는 프레임크기를 픽셀이나 비율을 이용해서 순서대로 지정함(크기, 비율, *), *는 지정한 크기를 제외한 나머지 크기
frameborder : 프레임을 나눈 경계선의 두께를 지정하는데 "0"으로 설정하면 경제선이 보이지 않음

 

- FRAME 속성 : <frameset>태그가 프레임을 선언해주는 태그라면, <frame>태그는 각각의 프레임을 설정하는 태그입니다.

src : 해당프레임에서 보여줄 문서의 경로와 파일이름을 지정함, 프레임을 구성하는 문서와 같은 위치에 있고 파일이름만 위치가 다르면 경로를 적어서 위치를 지정해 주어야 합니다.
name : 해당프레임의 이름을 지정할 때 사용하는데, 주로 링크시킬때 target의 대상으로 사용합니다.
scrolling : 프레임에 스크롤바가 나타나게 할것인지 지정, yes는 스크롤바를 항상만듬 no는 만들지 않음, auto로 설정하면 프레임안의 내용이 한화면을 넘어갈때만 자동으로 나타나게 됩니다.

marginwidth : 프레임안의 좌우여백을 지정할때 사용합니다.
marginheight : 프레임안의 상하여백을 지정할때 사용합니다.
noresize : 프레임과 프레임의 경계선은 마우스로 크기를 조절할수 있게 되어 있는데 이를 고정하여 방문자들이 임의로 조절할 수 없게 프레임크기를 잠그는 옵션입니다.

 

3. frame태그 예제

 

- cols

 

cols 속성값은 frame 개체의 너비를 지정합니다. cols="100,*" 으로 지정하면 프레임을 좌우로 나눈 다음 왼쪽 프레임의 크기를 100픽셀로, 오른쪽 프레임은 나머지 크기를 차지하도록 설정한다는 의미입니다.

 

<frameset cols="100,*">
    <frame src="사이드바.html">
    <frame src="내용.html">
</frameset>

 

- rows

 

rows 속성값은 frame 개체의 높이를 지정합니다. rows="100,*" 으로 지정하면 프레임을 상화로 나눈 다음 상단 프레임의 크기를 100픽셀로, 하단 프레임은 나머지 크기를 차지하도록 설정한다는 의미입니다.

 

<frameset rows="100,*">
    <frame src="상단바.html">
    <frame src="내용.html">
</frameset>

 

- 3분할

 

프레임 태그를 중첩시키면 2개 이상의 프레임으로도 나눌 수 있습니다.

 

<frameset rows="100,*">
    <frame src="상단바.html">
    <frameset cols="100,*">
        <frame src="사이드바.html">
        <frame src="내용.html">
    </frameset>
</frameset>

 

상단바.html, 사이드바.html, 내용.html 3개의 파일과 통합페이지1개 총 4개의 페이지가 필요한 경우입니다.