HTML - 사이트 특정 부분만 Iframe 으로 보이게 하기

---

Iframe으로 사이트 한 부분만 나오게 

---

안녕하세요.

고코더 입니다.

사이트를 개발하다 보면

특정 사이트의 한 부분을 담아오고 싶을 때가 있습니다.

그래서 HTML은 Iframe을 준비해났습니다.

하지만 iframe에 기본속성을 사용하면

전체 화면을 담아오기 때문에 전체화면이 보여줍니다.

▼ 방송의 실시간 화면을 보여주고 싶은데

ifrme에는 전체화면이 주어집니다.

하지만 iframe에 간단한 DIV를 사용하면

사이트의 특정 화면만 iframe에 표현할 수 있습니다.

▼ 해당 HTML 코드를 한번 웹에서 실행해보세요

<div style="position:absolute; top:-360px; left:0px;">
    <iframe src="http://onair.kbs.co.kr/index.html?sname=onair&stype=live&ch_code=11&ch_type=globalList" width="860" height="840" scrolling="no" frameborder="0"></iframe>
</div>

iframe_crop_gocoder.html

▼ KBS 방송의 온에어의 화면을 깔끔하게 

해당 실시간 화면만 IFRAME으로 가져왔습니다.

---

소스 코드 설명

---

style="position:absolute; top:-360px; left:0px;

DIV에 absolute 설정을 주고

화면 위치를 top, left로 조정합니다.

width="860" height="840"

그리고 Iframe에 width, height를 조절해

원하는 화면에 크기를 가져오게 됩니다.

하지만 사용자 기기와 해상도에 따라

해당 사이트 위치 값은 모두 다르므로

기기 마다 테스트 해서 if를 줘

모든 다른 위치 값을 사용해야 합니다.

---

마무리

---

제대로 만들려면

노가다 입니다.