오봉이와 함께하는 개발 블로그

문서 삽입 태그 본문

FE/HTML

문서 삽입 태그

오봉봉이 2021. 12. 2. 16:36
728x90

FrontEnd_day1 정리 (2021.12.02 목요일)

문서 삽입 태그 : <iframe> 태그

  • <iframe> 태그
    • 현재의 html 문서 내에 다른 문서 포함
    • <iframe> 태그를 만들어서 영역을 만들어 놓고 <map>의 <area>에서 target="iframe이름" 지정
    • <iframe>의 위치 설정 중요 (css로 크기, 위치 등 속성 설정)
문서 삽입 태그 예제
  • iframe.html
<!DOCTYPE html>
<html lang="en">
<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>이미지 맵</title>
    <style>
        #bigBox { margin:0 auto; width:1024px;}
        #box2 { position:absolute; margin-left:250px; top:270px;}
        iframe {width:580px; height:480px; border:none;}
    </style>
</head>
<body>
    <div id="bigBox">
        <div id="box1">
            <img src="image/메인.png" border="1" usemap="#cityMap">
            <map name="cityMap">
                <area shape="rect" coords = "60, 90, 250, 150" href="newyork.html" target="iFrameArea">
                <area shape="rect" coords = "310, 90, 500, 150" href="paris.html" target="iFrameArea">
                <area shape="rect" coords = "560, 90, 750, 150" href="roma.html" target="iFrameArea">
                <area shape="rect" coords = "810, 90, 1000, 150" href="beijing.html" target="iFrameArea">            
            </map>        
        </div>
        <div id="box2">
            <iframe name="iFrameArea"></iframe>
        </div>
    </div>
</body>
</html>
728x90
저작자표시

'FE > HTML' 카테고리의 다른 글

입력 양식 태그  (0) 2021.12.02
미디어 태그  (0) 2021.12.02
이미지 태그  (0) 2021.12.02
테이블 태그  (0) 2021.12.02
목록태그  (0) 2021.12.02
'FE/HTML' Related Articles more
Comments