iframe 사용
Html5 2011. 4. 5. 15:45<iframe src=" width=" height="" frameborder="0" marginwidth="0" marginheight="0" scrolling="">
이 중 frameborder, marginwidth, marginheight, scrolling 속성이 HTML5에서는 폐지되어 사용할 수 없게 되었습니다. 그렇다면 이 속성들을 대체할 수 있는 방법은 무엇인지 하나하나 살펴보도록 하겠습니다.
- marginwidth, marginheight : 아이프레임 내 불려지는 페이지의 <body> 태그에 margin:0를 주면 해결됩니다.
- scrolling : 아이프레임 내 불려지는 페이지의 <body> 영역이 아이프레임의 크기를 넘지 않거나, <body>에 overflow:hidden을 주면 해결됩니다.
- frameborder : IE를 제외한 나머지 브라우저에서 border:none을 주면 해결됩니다.
역시 IE가 문제인지도 모르겠습니다. IE8에서는 border:none을 주더라도 아래 그림과 같이 못생긴 테두리가 표시됩니다. 이 테두리를 없앨 수 있는 방법은 오로지 frameborder="0"를 선언하는 것 말고는 없습니다.
(더 신기한 것은 IE6,7은 frameborder가 선언되어 있지 않으면 테두리 자체를 표현하지 않습니다.)
이렇게 스타일으로 해결할 수 없는 속성들은 사실 HTML5에서 새롭게 생겨난 아이프레임의 속성 "seamless"로 해결할 수가 있습니다. 이 속성은 아이프레임이 일반 콘텐츠처럼 표시되게 하여 스크롤이나 테두리를 발생시키지 않습니다. 지금으로서는 이 속성을 지원하는 브라우저가 없으니, 아이프레임을 사용할 때는 HTML5 스펙에 어긋나지만 frameborder 속성을 사용해주는 수 밖에 없을 듯 합니다.
출처 : NHN NULI
http://html.nhndesign.com/blog/22882
'Html5' 카테고리의 다른 글
| html4 와 html5의 차이점 (0) | 2012.11.09 |
|---|---|
| html5 검사시 summary 오류 (0) | 2012.10.08 |
| HTML5의 새로운 태그를 IE에서도 사용하는 방법 (0) | 2011.03.30 |
| html5 브라우저 호환 준비하기 (0) | 2011.03.30 |
| HTML5 문서의 구조 (0) | 2011.03.30 |