Frame

여러 문서를 하나의 화면안에서 표현할 떄 사용한다.

인터넷 익스플로러에서 프레임 안에 표준 DTD 문서를 사용할 때 생기는 스크롤바 제거

인터넷 익스플로러에서 표준 DTD를 사용한 문서를 프레인 안에서 사용할 경우 의도 하지 않게 가로 스크롤이 생기고, absolute position으로 위치된 엘리먼트 들이 스크롤 바 위로 올라오는 등의 버그를 볼 수 있다. Quirks mode에서는 발생하지 않는 현상으로 볼 때, 캔버스가 <body>에서 <html>로 옮겨 가는 것에 따른 버그로 추측 된다. 아래와 같이 <html>의 overflow 속성을 조정하여 해결 할 수 있다. (thanks to 김병진)

<!--[if ie]>
<style type="text/css">
html {
	overflow: scroll;
	overflow-x: auto;
}
</style>
<![endif]-->

인터넷 익스플로러에서만 인식이 될 수 있도록 조건부 주석(conditional comment)을 사용하는 것이 좋다.

프레임과 논프레임 방식의 비교

개발 방식의 변화

웹서버로만 서비스를 제공할 경우(서버쪽 스크립트를 사용하지 않을 경우) 사이트의 유지 관리 차원에서 중복 코드를 피하고 단일화된 사이트 아이덴티티를 유지하기 위해서 페이지 레이아웃을 별도의 프레임으로 구분하여 사용하였다. 하지만 근래에는 거의 모든 웹사이트가 서버측 스크립트 언어(php, asp 등)나 컴파일 언어(jsp, asp.net 등)를 사용할 수 있기 때문에 과거와 같이 프레임을 반드시 사용할 필요가 없어지게 되었다.

W3C의 HTML문서 표준의 변화

이와 같은 마크업 문서의 변화는 W3C의 문서 표준의 변화에서 확인 할 수 있다. HTML 4.01과 XHTML 1.0에는 Frameset DTD가 있으나 차세대 웹문서인 XHTML 1.1에서는 프레임에 관한 선언이 사라졌다. 앞으로의 웹문서는 과거와 같이 프레임방식이 아닌 단일화된 페이지로 변화될 것임을 보여준다. 그리고 이렇게 단일화된 페이지는 대부분의 브라우저에서 랜더링 하는데 큰 영향이 없기 때문에 접근성도 향상시키게 된다.

프레임 사용시 디자인의 제약

프레임을 사용하게 되면 화면들이 프레임 경계로 구분이 되기 때문에 디자인적인 제약 사항이 생기게 된다. 하나의 화면을 각기 다른 문서로 조합하기 때문에 디자인도 화면 분할을 따라서 분리되게 된다. 이는 웹사이트 아이덴티티를 화면의 구성과 조화에서 표출하고 있는 근래의 디자인 성향과 맞지 않게 된다.

기술적인 제한

프레임은 각기 다른 문서들로 구분이 되어 있기 때문에 프레임 경계에 따라서 화면이 분할이 된다. 이럴 경우 화면 분할을 넘어서 구현해야 되는 UI(ex:상단메뉴의 서브메뉴 등)는 원칙적으로 구현이 불가능 해지게 된다. 그리고 페이지의 현재위치 표시와 같은 기능들을 구현하기 위해서 복잡한 자바스크립트를 사용해야 하기 때문에 기능에 대한 사용자 접근성이나 개발 효율성이 떨어지게 된다.

프레임을 사용하면 좋은 경우

이러한 단점에도 불구하고 프레임을 사용해야 하는 경우는 페이지를 동적으로 생성해 주는 언어를 사용할 수 없는 환경이다. 예를 들어서 웹서버만 사용할 수 있는 경우라든가, CD-ROM 컨텐츠를 제작하는 환경과 같이 html문서와 브라우져만 사용할 수 있을 경우에는 프레임을 사용하면 중복코드를 피할 수 있기 때문에 관리적인 측면에서 장점이 많다.