iframe & modal

iframe이란?

• HTML Inline Frame 요소이며 inline frame의 약자.
• 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저

<iframe src="삽입할페이지주소" width="너비" height="높이"></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>test</p>"></iframe>

sandbox : 보안을 위해 iframe에서 폼이나 자바스크립트 실행관련 설정

• allow-forms - 폼실행 허용
• allow-same-origin 같은 도메인의 리소스 이용가능
• allow-scripts 스크립트 실행 허용

주의사항

• HTML5 이전에도 이후에도 <iframe>을 사용하지 않는 것을 권고한다.
• 반응형 웹 사이트가 대세인 오늘날의 트렌드와 상극이다.
• 페이지의 파편화 문제가 생긴다.
• 웹접근성 저해의 요인이 될 수 있음으로 남용에 주의해야한다.
• 프레임 구조가 가지고 있던 장점을 CSS와 jQuery로 해결 할 수 있다.

iframe의 target 속성

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

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

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

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

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

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

modal이란?

모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것.
모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다.
기존의 페이지와 부모-자식 관계를 갖으며, 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않는다.

팝업과의 차이점

팝업창이란 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것.
즉, 창 + 창n 이란 개념. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다.
(브라우저에서 팝업창을 강제로 막아놓을 경우 보이지 않는다)
내용은 보지도 않고 체크하고 싶어지는 팝업 창!
팝업하면 이벤트, 사과문, 안내문 등, 처음 페이지에 진입했을 때 바로 노출되는 모습이 상상되며, 페이지 내의 메인서비스와 관계없이 뜨는 독립적인 창(닫고싶은 창) 들이 팝업에 해당된다고 할 수 있겠다. 반면, 모달은 서비스와 관련해 다음 단계로 나아가기 위해 필요한 창이다.

팝업과 모달창의 공통점

사용자의 이목을 끌기위한 기능을 위해 사용한다는 공통점이 있다.