티스토리 뷰

수업/└HTML&CSS

[HTML]공간 분할 태그 <iframe>

onlyun 2022. 1. 2. 14:31

 

하나의 웹 문서 안에 또 다른 웹 문서를 표시할 때,

공간 분할 태그 <iframe>

 

ex) 실습 예제

링크가 걸린 [ 동물의 숲 ], [ 쿠키런 ], [ 놀러와 마이홈 ]을 클릭하면

링크 걸린 내용이 iframe 태그에 표시되도록 만든 것.

 

소스 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe example</title>
</head>
<body>
    <header></header>
    <nav>
        <a href="aniForest.html" target="if_a">동물의 숲</a> &nbsp;
        <a href="cookie.html" target="if_a">쿠키런</a> &nbsp;
        <a href="myhome.html" target="if_a">놀러와 마이홈</a><br/><br/>
    </nav>
    <section>
        <iframe src="basic.html" name="if_a" width="350" height="300" border="1"></iframe>
        <iframe src="basic.html" name="if_b" width="350" height="300" border="1"></iframe>
    </section>
    <footer></footer>
</body>
</html>

*각 동물의 숲, 쿠키런, 놀러와 마이홈에 대해 설명이 적힌 html 문서를 작성.

그 파일들을 각각 <a> 태그로 연결했고 iframe에 표시되도록 설정한 것.

 

*HTML5에서 border 속성은 지원하지 않으나 iframe 크기가 보이도록 하기 위해서 지정해두었음.

 

 

 

 

 

 

저작자표시

'수업 > └HTML&CSS' 카테고리의 다른 글

[CSS]선택자_기본 선택자, 가상 선택자  (0) 2022.01.02
[CSS]기본 이론  (0) 2022.01.02
[HTML]공간 분할 태그_<div>, <span>  (0) 2022.01.02
[HTML]입력양식_<input>  (0) 2022.01.02
[HTML]입력양식_<fieldset>, <legend>  (0) 2022.01.02
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함