16강 - 아이프레임 (Iframes)

안녕하세요! 진로 상담 및 강연을 하는 월횽(박진형)입니다. 오늘은 Iframe 수업을 진행할 예정입니다. Iframe이 무엇인지, 어떻게 사용하는지 예제를 통해 살펴보겠습니다.

Iframe이란?

Iframe은 웹페이지의 HTML 코드 안에 다른 HTML 페이지를 삽입하는 방법입니다. 또 다른 HTML 프레임을 포함하는 것이기 때문에 인라인 프레임이라고도 합니다.

 

 

Iframe 사용 방법

Iframe을 사용하려면 HTML 코드에서 다음과 같이 작성합니다:

1. <iframe> 태그를 사용하여 Iframe을 열어줍니다.
2. src="" 속성에 표시할 웹 페이지의 URL을 넣습니다.
3. </iframe> 태그로 Iframe을 닫습니다.

반응형

 

예를 들어, https://jast.tistory.com/ 라는 웹 페이지를 표시하려면 다음과 같이 작성합니다.

<iframe src="https://jast.tistory.com/"></iframe>

 

- 결과물

 

 

Iframe 사이즈 조절
Iframe의 가로와 세로 사이즈를 변경하려면 width와 height 속성을 추가합니다.

예를 들어, https://jast.tistory.com/ 를 가로 100%와 세로 400px 크기로 표시하려면 다음과 같이 작성합니다:

 

 

<iframe src="http://jast.co.kr" width="100%" height="400"></iframe>

 

- 결과물

 

이처럼 Iframe을 사용하여 웹 페이지를 삽입하고, 사이즈를 조절할 수 있습니다. 수업 내용을 기억하고 복습하여 더 나은 웹 개발 실력을 키워나가세요.

오늘 수업을 통해 Iframe의 기본적인 사용 방법과 적용 예제를 배웠습니다. 남은 하루도 즐겁게 보내시길 바랍니다!