목차
<iframe> 예제 - 타 웹페이지 삽입
<iframe> 정의
<iframe> 구문
<iframe> 속성
<iframe> 예제 - 일부분만 가져오기 (표준시 출력)
<iframe> 예제 - 아이프레임 높이 자동 조절
<iframe> 예제 - 유튜브 자동 재생
<iframe> 예제 - 유튜브 반복 재생
<iframe> 예제 - 유튜브 영상 회전
<iframe> 차단 - 내 홈페이지가 타 사이트의 아이프레임으로 들어가는 거 막기
그누보드5 (영카트5) 에디터에서 iframe 적용 안 되는 경우
그누보드5 (영카트5) 게시판 링크1에 주소 입력 시 iframe 자동 추가
mp3, mp4 GET변수 걸치기파일
<iframe> 예제 - 타 웹페이지 삽입
<iframe src=" https://homzzang.com/music " width="100%" height="350px"> <p>아이프레임 지원 않는 브라우저는 개나 줘버려!</p> </iframe>
<iframe src="https://homzzang.com/ " width="200" height="200"></iframe>
<iframe> 정의
현재 웹페이지에 다른 웹페이지의 HTML 문서를 불러올 때 사용.
1.
시작태그와 종료태그로 구성됨.
<iframe> 태그는 inline frame (인라인프레임)의 약자. 즉, 가로로 나열.
<iframe> 태그 지원 않는 브라우저를 대비해서, <iframe> 시작 태그와 종료 태그 사이에 안내 문구 써두는 게 좋음.
<iframe> 태그에 스크롤바 등 스타일 줄 때는 되도록이면 CSS를 이용.
HTML5에서는 몇몇 속성이 제거되고, 새로운 속성이 추가됨.
HTTPS 사이트에 HTTP 사이트는 아이프레임으로 넣을 수 없음.
XHTML에서는 name 속성의 중요성이 사라져 앞으로 제거 예정이며, 대신, id 속성 사용을 권장.
<iframe> 태그는 inline-block 요소적 특징 지님. 즉, 옆으로 나열되면서도 가로길이(=너비) 와 세로길이(=높이) 지정 가능.
2.
모든 브라우저 지원.
3. MDN <iframe> 예제보기
<iframe> 구문
<iframe src="불러올 웹페이지 주소" 속성="속성값"> 브라우저가 iframe 지원 안 할 때 띄울 메시지 </iframe>
<iframe> 속성
속성
속성값
쓰임새
비고
align
left (왼쪽)
right (오른쪽) top (상단) middle (중단) bottom (하단)
주변 요소들관의 관계에서
<iframe> 태그를 어느 쪽에 정렬시킬 것인지 결정
HTML5 X
frameborder
0 (경계선 없음)
1 (경계선 있음)
<iframe>으로 불러온 웹페이지의 주변에 경계선을 줄지 여부 결정
HTML5 X
height
px 단위
<iframe>으로 불러온 웹페이지의 세로 길이. px 단위는 표기 안 해도 됨.
width
px 단위
<iframe>으로 불러온 웹페이지의 가로 길이.
px 단위는 표기 안 해도 됨.
marginheight
px 단위
<iframe>으로 불러온 웹페이지의 내용을
상단 하단 경계로부터 얼마나 멀리 띄울지 결정
HTML5 X
marginwidth
px 단위
<iframe>으로 불러온 웹페이지의 내용을
좌측 우측 경계로부터 얼마나 멀리 띄울지 결정
HTML5 X
src
URL 주소
<iframe>으로 불러올 웹페이지 주소
[주의] http는 https 사이트에서 사용 불가.
scrolling
yes (스크롤바 있음)
no (스크롤바 없음)
auto (자동으로 결정)
<iframe>창보다 웹페이지가 클 때
스크롤바를 생성시킬건지 여부 결정
HTML5 X
longdesc
URL 주소
<iframe>으로 불러온 웹페이지에 대한
설명이 길 때 따로 설명 페이지를 만들어 연결
HTML5 X
srcdoc
HTML 코드
src 속성을 이용해 타 웹페이지를 불러오는 대신
직접 입력해 아이프레임 창에 보여주는 속성 익스플로러는 지원 안함. 크롬, 파이어폭스, 사파리만 지원함.
HTML5 O
name
글자
다른 <iframe> 태그와 구별위한 고유 이름
sandbox
"" allow-forms allow-same-origin allow-scripts allow-top-navigation
<IFRAME>으로 불러올 웹페이지의 내용에 대한
별도의 제한 설정을 가능하게 할 때 사용하는 속성.
"" :
아래 모든 제한을 적용
allow-forms :
폼 양식 값 전송을 허용
allow-same-origin :
부모 웹문서와 하나로 보도록 허용
allow-scripts :
스크립트 실행을 허용
allow-top-navigation :
아이프레임으로 불러온 웹페이지가
부모 웹문서 내용을 띄우는 걸 허용
익스9 포함 그 이전 버전과 오페라 12 포함 그 이전 버전은 지원 안함.
HTML5 O
seamless
seamless
<iframe>으로 불러온 웹페이지 내용을
마치 부모 페이지 내용의 일부처럼 보이게 하는 속성
seamless 속성은 크롬, 오페라, 사파리만 지원함. 단, 오페라12 포함 그 이전 버전과 사파리 5 포함 그 이전 버전은 seamless 속성 지원 안함 HTML5에서는 속성값 없이 seamless만 적어도 되나,
XHTML에서는 반드시 속성="속성값" 형식으로 적어야 함.
HTML5 O
allow
아이프레임 (기능/권한) 정책 지정.
src 출처 기반으로 <iframe>에서 사용할 수 있는 기능(예: 마이크, 카메라, 배터리, 웹 공유 등에 대한 액세스)을 정의.
각각의 특성은 세미콜론(;) 으로 연결. (예) allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
<iframe> 예제 - 일부분만 가져오기 (표준시 출력)
<style>
div {position:relative; border:1px solid silver; width:300px; height:80px; overflow:hidden;}
iframe {position:relative ; top:-60px; border-width:0px}
</style>
<div>
<iframe src=https://time.is/just></ifrmae>
<div>
결과보기
<style>
div {position:relative; border:1px solid silver; width:300px; height:80px; overflow:hidden;}
iframe {position:absolute ; top:-60px; border-width:0px}
</style>
<div>
<iframe src=https://time.is/just></ifrmae>
</div>
결과보기
<iframe> 예제 - 아이프레임 높이 자동 조절
https://homzzang.com/b/js-2002
<iframe> 예제 - 유튜브 자동 재생
※ 동영상주소 뒤에 추가: ?autoplay=1&mute=1
<iframe width="560" height="315" src="https://www.youtube.com/embed/E11p66uJVMY? autoplay=1&mute=1 " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
결과보기 ※ mute=1 (소리 제거) 붙어야 가능.
<iframe> 예제 - 유튜브 반복 재생
※ 동영상주소 뒤에 추가: ?loop=1&playlist=동영상ID
※ 반복재생은 playlist만 지원.
<iframe width="560" height="315" src="https://www.youtube.com/embed/gOjVpGw3ciw?loop=1&playlist=gOjVpGw3ciw " title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
결과보기
<iframe> 예제 - 유튜브 영상 회전
<style>
.rotate {
position: relative;
top:25vw;
border:0px solid red;
padding:55.9% 0 0;
width:100%;
}
.rotate iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(90deg);
}
</style>
<div class="rotate">
<iframe src="https://www.youtube.com/embed/27R3EyTW_MY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
결과보기
<iframe> 차단 - 내 홈페이지가 타 사이트의 아이프레임으로 들어가는 거 막기
<script>if (top !== self) top.location.href = self.location.href; </script>
또는, <script>if (self !== top) top.location='https://homzzang.com '; </script>
그누보드5 (영카트5) 에디터에서 iframe 적용 안 되는 경우
1.
해당 사이트가 iframe으로 들어가는 걸 막은 경우 (위 예제 참고)
2.
그누보드5(영카트5)에서 위험태그로 필터링 된 경우
PS. 등록 추가 추천 (움짤/코딩) 사이트
gfycat.com/ (망함 ㅡㅡ;)
giphy.com/
codepen.io/
3.
내 사이트는 https 프로토콜인데, iframe 사이트는 http 프로토콜인 경우
4.
www 사용하는 주소인데, www 없이 넣은 경우. 관련글보기
(예) www.kapwing.com/ 대신, kapwing.com/ 넣은 경우 재생 X
그누보드5 (영카트5) 게시판 링크1에 주소 입력 시 iframe 자동 추가
게시판스킨/view.skin.php 본문 출력 코드 위나 아래에 아래 코드 입력.
<?php if($view['wr_link1']) {?>
<iframe src="<?php echo $view['wr_link1']?>"></iframe>
<?php } ?>
mp3, mp4 GET변수 걸치기파일
비타주리 님 (220215) https://sir.kr/g5_tip/17863
주소 복사
랜덤 이동