아이프레임(IFrame)은 inline frame의 약자이다.
간단하게 다른 HTML 페이지를 현재 페이지에 포함 시키는 것.
HTML
// 문법
<iframe src="삽입할페이지주소" width="너비" height="높이"></iframe>
// 예시
<iframe src="./intro.html" width="300" height="300"></iframe>
iframe 속성
- src : 삽입 할 홈페이지 url
- name : 프레임 이름
- width : 프레임 가로 너비
- height : 프레임 세로 길이
- frameborder : 프레임 테두리 선 (0으로 설정하면 프레임의 테두리선 x, 1로 설정하면 프레임의 테두리선 o)
- scrolling : 스크롤바의 표시 여부를 나타냅니다. (yes로 설정하면 스크롤 바 무조건 표시, auto는 자동 표시)
- align : 정렬, left 왼쪽, right 오른쪽, middle 중앙, absmiddle 줄 중간 정렬이 있다.
- seamless : 경계선 없이 문서의 일부인 것처럼 화면에 렌더한다.
- srcdoc : 직접 태그소스를 iframe으로 표시할 수 있다.
<iframe srcdoc="<p>하이?</p>"></iframe>
- sandbox : 보안을 위해 iframe에서 폼이나 자바스크립트 실행이 되지 못하게 함.(해킹 문제)
ㄴ allow-forms - 폼실행 허용
ㄴ allow-same-origin 같은 도메인의 리소스 이용가능
ㄴ allow-scripts 스크립트 실행 허용
<iframe sandbox="" src="주소"></iframe>
// 스크립트 실행 가능
<iframe sandbox="allow-script" src="주소"></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>
주의할 사항
HTML5 이전에도 이후에도 <iframe>을 사용하지 않는 것을 권고한다.
- 반응형 웹 사이트가 대세인 오늘날의 트렌드와 상극이다.
- 페이지의 파편화 문제가 생긴다.
ㄴ 검색 엔진 등록 시 frameset 뿐만 아니라 메뉴용 페이지, 콘텐츠용 페이지 까지 함께 크롤링 할 수 있다.
- 웹접근성 저해의 요인이 될 수 있음으로 남용에 주의해야한다.
'IT지식' 카테고리의 다른 글
[Ionic]하이브 프레임워크 Ionic 이란? (0) | 2023.10.10 |
---|---|
[git]merge/commit/checkout 사용법 (0) | 2023.08.24 |
[Git]revert 한 branch 다시 merge 하는 법 (0) | 2023.08.23 |
DNS란 무엇일까? -Softeasy (2) | 2023.06.04 |
WebSocket(웹소켓)이란? (0) | 2023.05.15 |
댓글