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>