iframe은 현재 사이트에 다른 사이트의 화면을 띄어주는 틀을 만드는 코드
하지만 보안상 피싱사이트에서 이 기능을 이용해
정보를 빼가 이용하므로 조심해야 한다.
예를들어 사이트 주소를 잘못첫는데 네이버가 나왔다.
그리고 id pw를 입력하면 바로 정보가 유출된다고 보면 된다.
src와 width, height를 이용해 조절한다.
<html>
<head>
<meta charset="UTF-8">
<title>Iframe</title>
</head>
<body>
<iframe src="07_list.html" width="500px" height="300px"></iframe>
<!--iframe은 다른 사이트를 화면에 띄어주는 코드-->
<!--iframe은 피싱사이트 연결에 자주 사용되어 보안상 주의해야 할 코드-->
<!--고로 대형 사이트들은 막아놓음-->
<iframe src="04_table.html" width="500px" height="200px"frameborder = "0" scrolling="no"></iframe>
<!--frame의 틀과 스크롤을 없애기-->
<iframe src="https://www.youtube.com" width="500px" height="300px"></iframe>
<!--유튜브의 경우는 막아놨기 때문에 안나옴-->
<!--즉 허용된 사이트만 외부 링크를 가져올 수 있다.-->
<iframe src="https://youtube.com/embed/nM0xDI5R50E" width="500px" height="300px"></iframe>
<!--하지만 sns공유기능에서 링크를 따와 맨 뒤의 코드 "nM0xDI5R50E" 부분을-->
<!--https://youtube.com/embed/ 뒤에 붙이면 해당 유튜브만 따올 수 있다.-->
</body>
</html>
실행 화면은 다음과 같다.
유튜브 링크의 경우는 다음과 같은 부분을 말한다.
예전에 https://qdgbjsdnb.tistory.com/129 에서 사용한 html 예제 파일을 이용해서 iframe을 활용해보자
기존의 html 파일의 상단에 링크 하나 추가(navi)
기존의 html 파일의 하단에 사이트 링크들 추가(footer)
먼저 압축파일을 받아 각종 사이트 대표 이미지를 받아
HTML 폴더에 img 폴더를 만들어 넣어주자
img.zip받고나서 아래 코드 입력
navi
<ul>
<a href="#"><li>HTML</li></a>
<a href="#"><li>CSS</li></a>
<a href="#"><li>JAVA-SCRIPT</li></a>
<a href="#"><li>J-Query</li></a>
<a href="#"><li>BOOT STRAP</li></a>
</ul>
<!--참조만 할 html 파일은 html영역, head영역 body영역 등 생략이 가능-->
다음으로 footer, 기존 틀은 생략
<a href="http://www.daum.net"target="_blank">
<img src="img/daum.png" alt="다음 이미지" width="150" height="70"/>
</a>
<a href="http://www.google.com"target="_blank">
<img src="img/google.png" alt="구글 이미지" width="150" height="70"/>
</a>
<a href="http://www.msn.com"target="_blank">
<img src="img/msn.jpg" alt="MSN 이미지" width="150" height="70"/>
</a>
<a href="http://www.nate.com"target="_blank">
<img src="img/nate.png" alt="NATE 이미지" width="180" height="70"/>
</a>
<a href="http://www.naver.com"target="_blank">
<img src="img/naver.png" alt="네이버 이미지" width="120" height="70"/>
</a>
다음으로 페이지 합치기
<html>
<head>
<meta charset="UTF-8">
<title>메인 Page</title>
</head>
<body>
<iframe src="exercise_03_navi.html" width="100%" height="30" frameborder="0" scrolling="no"></iframe>
<h2>메인 페이지</h2>
<hr/>
<br><small>NHH 엔터테인먼트</small>가 <b>가카오</b>를 상대로 특히 침해 소송을 벌인 것과 관련해,<br/>
<br>가카오가 제기한 <mark>특허 무효</mark> 심판 3건 중 2건에서 가카오가 승소했다.<br/>
<br><br/>
<!--br안의 내용을 입력안하면 그냥 Enter키를 누른것과 유사-->
<br>가카오는 14일 <del>NHH엔터테인먼트</del>의 특허 자회사 <ins>케이이노베이션</ins>이 보요 특허 침해로 제기한<br/>
<br>특허소송과 관련해 자사가 진행한 <sup>특허 무효심판</sup>에서 승소했다고 밝혔다.<br/>
<iframe src="exercise_03_footer.html" width="100%" frameborder="0" scrolling="no"></iframe>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글
| [HTML]02-08.Input(버튼, 텍스트박스 등 다양한 노드 생성) 예제 (0) | 2018.10.16 |
|---|---|
| [HTML]02-07.link(페이지 아이콘 이미지 추가),Input(버튼, 텍스트박스 등 다양한 노드 생성), fieldset(프레임 만들기) (0) | 2018.10.15 |
| [HTML]02-05.리스트, li, ul, ol, dl(dl, dt, dd) (0) | 2018.10.15 |
| [HTML]02-04.이미지, 하이퍼링크 태그(img, a) (0) | 2018.10.15 |
| [HTML]02-03.테이블(표) 만들기, style, table, tr, th, td, colspan, rowspan (0) | 2018.10.15 |