iframe

iframe : HTML Inline Frame 요소이며 inline frame의 약자이다.
iframe을 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다.

기본 예제

<iframe src="/css/intro" style="width:100%; height:300px">
</iframe>

iframe 요소의 페이지 변경하기

<a>태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있습니다.
<a>태그의 target 속성과 iframe 요소의 name 속성을 연결하면, <a>태그를 통해 iframe 요소의 페이지를 변경할 수 있게 됩니다.

예제

<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px;"></iframe>
<p>
  <a href="/php/intro" target="frame_target">
  PHP 수업 확인하러 가기 =>
  </a>
</p>

iframe 속성

• src : 삽입 할 홈페이지 url- name : 프레임 이름- width : 프레임 가로 너비- height : 프레임 세로 길이
• frameborder : 프레임 테두리 선 (0으로 설정하면 프레임의 테두리선 x, 1로 설정하면 프레임의 테두리선 o)
• scrolling : 스크롤바의 표시 여부를 나타냅니다. (yes로 설정하면 스크롤 바 무조건 표시, auto는 자동 표시)
• align : 정렬, left 왼쪽, right 오른쪽, middle 중앙, absmiddle 줄 중간 정렬이 있다.- seamless : 경계선 없이 문서의 일부인 것처럼 화면에 렌더한다.
• srcdoc : 직접 태그소스를 iframe으로 표시할 수 있다.

iframe의 target 속성

a 태그 속성 중 target 속성은 링크가 걸린 문서가 나타날 프레임을 설정하는 것으로 새로운 창으로 링크를 호출 할 수도 있고 현재창에 보여줄 수 도 있다.그리고 부모 프레임 영역에 나타날 수 도 있고 프레임을 지정하여 원하는 프레임에 링크를 실행할 수 도 있다.

_blank
새창에서 열기

_self
내용을 현재 프레임 영역에서 열기(포커스가 있는 프레임 / 기본값)

_parent
내용을 부모 프레임 영역에 열기

_top
내용을 무조건 전체 영역에 열기

프레임명
해당 이름을 가진 프레임 영역에 열기

// 새창에서 열기
<iframe target="_blank" src="주소"></iframe>

// 내용을 현재 프레임 영역에서 열기(포커스가 있는 프레임 / 기본값)
<iframe target="_self" src="주소"></iframe>

// 내용을 부모 프레임 영역에 열기
<iframe target="_parent" src="주소"></iframe>

// 내용을 무조건 전체 영역에 열기
<iframe target="_top" src="주소"></iframe>

// 해당 이름을 가진 프레임 영역에 열기
<iframe target="프레임명" src="주소"></iframe>

유튜브 퍼가기

유튜브해당 동영상 > 공유 > 퍼가기 > 동영상 퍼가기

유튜브 사용 시 src뒤에 물음표를 붙이고 옵션을 넣을 수 있다.이어서 옵션을 추가할때에는 &를 사용한다.

?autoplay=1 (자동재생)
&loop=1 (반복)

주의사항

1. 반응형 웹 사이트가 대세인 오늘날의 트렌드와 상극이다.

2. 페이지의 파편화 문제가 생긴다.

3. 검색 엔진 등록 시 frameset 뿐만 아니라 메뉴용 페이지, 콘텐츠용 페이지 까지 함께 크롤링 할 수 있다.

4. 웹접근성 저해의 요인이 될 수 있음으로 남용에 주의해야한다.

출처: https://cloud-oky.tistory.com/665 [SAMSUNG CLOUD-OKY:티스토리]