-
링크
# 폴더구조
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>
'HTML&CSS' 카테고리의 다른 글
text스타일링 (0) 2022.10.02 div태그 (0) 2022.10.02 class & Id (0) 2022.09.26 CSS 적용하는 방법 (0) 2022.09.23 HTML태그정리 (0) 2022.09.23