iframe 태그는 나중에 다루려고 했으나 다음 강좌인 링크 태그 a를 설명하기 위해 다소 어렵게 생각하실 수 있지만 지금 알려 드리려고 합니다.
프레임의 사전적 의미는 틀, 액자, 틀에 넣다 라는 의미를 가지고 있습니다. 토론회등에 보면 프레임을 씌우려 한다라고도 많이 하지요. 사진 액자를 생각하면 쉽습니다.
iframe 은 현재의 웹문서에 다르 웹문서 자체를 포함시킬 때 사용합니다.
가령 a.html 이라는 문서를 만들었는데 b.html 이라는 문서를 작성하다보디 a.html 문서 내용이 다시 나오게 해야 했습니다. 이 경우 a.html 문서를 다시 b.html 문서 내용에 코딩하는 것은 노동력 낭비가 될 것입니다. 이처럼 문서의 일부 내용을 가져오는 것이 아니라 하나의 틀을 만들고 그 틀안에 웹문서 자체를 통채 가지고 오고 싶을때 사용하는 태그입니다.
iframe 사용법
<body>
<h1>iframe</h1>
<p>iframe 은 html 문서내에 html 문서를 포함시킬 때 사용합니다.</p>
<iframe src="hello.html"></iframe>
</body>iframe은 기본속성으로 img 태그처럼 src 속성을 가지고 있습니다. img 태그의 src가 이미지 경로를 지정하는 것이니 iframe은 마찬가지로 html 문서를 지정하는 것이 됩니다.
개발자 도구로 확인해 보면 선두께가 2px 입니다. display 속성 확인을 위해 Computed를 확인해 보겠습니다.
iframe은 블럭속성을 가지고 있을것 같지만 display속성은 인라인 입니다. 그리고 특이한 점은 가로 세로 크기를 기본적으로 가지고 있습니다. 이점은 꼭 기억해 두시는게 좋을 것 같습니다. 여지껏 인라인 속성은 내부 컨텐츠의 내용의 크기만큼을 자동으로 잡는다라고 했습니다.
그러나 iframe만큼은 인라인 속성을 가지고 있으나 가로 세로 크기가 존재하는 특이한 놈입니다.
개발자 도구를 좀더 확인해 보면
이전에 만들어 두었던 hello.html의 내용이 그대로 포함되있는 것을 보실 수 있습니다.
가만히 생각해 보면 img 태그가 종료태그가 없는 빈태그 였듯이 iframe 태그도 종료태그가 없는 빈태그여야 될것 같지만 그 안에는 위와 같이 불러온 웹문서의 내용이 포함되기 때문에 종료태그가 존재하는 완전한 태그 만들어지는 것이 정상적인 방법이겠네요
iframe 사용시 주의 사항
iframe은 외부 다른 웹사이트의 내용을 가지고 올 수도 있습니다. 매우 유혹적인 기능이죠
src="https://www.daum.net" 라고 하면 다음 사이트를 통채로 가지고 올 수도 있습니다. 예전에는 이런식으로 사기치는 업체도 있었습니다. 마치 다음인냥 위장해서 접속자들의 신뢰을 얻어 어떤 행위를 유도하는 사기들 이었습니다.
그래서 요새는 기술적으로 여러가지 방법을 통해 타사이트에서 외부로 불러들이는 것을 막고 있기도 합니다.
iframe이 매우 유용해 보이지만 외부사이트를 불러올때 단점도 있습니다.
가령 홍길동이 자기 홈페이지에 a.html 이라는 웹문서를 만들었습니다. a.html 문서에는 매일매일 업데이트 되는 뉴스 내용이 들어 있습니다. 내일이면 홍길동은 또다른 내용을 열심히 추가할 것입니다. 그런데 임꺽정이 그 내용을 보다가 좋네 나도 가져다 써야지라고 생각하고 iframe을 사용했습니다. 그런데 홍길동이 어느날 a.html을 삭제 해버렸습니다. 임꺽정은 알 수가 없었을 것이고 어느날 보니까 페이지가 없다는 내용만 나오게 됩니다. 이미 임꺽정 홈페이지를 보던 사람들은 실망 했을 것입니다.
이런 이유로 외부페이지를 가지고 와서 보여 줄때는 좀더 신중해야 합니다. 가지고 올 정보가 잘못된 것은 없는지, 삭제의 위험은 없는지, 믿을 수 있는 것인지, 가져와도 되는 것인지등을 파악하는 것이 필요합니다. 나중에 책임의 요소가 될 수도 있으니까요.
다시 돌아와 iframe 태그를 정리해 보면
인라인 속성, 크기를 가지고 있으며, 반드시 종료태그를 선언해야 하며, 가능한 내가 만든 것을 불러오고, 외부 페이지를 불러 올 경우 신중히 고민할 것
이라고 할 수 있겠습니다.
그리고 frame 태그에는 frameset 태그와 frame 태그도 있습니다만 html5에서 지원이 중단돼어 현시점에는 사용이 없으므로 아실 필요 없겠습니다. iframe만 알고 계시면 충분합니다.
'강좌 및 설정 > HTML 기본강좌' 카테고리의 다른 글
| 링크 태그 a 두번째 (target 속성) (0) | 2022.11.21 |
|---|---|
| 링크 태그 a 첫번째 (0) | 2022.11.18 |
| 이미지 태그 img, 절대경로 상대경로 (0) | 2022.11.17 |
| 단락 태그 p, 줄바꿈 태그 br (0) | 2022.11.16 |
| 제목 태그 h1~h6와 폰트의 크기 em (0) | 2022.11.15 |