웹 Web/HTML & CSS & Javascript

기초 코드2 - 이미지, 링크

하나비 HANABI 2022. 1. 12. 12:21

이미지 활용

이미지를 다운받아서 c드라이브의 html 폴더에 넣기

 

a하고 탭 누르면 링크 삽입용 코드 자동 완성

img 하고 탭 누르면 이미지 삽입용 코드 자동완성

<img src="강태현.jpg" alt=""> //이미지 나타나기

<h2><a href="https://naver.com"><img src="강태현.jpg" alt=""></a></h2> <br> //이미지에 링크 삽입

<h2><a href="https://naver.com">네이버</a></h2> <br> //네이버 글씨에 링크 삽입

이 코드를 활용해서 아래처럼 구현해보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color: beige;
            font-family: fantasy;
        }
        a{
            border-radius: 30px;
            background-color: aqua;
            border: 2px red solid;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>반가워요</h1>
    <h2><a href="https://naver.com">네이버</a></h2> <br>
    <h2><a href="https://naver.com">네이버</a></h2> <br>
    <img src="강태현.jpg" alt="">
</body>
</html>


<br>은 줄바꿈

 

페이지 안에 페이지

index2.html로 새파일 생성하여 미리보기에 index1.html 띄우기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        iframe{
            margin-right: 20px;
        }
        ol> li {
            display: inline;
            margin: 20px;
            font-size: 20px;
            background: yellow;
            padding: 5px;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <h1>홈페이지</h1>
    <ol>
        <li><a href="index.html" target="ifr"> html5(css)</a></li>
        <li><a href="#"> jsp(css)</a></li>
        <li><a href="#"> spring(css)</a></li>
        <li><a href="#"> board(css)</a></li>

    </ol>
    <div>
        <iframe name ="ifr" width=600 height=600 border=1>
            
        </iframe>
    </div>
</body>
</html>

 

링크 삽입된 글자에 커서를 갖다대면 글씨효과 바뀌기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        iframe{
            margin-right: 20px;
        }
        ol> li {
            display: inline;
            margin: 15px;
            font-size: 15px;
            background: yellow;
            padding: 5px;
            border: 3px solid blue;
        }
        a:hover{
            background-color: coral;
            font-weight: bold;
            color: white;
            font-style: italic;
        }
        a:link{
            text-decoration: none;
            letter-spacing: 2px
        }
    </style>
</head>
<body>
    <h1>홈페이지</h1>
    <ol>
        <li><a href="index.html" target="ifr"> html5(css)</a></li>
        <li><a href="#"> jsp(css)</a></li>
        <li><a href="#"> spring(css)</a></li>
        <li><a href="#"> board(css)</a></li>

    </ol>
    <div>
        <iframe name ="ifr" width=600 height=600 border=1>
            
        </iframe>
    </div>
</body>
</html>