html iframe 태그로 인라인 프레임 사용하기

네 안녕하세요, 이번 포스팅에서는 html에서 인라인 프레임을 만드는 방법에 대하여 알아보도록 하겠습니다..

인라인 프레임이란 페이지 내에 있는 또 다른 창, 다시 말하면 페이지 안에 내장이 된 창을 이야기합니다.

그래서 한 페이지 안에서 두 개 이상의 웹페이지를 새 창을 띄우는 거 없이 동시에 볼 수 있습니다.

그리고 이번 시간에는 이러한 것을 어떤 식으로 사용하는지 알아볼 겁니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 인라인 프레임 만들기 : iframe 태그 사용

인라인 프레임을 만드는 형식은 이러합니다.

<iframe src="url" srcdoc="html 문서 텍스트" name="윈도우명" width="프레임의 폭" height="프레임의 높이">
내용
</iframe>

<!--
src : 출력할 웹 페이지의 url 주소
srcdoc : 직접 html 태그로 작성된 텍스트로서 출력될 내용
name : 프레임 윈도우의 이름, 다른 웹 페이지에서 target 속성 값으로 사용을 함
width : 프레임의 폭, 픽셀 값, 디폴트값(기본값) = 300
height : 프레임의 높이, 픽셀 값, 디폴트 = 300
-->

이런 식으로 작성이 됩니다.

url 주소를 따서 가져올 수도 있고, html에 작성된 텍스트로 출력이 될 내용을 가져올 수도 있고,

윈도의 이름 지정이나 사이즈 조절 역시 다 가능하답니다.

그럼 간단한 예제 코드로 같이 알아보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe을 가지는 웹 페이지</title>
</head>
<body>
    <h3>2 개의 &lt; iframe&gt; 를 가집니다.</h3>
    <hr>
    <iframe src="iframe1.html" width="200" height="150"></iframe>
    <iframe src="iframe2.html" width="200" height="100"></iframe>
</body>
</html>

이런 식으로 작성을 할 수 있습니다.

보통 url을 가져오고 너비를 설정을 하는 것 정도로 끝을 내곤 합니다.

그리고 여기서 주의해야 할 사항이 하나 있다면,

현재 쓴 코드는 메인 코드이기 때문에 인라인 프레임의 전체적인 틀을 짠 거고,

여기에 두 개의 인라인 프레임이 존재하므로

2개의 인라인 프레임에 대하여 작성이 된 코드를 가져와야 제대로 작동이 됩니다.

그럼 바로 인라인 프레임들에 대한 예제 코드도 같이 살펴볼까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe을 가지는 웹 페이지</title>
</head>
<body>
    <title>두번째 iframe</title>
    <h4>두번째 iframe</h4>
</body>
</html>

각각 첫 번째, 두 번째 인라인 프레임에 대한 예제 코드예요.

이런 식으로 작성을 한 파일이 존재를 해야만 인라인 프레임이 보입니다.

그럼 결과 화면을 함께 보실까요?

이런 식으로 2개의 html 페이지를 가져와서 인라인 프레임으로 붙여 넣으면 이런 식의 창이 생깁니다.

그리고 여기서도 메인 파일과 서브 파일이 같은 폴더 상에 위치해 있어야만 저렇게 뜬다는 것을 꼭 기억하셔야 합니다.

그래서 이걸 활용을 하면 이런 식으로 할 수 있습니다.

우리가 한 번에 두 가지 이상의 것을 확인하며 멀티태스킹을 해야 하는 상황일 때 사용하면

한 창에서 두 가지를 동시에 볼 수 있어서 유용합니다.

2. 브라우저 윈도와 인라인 프레임 윈도의 계층 관계

인라인 프레임을 만들어서 생성한 html 페이지 내에서 보면

브라우저 창 안에 인라인 프레임 창이 있는 걸 확인할 수 있습니다.

다시 말하면 이 둘 사이는 부모 자식 관계가 형성이 되어있단 뜻이기도 합니다.

누가 누굴 종속하고 있느냐에 따라 부모와 자식이 결정이 되며,

통상 브라우저 창이 부모, 그리고 그 안에 있는 인라인 프레임 창이 자식이 됩니다.

이와 관련된 용어들이 있는데, top이라 하면 최상위 계층의 브라우저 윈도를 뜻하고,

parent라고 하면 부모 윈도,

child라 하면 자식 윈도를 의미합니다.

그러면 예제를 통하여 같이 확인해 볼까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>브라우저 윈도우_top</title>
</head>
<body>
    <h3>2 개의 &lt;iframe&gt; 윈도우를 가집니다</h3>
    <hr>
    <iframe src="leftframe.html" name="left" width="100" height="500"></iframe>
    <iframe src="rightframe.html" name="right" width="400" height="500"></iframe>
</body>
</html>

이건 top이라고 제목을 붙인 걸 보시면 브라우저 창이라는 것을 아실 수 있을 겁니다.

이제 여기에 들어가는 인라인 프레임에 대한 html 페이지를 만드는 코드도 같이 보여드리겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>right iframe</title>
</head>
<body>
    <h4>right iframe</h4>
    <hr>
    <iframe src="http://www.etnews.com" name="upper" width="100%" height="200"></iframe>
    <iframe src="http://www.mk.co.kr" name="lower" width="100%" height="200"></iframe>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>left iframe</title>
</head>
<body>
    <h3>left iframe</h3>
    <hr>
    이곳은 왼쪽 인라인 프레임입니다.
    메뉴를 다는 용도로 많이 사용하지요.
</body>
</html>

각각의 코드는 오른쪽 인라인 프레임과 왼쪽 인라인 프레임에 대한 코드입니다.

이렇게 하면 전자뉴스가 있는 창이 존재하는 오른쪽 인라인 프레임이 생기고,

동시에 설명란이 있는 왼쪽 인라인 프레임이 형성이 됩니다.

그럼 결과 화면을 통해 같이 보실까요?

이런 식으로 top 윈도인 브라우저 창 안에서 두 가지 일을 동시에 할 수 있게 됩니다.

이런 식으로 한 창에 독립적인 여러 개의 웹 페이지를 구성하고자 할 때 주로 iframe 태그를 씁니다.

여기까지 인라인 프레임을 넣는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 target 속성에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > html' 카테고리의 다른 글

html video 태그와 audio 태그, source 태그로 미디어 삽입하기 (0)	2023.03.02
html target 속성에 대하여 알아보기 (0)	2023.03.02
html a 태그로 하이퍼링크(하이퍼텍스트, 하이퍼미디어)와 다운로드 링크 만들기 (0)	2023.03.02
html 고급 문서 만들기 3 - table 태그로 표 만들기 (0)	2023.03.01
html 고급 문서 만들기 2 - ol, ul, dl 태그로 리스트 만들기 (0)	2023.03.01

개발러 L의 뻔fun한 코딩

html iframe 태그로 인라인 프레임 사용하기