본문 바로가기

Webstoryboy

Category

Explanation

HTML

[HTML] <iframe>

<iframe>

<iframe> 태그는 웹 문서에 다른 문서를 포함하는데 사용합니다.


<iframe>

<iframe> 태그는 웹 문서에 다른 문서를 포함하는데 사용합니다.

특징 설명
요소 블록 요소(Block Element)
닫는 태그 닫는 태그 사용(<iframe> ~ </iframe>)
버전 HTML4

정의(Definition)

  • <iframe> 태그(HTML Inline Frame element)는 웹 문서에 다른 웹 문서를 포함하는데 사용합니다.
  • 웹 문서에서 <iframe> 태그는 여러 개를 사용 할 수 있습니다.
  • <iframe> 태그를 여러 개 사용 할 경우, 페이지 리소스가 증가하여 느려질 수 있으므로 웹 페이지 성능을 고려하여 적절하게 사용하여야 합니다.

속성(Property)

속성 값(예) 설명 버전
align left
right
top
middle
bottom
아이프레임을 왼쪽으로 정렬합니다.
아이프레임을 오른쪽으로 정렬합니다.
아이프레임을 위쪽으로 정렬합니다.
아이프레임을 가운데로 정렬합니다.
아이프레임을 아래쪽으로 정렬합니다.
html5
frameborder frameborder="0"
frameborder="1"
아이프레임의 테두리 값을 0으로 설정합니다.
아이프레임의 테두리 값을 1로 설정합니다.
html5
height height="100" 아이프레임 세로 값을 설정합니다. -
longdesc longdesc="URL" 아이프레임 콘텐츠의 자세한 설명을 포함하는 URL을 설정합니다. html5
marginheight marginheight="100" 아이프레임의 상단과 하단의 바깥쪽 여백을 설정합니다. html5
marginwidth marginwidth="100" 아이프레임의 왼쪽과 오른쪽의 바깥쪽 여백을 설정합니다. html5
name name="text" 아이프레임의 이름을 설정합니다. -
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
sandbox 속성을 추가하면 추가적인 명령어를 설정할 수 있습니다. html5
scrolling yes
no
auto
아이프레임의 스크롤을 나타나도록 설정합니다.
아이프레임의 스크롤을 나타나지 않도록 설정합니다.
아이프레임의 스크롤을 자동으로 설정합니다.
html5
src src="URL" 아이프레임 주소를 설정합니다. -
srcdoc srcdoc="HTML_code" 아이프레임의 추가적인 HTML 콘텐츠를 설정합니다. html5
width width="100" 아이프레임 가로 값을 설정합니다. -

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<iframe> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기