child.html

<body>
    <img src="images/git.jpg">
    <br><br>
    <h2>문서 지옥, 깃&깃허브로 하루 안에 탈출한다!</h2>
    <p>1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!</p>
    <p>자주 쓰는 기능을 모두 담아 한 권에 끝낸다!</p>
    <p><a href="<http://www.coupang.com>">도서 상세 보기(현재 화면에)</a></p>
    <p><a href="<http://www.coupang.com>" target="_top">도서 상세 보기(전체 화면에)</a></p>
</body>

20230307113842.png

parent.html

<body>
    <h1>Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문</h1>
    <p>아래 화면은 iframe태그를 이용해 외부 문서를 현재 문서에 삽입한 것입니다.</p>
    <br><br>
    <iframe src="child.html" width = "600" height ="620"></iframe>
</body>

20230307113952.png

20230307114239.png

현재 화면에 바꾼 결과

anchor.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>Document</title>
</head>
<body>
    <h1>앵커 만들기</h1>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <ul id="menu">
        <li><a href="#content1">메뉴1</a></li>

        <li><a href="#content2">메뉴2</a></li>
        <li><a href="#content3">메뉴3</a></li>

    </ul>
    
    <p><a href="#menu">[메뉴로]</a></p>
    <h2 id="content1">내용1</h2>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <h2 id="content2">내용2</h2>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    
    <p><a href="#menu">[메뉴로]</a></p>
    <h2 id="content3">내용3</h2>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다
    </p>
    <p><a href="#menu">[메뉴로]</a></p>
    

</body>
</html>

20230307120948.png

map.html

<body>
    <!-- usemap="#favorites" - > map name="favorites" 찾아감 -->
    <img src="images/kids.jpg" usemap="#favorites">
    <map name="favorites">
        <!-- area: 이미지 영역을 정함 -->
        <!-- shape 속성: 영역의 모양을 정함 -->
        <!-- coords="10,10,160,200" -> x,y 좌표(10,10),(160,200) 을 꼭지점으로 함 -->
        <area shape="rect" coords="10,10,160,200" 
        href="<http://cafe.daum.net/originalbook>" target="_blank">
        <area shape="rect" coords="220,10,380,200" 
        href="<http://www.facebook.com/englishshow.co.kr>" target="_blank">
        <!-- 하나의 이미지로 2개의 사이트를 이동 -->
    </map>
</body>