HTML의 요소 중 <iframe>, 즉 inline frame은 다른 html 문서를(즉 다른 웹사이트를) 현재 html에서 볼 수 있게 하는 “액자”를 만든다.
기본 형식 :
src 속성으로 프레임에서 보여줄 html 파일을 명시하고, title 속성은 프레임의 제목 역할을 하여 스크린리더(Screen reader; 웹사이트 음성 지원)가 이를 읽을 수 있게 한다.
ex.`<iframe src="url" title="description"></iframe>`스타일 관련 설정들 :
- 크기 : 프레임의 크기는 style 속성에서 css의 width와 height 속성으로 설정하거나, 따로 html의 width와 height 속성으로 설정해줄 수 있다.
- 윤곽선 : 기본적으로
iframe요소는 옅은 윤곽선이 있다. 이를 지우거나 수정하기 위해서는 style 속성에서 css로border속성을 작성해주면 된다.
ex.style=”border:none;”혹은style=”border:5px solid Green;”
-
링크 요소
<a>의target속성을 통해, 링크 요소를 누를 시 링크가iframe요소 안에서 열리도록 할 수 있다.ex.
<!DOCTYPE html> <html> <body> <h1> ⬇️ iframe </h1> <iframe src="backgroundimg.htm" name="iframe_ex" title="iframe example"></iframe> <p><a href="blockinline.htm" target="iframe_ex">Show block inline example</a></p> <p><a href="backgroundimg.htm" target="iframe_ex">Show background image example</a></p> </body> </html>
다시해보자.