본문 바로가기
html

[html] frameset, frame 태그, 사용해도 될까요?

by 지구별에 2014. 7. 21.

 

 

[html] frameset, frame 태그, 사용해도 될까요?

 

 

요즘에는 html 문서에서 <frameset> <frame> <noframes> 태그를 보기가 드물지요.

 

위 요소들은 html5에서 지원하지 않는 퇴화 태그입니다.

 

하지만 한 번쯤 다루고 넘어가야 할 것 같아 정리해 보았습니다.

 

 

▶사용 예

 

<frameset cols="20%,*,20%">
   <frame name="left" src="left.htm" />
   <frame name="center" src="center.htm" />
   <frame name="right" src="right.htm" />
   <noframes>
   <body>
이 브라우저는 프레임을 지원하지 않습니다
   </body>
   </noframes>

</frameset> 

 

 

<frameset> <frame> 태그는 브라우저 창을 여러 부분으로 나누어(화면 분할), 각 영역에 다른 html 문서를 삽입할 수 있습니다.

 

주로 한쪽에 메뉴 목록을 만들고 다른 한쪽은 메뉴를 클릭할 때 다른 문서를 보여주는 목적으로 사용되고요.

 

 

사용 방법은 <body> 태그 대신에 <frameset> 를 사용하는 것. 

 

 

하지만 프레임은 html5에서 퇴화(obsolete), 비추천 태그이므로, 굳이 프레임을 사용하려면

 

html4.01 또는 xhtml 문서로 작성해야 유효성 검사에서 통과할 수 있습니다. 

 

DOCTYPE 선언 시 HTML 4.01 Frameset DTD 혹은  XHTML 1.0 Frameset 로  설정해야 함.(아래 링크 참조)

 

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

 

<frameset> 태그

 

<framset>요소는 하나 이상의 <frame>요소를 포함하고요.

 

각 <frame>요소에 각기 다른 문서를 넣을 수 있어요.

 

 

 

▶함께 사용하는 속성 값

 

 

cols : pixels , % ,* 

          화면을 가로로 분할할 때 프레임의 수와 크기를 지정.
          픽셀과 백분율로 지정 가능하고 * 표시는 나머지 공간이 자동 지정 됨.

 

rows : pixels, %, * 

           화면을 세로로 분할 할 때 프레임의 수와 크기를 지정 

 

*html5에서 지원하지 않음* 

 

 

▶사용 예

 

<frameset cols="20%,80%">
  <frame src="left.htm">
  <frame src="right.htm">
  </frameset>

 

<frame> 태그

 

<frame>태그   <frameset>안에 창을 만듭니다.
 

<frame>은 끝 태그가 없으며,  xhtml에서는 <frame />



 

▶함께 사용하는 속성 값

 

frameborder : 0 ,1 

0은 테두리가 없으며, 1은 테두리가 생김


longdesc : url

프레임에 대해 설명하는 페이지로 연결


marginheight : pixels

상하 여백
marginwidth : pixels

좌우 여백


name : text

target으로 지정할 이름

 
scrolling : yes |no | auto

yes는 스크롤바가 생김, no는 없음, auto는 필요할 때 생김


src : url

연결할 문서의 주소

 *html5에서 지원하지 않음* 

 

 

▶사용 예

 

<frameset cols="20%,80%">
  <frame src="left.htm" frameborder="1">
  <frame src="content.htm" scrolling="yes" frameborder="1">
  </frameset>

 

 

 

<noframes>태그

 

 
프레임을 지원하지 않는 브라우저를 위해 이 태그를 사용합니다. 

 

<body>에서 쓰는 요소는 모두 이 안에 쓸 수 있습니다.  

 

<frameset>..... </frameset> 안에 위치합니다.

 

▶사용 예

 

<frameset cols="20%,*,20%">
  <frame src="left.htm">
  <frame src="center.htm">
  <frame src="right.htm">
<body>
  <noframes>이 브라우저는 frame을 지원하지 않습니다</noframes>
</body>
</frameset>

 

 

 

▶<frameset><frame>실행 화면입니다.

 

<frameset cols="20%,80%">적용 화면

 

 

 

 

 

 

<frameset rows="20%,80%">적용한 화면

 

 

 

 

 

프레임의 장점


frame은 주로, 한쪽에 네비게이션 역할을 하는 메뉴를 만들고 그 메뉴를 클릭했을 때

 

다른 한 쪽에 페이지가 바뀌게 설정하는 방식으로 많이 사용했었답니다.

 

코드를 많이 사용하지 않아도, 하위 웹페이지로  연결할 수 있는 장점이 있고, 

 

또 frame 사용시 웹페이지의 주소을 숨길 수도 있답니다.

 

 

프레임의 단점

 

하지만 frame으로 작성한 페이지는 검색엔진이나 스크린 리더에 읽히지 않고,

 

프레임 사용 시 서버 로드를 가중시킵니다. n+1 html 페이지.(n은 프레임 개수)

 

화면 크기가 작을 경우, 프레임을 사용하지 못할 수 있음.

 

뒤로 가기 버튼을 눌렀을 때 페이지가 원치 않게 표시될 수 있음

 

프레임은 되도록 사용을 권하지 않는 비추천 태그입니다.

 

 


프레임의 대안

 

html5에서 유일하게 가능한 프레임은 <iframe>입니다.  

 

또 div는 만들어 좌 우로 배치하고, 한쪽에 overflow를 사용해 스크롤바가 생기게 하는 방법이 있어요

 

 

 

  

 

DIV 태그를 이용하여 레이아웃 만들기

 

oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)

 

[html] iframe 태그 사용법

반응형

댓글1