본문으로 건너뛰기
실습하기

iframe 태그

iframe 태그는 웹 페이지 내에 다른 웹 페이지를 표시하는 태그입니다.


iframe 태그 예시
<iframe src="https://example.com" width="500" height="300"></iframe>

이 코드를 사용하면 example.com 웹 페이지가 현재 페이지의 500x300 크기의 영역 안에 표시됩니다.


iframe 태그 주요 속성​

src​

  • src 속성은 임베드할 웹 페이지의 URL을 지정합니다.

  • 코드 예시:

    iframe src 속성 예시
    <iframe src="https://example.com"></iframe>

width & height​

  • width와 height 속성은 iframe의 크기를 지정합니다.

  • 코드 예시:

    iframe width & height 속성 예시
    <iframe src="https://example.com" width="400" height="250"></iframe>

frameborder​

  • frameborder 속성은 iframe 주변의 테두리 유무를 지정합니다. 다만, 최신 웹 브라우저는 더 이상 이 속성을 사용하는 것을 권장하지 않고, CSS의 border 속성을 사용하시는 것을 권장합니다.

  • 코드 예시:

    iframe frameborder 속성 예시
    <!-- 구식 방법 -->
    <iframe src="https://example.com" frameborder="0"></iframe>

    <!-- 권장하는 방법 -->
    <iframe src="https://example.com" style="border: none;"></iframe>

어떻게 사용하나요?​

iframe 태그는 동영상(예: 유튜브), 지도(예: 구글지도), 외부 웹사이트 등을 웹 페이지 안에 포함시킬 때 주로 사용합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!