iframe margin-top 질문
본문
iframe 에 style에서 margin-top 을 -100 하였는데 iframe 내용 안의 것을 움직이는게 아니고 iframe 전체 창이 위로 올라가더라구요. 전 내용안의 것만을 움직이게 하고 싶은데 어떻게 해야 하죠? ㅠ.ㅠ
답변 3
그런 경우라면 css(스타일)의 영향일겁니다.
즉 아이프레임 내부에서 지정한 스타일과 외부파일 스타일과
이름이 중복되는 스타일명이 있지 않을까 싶네요.
그게 맞는것 같아요. 감사합니다.
제이쿼리로 아이프레임 내부의 클래스 접근이 가능합니다.
접근이 가능하면 css 수정도 가능하겠죠.
예제소스 - test.html
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<iframe class="iframe1" src="test_in.html" width="600" height="300"></iframe>
<input type="button" onclick="$('.iframe1').contents().find('.iframe2').attr('style','margin-top:50px; width:100px; height:100px; background:#cc0000;');" value="바꾸기">
예제소스 - test_in.html
<div class="iframe2" style="position: relative; left:0px; top:0px; margin-top:0px; width:200px; height:200px; background: #fff100;">
아이프레임 안
</div>
감사합니다.
iframe은 타 주소 또는 다른 웹페이지를 그대로 가져오는 윈도우창같은 소스입니다.
그래서 내부에 margin이나 padding을 주려면, 해당 웹페이지에 소스를 바꿔야 가능해요.
다른데선 되거든요. 그래서 될 줄 알았어요.