HTML&CSS

링크 & 이미지

yunajoe 2022. 9. 23. 09:12

링크 

# 폴더구조 

index.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>indexPage</h1>
    <h2>인덱스페이지</h2>
    <a href="folder1/page1.html">page1로가기</a>
    <a href="folder1/folder2/page2.html">page2로가기</a>
    <a href="folder1/folder2/page3.html">page3로가기</a>
</body>
</html>

page1.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>page1</h1>
   <h2>페이지1</h2>
   <a href="folder2/page2.html">page2로가기</a>
   <a href="folder2/page3.html">page3로가기</a> 
   <a href="../index.html">indexPage로가기</a> 
</body>
</html>

page2.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>page2</h1>
    <h2>페이지2</h2>
    <a href="page3.html">page3로가기</a>
    <a href="../page1.html">page1로가기</a>
    <a href="../../index.html">index페이지로가기</a>
</body>
</html>

page3.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>page3</h1>
    <h2>페이지3</h2>
    <a href="page2.html">page2로가기</a>
    <a href="../page1.html">page1로가기</a> 
    <a href="../../index.html">index페이지로가기</a>
</body>
</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>
    <img src="../../images/daisy.jpg" width="300">
</body>
</html>

사이즈 설정 

1. 픽셀(px) 

2. 퍼센트(%)

 

# 실습

<!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>ZICO</title>
</head>
<body>
    <h1>우지호당</h1>
    <img src="./images/zico.jpg" width="150" height="150">
    <p>I love the every song released by <b>ZICO</b> He is so <i>cool</i></p>
    <a href="https://namu.wiki/w/%EC%A7%80%EC%BD%94" target="_blank">wanted to know more about him?! click me!</a>
</body>
</html>