실습문제3A-4.pdf

<body>
    <h1>책 목록 만들기</h1>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 
        이 기능을 앵커(anchor)라고 한다</p>

    <ul id="menu">
        <li><a href="#book1">책1</a></li>
        <li> <a href="#book2">책2</a></li>
        <li> <a href="#book3">책3</a></li>
    </ul>
    <h2 id="book1">책1</h2>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p ><a href="#menu">[목록으로]</a></p>

    <h2 id="book2">책2</h2>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p><a href="#menu">[목록으로]</a></p>

    <h2 id="book3">책3</h2>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p>책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1책이 목록을 만듭니다.1</p>
    <p><a href="#menu">[목록으로]</a></p>
</body>

20230309111929.png

실습문제3A-5.pdf

<body>
    <img src="fantasy.jpg" usemap="#fantasic">
    <map name="fantasic">
        <area shape = "rect" coords="70,150,150,20"
        href = "<https://www.google.com/>" target="_blank">

        <area shape = "rect" coords="150,200,200,150"
        href = "<https://www.microsoft.com/ko-kr>" target="_blank">
    </map>
</body>

20230309120958.png

열기구를 누르면 구글, 배를 누르면 마이크로 소프트 홈페이지로 이동한다