HTML + CSS

이미지와 하이퍼링크 실습

H_u 2024. 4. 12. 15:36
728x90
반응형
SMALL

이미지1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>바빠 시리즈</h1>
    <!--img : 이미지 삽입-->
    <img src="images/cover2.jpg" alt="빠른연산">
</body>
</html>

 

이미지2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>이미지 크기 조절</h1>
    <img src="images/gugudan.jpg">
    <img src="images/gugudan.jpg" width="250" height="250">
</body>
</html>

 

link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <H1>텍스트 링크 만들기</H1>
    <!--a 태그에 href 속성으로 문서나 웹사이트 주소로 이동-->
    <a href="http://www.naver.com">네이버 홈페이지</a>
    <H1>이미지 링크 만들기</H1>
    <!--a 태그에 omg 태그를 사용해서 이미지로 이동-->
    <a href="http://www.naver.com">
        <img src="images/naver.jpg">
    </a>
</body>
</html>

 

child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<img src="images/git.jpg">
<br><br>
<h2>문서 지옥, 깃&허브로 하루 안에 탈출한다.</h2>
<p>1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!</p>
<p>자주 쓰는 기능을 모두 담아 한 권에 끝낸다!</p>
<p>
   
        <!-- coupang : iframe 허용됨-->
        <a href="http://www.coupang.com">
        도서 상세 보기(현재 화면에)

    </a>
</p>
<p>
    <!--target="_top => 부모 창 전체를 사용해서 이동"-->
        도서 상세 보기(전체 화면에)

    </a>
</p>
</body>
</html>

 

figcaption

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<img src="images/git.jpg">
<br><br>
<h2>문서 지옥, 깃&허브로 하루 안에 탈출한다.</h2>
<p>1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!</p>
<p>자주 쓰는 기능을 모두 담아 한 권에 끝낸다!</p>
<p>
   
        <!-- coupang : iframe 허용됨-->
        <a href="http://www.coupang.com">
        도서 상세 보기(현재 화면에)

    </a>
</p>
<p>
    <!--target="_top => 부모 창 전체를 사용해서 이동"-->
        도서 상세 보기(전체 화면에)

    </a>
</p>
</body>
</html>

 

parent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문</h1>
    <p>
        아래 화면은 iframe 태그를 이용해 외부 문서를 현재 문서에 삽입한 것입니다.
    </p>
    <br><br>
    <!--iframe : -->
    <iframe src="child.html" width="600" height="620"></iframe>
</body>
</html>

 

anchor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>앵커 만들기</h1>
    <p>
        웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
        앵커(anchor)라고 합니다.
    </p>
    <ul id="menu">
        <!--#content1 -> id="content1"로 찾아감-->
        <li><a href="#content1">메뉴1</a></li>
        <li><a href="#content2">메뉴2</a></li>
        <li><a href="#content3">메뉴3</a></li>
    </ul>
    <h2 id="content1">내용1</h2>
    <p>
        웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
        앵커(anchor)라고 합니다.
    </p>
    <p>
        웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
        앵커(anchor)라고 합니다.
    </p>
    <p>
        웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
        그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
        앵커(anchor)라고 합니다.
    </p>
    <p><a href="#menu">[메뉴로]</a></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>

 

728x90
반응형
SMALL