본문 바로가기
IT_Developers/HTML

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

by 고코더 2019. 3. 12.

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


안녕하세요.
고코더 입니다.

사이트를 개발하다 보면
특정 사이트의 한 부분을 담아오고 싶을 때가 있습니다.
그래서 HTML은 Iframe을 준비해났습니다.

하지만 iframe에 기본속성을 사용하면
전체 화면을 담아오기 때문에 전체화면이 보여줍니다.

▼ 방송의 실시간 화면을 보여주고 싶은데
ifrme에는 전체화면이 주어집니다.


하지만 iframe에 간단한 DIV를 사용하면
사이트의 특정 화면만 iframe에 표현할 수 있습니다.

▼ 해당 HTML 코드를 한번 웹에서 실행해보세요
1
2
3
<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>
cs
▼ KBS 방송의 온에어의 화면을 깔끔하게 
해당 실시간 화면만 IFRAME으로 가져왔습니다.





소스 코드 설명


style="position:absolute; top:-360px; left:0px;
DIV에 absolute 설정을 주고
화면 위치를 top, left로 조정합니다.

width="860" height="840"
그리고 Iframe에 width, height를 조절해
원하는 화면에 크기를 가져오게 됩니다.

하지만 사용자 기기와 해상도에 따라
해당 사이트 위치 값은 모두 다르므로
기기 마다 테스트 해서 if를 줘
모든 다른 위치 값을 사용해야 합니다.


마무리

제대로 만들려면
노가다 입니다.