반응형
구글 광고처럼 embed 스크립트 태그를 넣어서 화면에 보여주기
구글광고는 내 페이지 안에 광고를 넣는데 해당 html 이 특정 부분에 보여줍니다. 당연히 구글 광고 화면부분은 나의 페이지에서 제공하는게 아닙니다.
다시 설명드리면 아래 https://iframely.com/embed/ 도메인 소유자의 사이트인데, 제가 화살표로 표기한 부분은 http://luckshim.tistory.com/1 사이트에서 제공해 준겁니다.
저는 windows 10 에 iis 를 설치해서 localhost 로 테스트를 아래와 같이 코딩 해봤습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div class="iframely-embed">
<div class="iframely-responsive" style="padding-bottom: 61.5839%; padding-top: 120px;">
<a href="https://en.wikipedia.org/wiki/URL" data-iframely-url="https://en.wikipedia.org/wiki/URL"></a>
</div>
</div>
<script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>
</body>
</html>
나의 페이지인 localhost 의 test.html 페이지에 외부의 사이트인 wikipedia 를 embed 태그를 활용해서 넣었습니다. 아래 화면을 보면 마치 위키피디아 사이트로 오해 할 수 있을 정도로 잘 보여줍니다.
반응형
'생활TIP > IT제품리뷰' 카테고리의 다른 글
| 디베아 Dibea c17 무선 청소기 핸디 청소기구매 및 사용기 (0) | 2018.05.22 |
|---|---|
| 샤오미 미에어2 선호 기능 적극 활용하자 (0) | 2018.05.12 |
| 다이소에서도 알뜰폰의 유심칩을 팔다 (0) | 2018.03.20 |