• 회원가입
  • 로그인
  • 구글아이디로 로그인

[frame] HTML - <iframe> 태그 ★ - 타웹페이지삽입 (= iframe태그 = 아이프레임태그) ※ iframe차단 = 타사이트 iframe 안으로 들어가는 거 막기 ※ 유튜브 자동 재생

목차
  1. <iframe> 예제 - 타 웹페이지 삽입
  2. <iframe> 정의
  3. <iframe> 구문
  4. <iframe> 속성
  5. <iframe> 예제 - 일부분만 가져오기 (표준시 출력)
  6. <iframe> 예제 - 아이프레임 높이 자동 조절
  7. <iframe> 예제 - 유튜브 자동 재생
  8. <iframe> 예제 - 유튜브 반복 재생
  9. <iframe> 예제 - 유튜브 영상 회전
  10. <iframe> 차단 - 내 홈페이지가 타 사이트의 아이프레임으로 들어가는 거 막기
  11. 그누보드5 (영카트5) 에디터에서 iframe 적용 안 되는 경우
  12. 그누보드5 (영카트5) 게시판 링크1에 주소 입력 시 iframe 자동 추가
  13. 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 (소리 제거) 붙어야 가능.

PS. 여러 개 자동재생: (221229) https://sir.kr/qa/484634 
 

<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>

 

결과보기

관련글: (230326) https://sir.kr/qa/494755
 

<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

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 설지운 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2022-06-09 (목) 08:50 1년전
굿정보임
주소
분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012