220914_html_국비

iframe(인라인 프레임)

현재 html페이지 내에 내장 윈도우를 생성하고 다른 html페이지 출력 가능
<iframe>태그에 의해 생성되는 윈도우를 Inline Frame(인라인 프레임)이라고 함
형식
<iframe
src="url"
srcdoc="HTML 문서 텍스트"
name="window_name"
width="넓이"
height="높이">
ifram 태그를 다루지 않는 브라우저 대신 출력되는 텍스트
</iframe>

iframe1.html 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ifram.1</title>
</head>
<body>
    <h4>첫번째 iframe</h4>
    <h4>첫번째 iframe</h4>
    <h4>첫번째 iframe</h4>
    <h4>첫번째 iframe</h4>
    <h4>첫번째 iframe</h4>
</body>
</html>

iframe2.html 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe.2</title>
</head>
<body>
    <h4>두번째 iframe</h4>
    <h4>두번째 iframe</h4>
    <h4>두번째 iframe</h4>
    <h4>두번째 iframe</h4>
</body>
</html>

2개의 iframe을 가지고 있는 html 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ifram을 가지는 웹페이지</title>
</head>
<body>
    <h3>2개의 &lt; iframe &gt;</h3>
    <hr>
    <iframe src="iframe1.html" width="200" height="150" frameborder="0">
    </iframe>&nbsp;&nbsp;&nbsp;
    <iframe src="iframe2.html" width="200" height="100" frameborder="0">
    </iframe>
</body>
</html>

↓결과

leftframe.html 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>leftframe</title>
</head>
<body>
    <h4>left frame</h4>
    <h4>left frame</h4>
    <h4>left frame</h4>
    <hr>
    왼쪽 인라인 프레임으로써 메뉴를 생성하는 용도로 쓰임
</body>
</html>

rightframe.html 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rightframe</title>
</head>
<body>
    <h4>right frame</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>

2개의 iframe을 가지고 있는 html 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>브라우저 윈도우(top)</title>
</head>
<body>
    <h3>2개의  &lt; iframe &gt;</h3>
    <hr>
    <iframe src="leftframe.html" name="left" width="300" height="500" ></iframe>&nbsp;&nbsp;
    <iframe src="rightframe.html" name="right" width="700" height="500"></iframe> &nbsp;&nbsp;

</body>
</html>

↓결과

painting1.html생성)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>마네의 그림</title>
</head>

<body>
    <img src="../images/painting1.jpg" vspace="10" hspace="10"><br>
    부인 카미유의 초상화와 마찬가지로 <br>
    옆으로 서 있는 모습으로 치마를 길게 늘어뜨려, <br>
    동작이 있는 어떤 한 순간을 그려 놓았다. <br>
    마네류의 매우 폭넓은 색면에 의한 형태를 포착하고 있는 이 그림은 <br>
    부인의 얼굴보다는 의상의 성질이나 광택의 효과를 더 노르고 있어 보인다. <br>
</body>

</html>

painting2.html 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마네의 그림 2</title>    
</head>
<body>
    <img src="../images/painting2.jpg" vspace="10" hspace="10"><br>
    <pre>
    1866년 여름, 모네가 카미유와 함께 살고 있던 집 마당에서 
    카미유를 모델로 해서 그린 작품이다.
    </pre>
</body>
</html>

2개의 iframe을 가지고 있는 html 생성)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ifram Test 3</title>
</head>

<body leftmargin="0" topmargin="0">
    <img src="../images/titleframe2.gif" >

    <iframe src="painting1.html" width="500" height="400" scrolling="auto" name="con">
        iframe이 지원되지 않는 웹브라우저 입니다
    </iframe>
    <p>
        <a href="painting2.html" target="con" >
            <img src="../images/next.gif" alt="">
           
        </a>
        <a href="painting1.html" target="con" >
          <img src="../images/next1.gif" alt="">
         </a>
    </p>

</body>

</html>

↓결과

news1.html 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사이트 리스트</title>
</head>
<body>
    <h4>사이트 리스트</h4>
    <ul>
        <li><a href="http://www.sportsseoul.com" target="right">sportsseoul</a></li>
        <li><a href="http://www.etnews.com" target="_self">전자신문</a></li>
        <li><a href="http://www.mk.co.kr" target="_top">매일경제신문</a></li>
        <li><a href="http://www.w3c.org" target="_blank">새 창 w3c</a></li>
    </ul>
</body>
</html>

target
1. _self : 연결 문서를 클릭한 창에서 염(기본값)

2. _blank : 연결 문서를 새창에서 염

3. _top : 가상 상위 창에서 염(프레임을 무시하며, 전체 브라우저 창에서 작동, 부모가 없으면 _self처럼 작동)

4.frame name : 지정된 프레임안에서 염

iframe 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target 속성활용</title>
</head>
<body>
    <h3>target 속성활용</h3>

    <hr>
    <iframe src="news1.html" name="left" width="250" height="500" frameborder="0"></iframe>
    <iframe src="http://www.w3c.org" name="right" width="250" height="500" frameborder="0"></iframe>
</body>
</html>

↓결과

'UI > html' 카테고리의 다른 글

220913_html_국비_DETAILS, SUMMARY/ FORM (0)	2022.09.13
220908_html_국비_TABLE/MARQUEE/A/MAP (0)	2022.09.08
220907_html_국비_Hyper Link/Table (0)	2022.09.07
220906_HTML_Block Tag/Inline Tag/img/UL/OL/DL (0)	2022.09.06

coing-daily

220914_html_국비_iframe

iframe(인라인 프레임)

'UI > html' 카테고리의 다른 글

티스토리툴바

220914_html_국비_iframe

iframe(인라인 프레임)

'UI > html' 카테고리의 다른 글

'UI/html' Related Articles

티스토리툴바