웹 스터디

아이프레임과 프레임

토픽 웹 스터디 > HTML

iframe이란?

페이지안에 페이지를 삽입하는 방법이다. 예를들어 생활코딩 홈페이지인 opentutorials.org에는 유튜브가 삽입되어 있는데, 유튜브를 삽입하는 방법이 바로 iframe을 이용한 것이다.

문법

<iframe src="불러올 웹페이지의 URL" scrolling="스크롤링 허용여부(yes|no|auto)">
  iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공
</iframe>
  • src : 불러올 페이지의  URL
  • scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정
    • auto : 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값)
    • yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출
    • no : 스크롤 하지 않음
참고. width, height, frameborder(프레임의 테두리 사용여부) 등의 속성이 더 있지만, 디자인에 대한 부분은 CSS를 통해서 제어하는 것이 권장된다.

예제

example1.html (jsfiddle, github)

<!DOCTYPE html>
<html>
	<body>
		<iframe src="http://opentutorials.org" width="90%" height="300" frameborder="1" scrolling="yes"></iframe>
	</body>
</html>

frame

 

하나의 화면에서 여러개의 페이지를 분할해서 보여줌

문법

<frameset (cols | rows)="열 혹은 행의 크기(콤마로 구분)">
   <frame src="frame_a.htm" name="프레임의 이름" />
 </frameset>

예제

example2.html (github)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<frameset cols="40%, 60%">
  <frameset rows="25%, 75%">
    <frame src="contents_of_frame1.html" />
    <frame src="contents_of_frame2.html" />
  </frameset>
  <frame name="content" src="contents_of_frame3.html" />
  <noframes>
    <body>
      <p>This frameset document contains:</p>
      <ul>
        <li><a href="contents_of_frame1.html">contents_of_frame1.html</a></li>
        <li><a href="contents_of_frame2.html">contents_of_frame1.html</a></li>
        <li><a href="contents_of_frame3.html">contents_of_frame1.html</a></li>
      </ul>
    </body>
  </noframes>
</frameset>
</html>

contents_of_frame1.html (github)

<html>
	<head>
		<style type="text/css">
			body{
				background-color: red;
			}
		</style>
	</head>
	<body>
		contents_of_frame1.html<br />
		<a href="http://opentutorials.org" target="content">http://opentutorials.org</a>
	</body>
</html>

contents_of_frame2.html (github)

<html>
	<head>
		<style type="text/css">
			body{
				background-color: green;
			}
		</style>
	</head>
	<body>
		contents_of_frame2.html<br />
		<a href="http://w3c.org" target="content">http://w3c.org</a>
	</body>
</html>

contents_of_frame3.html (github)

<html>
	<head>
		<style type="text/css">
			body{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		contents_of_frame3.html
	</body>
</html>

댓글

댓글 본문
  1. NAMO
    감사합니다!
  2. JustStudy
    고맙습니다
  3. MaBin
    아이프레임을 사용할 때 아이프레임이 나타나야 할 공간에서 그냥 흰 부분만 나눠진채로 나와서 당혹스럽네요.. 뭐가 잘못된 걸까요?

    <!DOCTYPE html>
    <html>
    <body>
    <iframe src="http://opentutorials.org" width="90%" height="300" frameborder="1" scrolling="yes"></iframe>
    </body>
    </html>

    를 실행해보면 정상적으로 생활코딩 홈페이지가 아이프레임 되어 나오는데 src를 바꾸면 흰 부분만 나오지 지정한 주소의 사이트가 보이지는 않네요..
  4. 이승훈
    프레임은 일단 패스~
  5. 보현
    html5에서는 frame을 더이상 지원하지 않는다고 하셨는데 나중에라도 다시 볼 필요가 있는지 궁금합니다..
    좋은 영상 항상 감사합니다!!

    scrolling = "no" 여도 마우스 휠 꾹눌러 이동이 가능하네요?? ㅎㅎ
  6. 쥬슈야
    홈페이지 레이아웃 만들기를 연습해보려고 iframe과 frame 을 기대하며 영상을 봤는데요. 아직 iframe만 봤습니다. 레이아웃을 나누는 기능은 frame이 가지고 있는 것 같은데 운영자님이 html5에서 사용하기엔 추천하지 않으시다고 하신 것 같아요.

    그렇다면 레이아웃을 나누기 위해 어떤 태그를 공부해야하나요? html 쪽 말고 css쪽에서 레이아웃을 나누는 교육내용이 있나요?
  7. iframe height 100%
    html5 에서는 iframe에서 height이 100%가 되게하는 방법을 조금 다르게 해주고 있는것 같습니다..

    도움될까 싶어 링크 남깁니다.

    http://devday.tistory.com......%8C

    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <style type="text/css">
    html,body{
    height:100%;
    }
    </style>
    </head>
    대화보기
    • <!DOCTYPE html>
      <html>
      <body>
      <iframe src="http://opentutorials.org" width="90%" height="300" frameborder="1" scrolling="yes"></iframe>
      </body>
      </html>


      여기서 height는 퍼센테이지로 설정 불가능한가요??
      해봤더니 특정 싸이즈로 줄어 들 뿐 비율적으로 크기가 조정되진 않습니다.
    • welf
      이고잉님! 덕분에 열공하고있습니다
      Beginner님이 질문하신 것과 같은 내용인데 답변이 없으셔서 다시 질문드립니다
      src 부분에 naver나 google을 입력하고 실행했을 때는화면이 나오지가 않았는데, daum은 실행이 됐습니다. 왜 그런건지 설명부탁드려요!
    • 어부바
      감사합니다.
    • drjune
      다른거 구경하다 다시 들어오니.. 나오네요!!
      근데 반대로 https:// 붙이니까 이건 또 안나오네요
    • egoing
      죄송하지만 https://opentutorials.org....../71 아래와 같이 https로 접근해주세요
      대화보기
      • drjune
        동영상이 왜 안나오지.. 저만 그런가요 ㅠ
      • YellowBall
        아이프레임과 프레임(2/2) 잘 들었습니다 감사합니다.
      • html5에서 frame이 왜 권장되지 않는지 명확하지 않아 덧붙여드리겠습니다.

        html5에서 frameset엘리먼트는 권장되지 않습니다.
        그이유는 우선 iframe과 frameset엘리먼트들은 비슷한 output을 내지만 같은 것이 아닙니다.
        frameset엘리먼트들은 페이지안에서 body엘리멘트를 대신합니다. 이 것은 웹페이지 상에서 두개의 다른 문서들이 포함됨을 의미합니다. 이고잉님이 설명하신 부분처럼 usability와 accessibility에서 상당히 안좋음을 의미합니다. 그리고 css나 유비쿼터스 server-side development에 의해 두개의 문서로 하는것은 이미 대체되어왔습니다
        반면에 iframe같은경우는 웹페이지상에 body엘리먼트들을 대체하는 것이 아닙니다. 이것은 한블럭단위의 컨텐츠를 새로운 browsing context에 포함하는 것을 의미합니다. 그렇다고 frameset처럼 usability나 accesibility에서 문제를 겪진 않습니다. iframe은 그냥 단지 browsing context를 포함하는 것을 필요로 하기 때문입니다. 예를들면 페이지에 링크되어 있는 유튜브 영상이 띄워지는 것과 같이 됩니다. 그리고 iframe에서 sandbox속성은 모든 내용에 추가적인 제한을 거는 것인데 이를 사용하면 속성값을 통해서 컨텐츠에 대한 제한을 걸수도 있습니다. 이러한 기능은 보안상으로도 우위에 있다고 볼수 있습니다.

        따라서 html5에서는 frameset element를 사용하는 것보다 iframe을 사용하는 것이 권장됩니다.
      • uncle9uru
        frame 태그 속성에 noresize="noresize" 혹은 noresize를 넣어주시면 됩니다.
        대화보기
        • Akinaro
          가로 세로 행 열 횡 종 width height cols rows 진짜 헷갈리네요 후..
        • 욱희
          프레임 테두리쪽에 마우스 갖다대고 드래그하면 프레임이 유동이 가능하잖아요 유동아에 못시키게는 못하나요??
        • 쭈니
          좋은 강의 항상 감사 드립니다.
        • cdm5405
          결론적으로 둘다 웹페이지 표시하는데 문제는 없습니다.
          관리편의상 css와 html을 분리해 관리합니다.
          대화보기
          • egoing
            몇몇 브라우저는 프래임 기능을 지원하지 않는데 이런 브라우저에서 화면에 출력되는 부분을 noframes 태그 아래에 놓습니다.
            대화보기
            • Beginner
              안녕하세요. 강의 잘 보고있습니다.

              근데 궁금한 점이 하나 있는데, jsfiddle에서 src 부분에 naver나 google을 입력하고 실행했는데, 화면이 나오지가 않았는데, daum은 실행이 됐습니다. 왜 그런건지 설명해주시면 감사하겠습니다!
            • egoing
              여러가지 이유가 있겠죠. 웹을 기계적으로 해석하기 어렵게 한다거나.. 이런 이유가 클 것 같습니다.
              대화보기
              • egoing
                예 권장하지 않습니다
                대화보기
                • PegasusK
                  질문이 하나 있습니다.

                  왜 HTML5 부터는 프레임을 권장하지 않는 것입니까?
                • 박종길
                  재미있게 잘 배웠습니다.
                  감사합니다.
                  그런데 궁금해요?
                  <iframe src="http://opentutorials.org" width="90%" height="300" frameborder="1" scrolling="yes"></iframe>
                  이 테그 밑에 긴 줄이 나타나는 이유가 뭐지요?
                  실행이 되는 걸 보면 뭔가 미흡한 부분이 있지 않을 까?
                  짐작되어서 여쭈어 봅니다.
                  감사합니다.
                • Namu
                  동영상 화일로 받아 볼 수 있는 방법이 있을까요? 강의 자료가 잘 보이지 않아서 사이즈를 키워서 보고 싶은데 전체화면으로 보면 강의 text내용을 볼 수 없고.. 살짝 불편하네요.
                • 캥캥
                  2013.10.10
                • Taezzm
                  정말정말 감사합니다!! 오늘 하루종일 운영자님 강의 보면서 달리고 있습니다.

                  주제랑 살짝 다를 수도 있는 질문이 있는데요.

                  혹시 유튜브 동영상중에서 iframe 으로 불러올수 있는 영상이 있고 불러올 수 없는 동영상이 따로 있나요?

                  요소검사로 지금 이 화면에 있는 유튜브 영상 불러오는 부분만 복사해서 예제 연습하는데다가 붙여서

                  유튜브 주소만 바꿔서 Run 했는데 아무 화면도 안떠서요. ㅠㅠ
                • jyowen
                  유투브 동영상에 제목이 HTML - 아이프래임, HTML - 프래임이라 표기된것을 말하시는것 같네요^^ㅋ
                  대화보기
                  • egoing
                    제가 프래임이라는 표기를 사용하고 있었나요? 못 찾고 있습니다. :)
                    대화보기
                    • 최민호
                      "아이프래임"과 "프레임", 두 개가 왠지 어색한 동거 같습니다. 제가 알기론 "프래임"이 아닌 "프레임"이 올바른 표기가 아닌가 싶습니다. 통촉하여 주시옵소서! ^^
                    • mimiandchopa
                      너무 잘 보고 있습니다!! 감사합니다.
                    • 카제
                      잘 보고 갑니다!!!
                    • Sc.lee
                      전 editplus로 예제넣고 ctrl-b 만 치면 바로 html을 열어주니 좋군요..
                    • egoing
                      몰랐는데 확인해서 다시 인코딩해서 업로드 했습니다. 알려주셔서 감사합니다. 폭풍 피드백도 매우 감사합니다!
                      대화보기
                      • 앙칼진츄잉껌
                        잘 봤습니다^^가끔 포스팅이나 기사 글 볼 때 제일 하단에 페북 "좋아요"버튼 누르게 되어 있는 걸 종종 보곤 했는데, 그게 iFrame으로 되어 있다는 건 이번에 처음 알았네여!! 놀랬음!!ㅎㅎ
                        근데 이 챕터에서 iFrame 설명 동영상 화질이 480까지 밖에 지원이 되지 않아서 그게 살짝 아쉬웠네여;; 걍 라디오 듣듯이 좋은 목소리만 따로 들으며, 화면은 요 챕터 페이지를 봤습니당~ㅋ
                      • Jmogoon
                        잘 봤습니다.
                      • Dae Young Noh
                        Frame.html에 왜 b.html은 없는지..
                      • 동영상에 '프래임'이라 되있네요. '프레임'이 아니라.
                      • egoing
                        지금 보고 계신 사이트도 프래임을 사용하지 않고 네비게이션을 만들고 있지요. float을 주로 많이 사용하고요.
                        대화보기
                        • seungchul park
                          프레임을 이용하지 않고 네비게이션을 작성하는 방법에는 어떤것이 있나요?CSS에서 강의하신 float를 사용하는 건가요 ^^;;
                        • egoing
                          vi라는 에디터인데요. 에디터는 아무거나 쓰셔도 됩니다. ^^
                          대화보기
                          • Choco2614
                            저도 궁금합니다. 저 검은 화면의 프로그램은 홈페이지 만들때 유용한 건가요?
                          • Stargarie
                            오잉 예제 보여주시는 검은색 화면은 뭔가요? 'ㅁ'