3-12. 아이프레임(<iframe>)의 다양한 속성 알아보기

1. 문서 내에 다른 문서를 불러들이는 방법으로 <iframe>요소를 사용할 수 있습니다. HTML5에서는 <frameset>요소를 폐지하였스나 <iframe>은 그 쓰임새가 다양해 그대로 유지하고 있습니다. 그러나 <iframe>은 그 쓰임새가 다양해 그대로 유지하고 있습니다. 그러나 <iframe>은 보안에서 많은 문제를 가지고 있는데, HTML5에서는 "sandbox"속성으로 <ifrmae>으로 연결된 문서 내의 스크립트가 실행되지 않도록 할 수 있습니다.

2. 아이프레임의 기초

<iframe>요소는 "width"속성과 "height"속성으로 크기를 지정해야 하고, 웹 접근성을 위해 "title"속성으로 연결된 문서를 설명해 줘야 합니다.

<iframe src="http://yuchae.tistory.com/" width="500" height="400" frameborder="0" title="네이버"></iframe>

3. HTML5에서 추가된 srcdoc와 sandbox 속성

3-1. 문서를 "src"로 연결하는 대신 "srcdoc"으로 그 내용을 직접 입력할 수도 있습니다. 이 기능은 현재 크롬 브라우저에서만 확인됩니다.

<iframe srcdoc="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>" width="500" height="400" frameborder="0"></iframe>

3-2. 연결된 문서의 스크립트와 폼의 기능을 차단하며 플러그인이 비활성화되도록 하는 속성이 "sandbox"속성입니다.

<iframe src="http://www.naver.com/" sandbox="" width="500" height="400" frameborder="0"></iframe>