• 회원가입
  • 로그인

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

목차
  1. <iframe> 예제 - 타 웹페이지 삽입
  2. <iframe> 정의
  3. <iframe> 구문
  4. <iframe> 속성
  5. <iframe> 예제 - 일부분만 가져오기 (표준시 출력)
  6. <iframe> 예제 - 유튜브 자동 재생
  7. <iframe> 차단 - 내 홈페이지가 타 사이트의 아이프레임으로 들어가는 거 막기
  8. 그누보드5 (영카트5) 에디터에서 iframe 사용 적용 안 되는 이유

 

<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 (인라인프레임)의 약자. 즉, 가로로 나열.

2. 
<iframe> 태그 지원 않는 브라우저를 대비해서, 
<iframe> 시작 태그와 종료 태그 사이에 안내 문구 써두는 게 좋음.
 
3. 
<iframe> 태그에 스크롤바 등 스타일 줄 때는 되도록이면 CSS를 이용. 

4. 
HTML5에서는 몇몇 속성이 제거되고, 새로운 속성이 추가됨.
 
5. 
XHTML에서는 name 속성의 중요성이 사라져 앞으로 제거 예정이며, 
대신, id 속성 사용을 권장.
 
6. 
시작태그와 종료태그로 구성. 

7.
<iframe> 태그는 inline-block 요소적 특징 지님.
즉, 옆으로 나열되면서도 가로길이 (=너비) 와 세로길이 (=높이) 지정 가능
 
8. 예제 더 보기
 
 

<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
 

<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> 예제 - 유튜브 자동 재생

 

<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> 차단 - 내 홈페이지가 타 사이트의 아이프레임으로 들어가는 거 막기 

 

<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)에서 위험태그로 필터링 된 경우

 

PS1. 

<iframe>, <script> 등 태그는 위험 태그로 분류됨.

 

PS2. 

사용허용 설정 방법
/plugin/htmlpurifier/saveiframe.txt 파일에 도메인 등록

 

3.

내 사이트는 https 적용 된 상태인데, iframe 사이트는 http인 경우

 


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

no_profile 설지운 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2022-06-09 (목) 08:50 28일전
굿정보임
주소
찾아주셔서 감사합니다. Since 2012