[html] frameset, frame 태그, 사용해도 될까요?
요즘에는 html 문서에서 <frameset> <frame> <noframes> 태그를 보기가 드물지요.
위 요소들은 html5에서 지원하지 않는 퇴화 태그입니다.
하지만 한 번쯤 다루고 넘어가야 할 것 같아 정리해 보았습니다.
▶사용 예
<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)
<framset>요소는 하나 이상의 <frame>요소를 포함하고요.
각 <frame>요소에 각기 다른 문서를 넣을 수 있어요.
▶함께 사용하는 속성 값
cols : pixels , % ,*
화면을 가로로 분할할 때 프레임의 수와 크기를 지정.
픽셀과 백분율로 지정 가능하고 * 표시는 나머지 공간이 자동 지정 됨.
rows : pixels, %, *
화면을 세로로 분할 할 때 프레임의 수와 크기를 지정
*html5에서 지원하지 않음*
▶사용 예
<frameset cols="20%,80%">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
<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>
프레임을 지원하지 않는 브라우저를 위해 이 태그를 사용합니다.
<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를 사용해 스크롤바가 생기게 하는 방법이 있어요
oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)
'html' 카테고리의 다른 글
| [html5] video 태그 사용법 (0) | 2014.08.07 |
|---|---|
| 브라우저 점유율 (IE, 크롬 점유율 비교) (2) | 2014.07.29 |
| [html5] audio 태그로 음악 파일 삽입하기 (3) | 2014.07.18 |
| [html] param 태그 (object 매개변수 지정) (0) | 2014.07.17 |
| [html5] embed 태그 (0) | 2014.07.16 |
댓글