라이브 서버는 저장한 내용이 바로바로 확인가능하다.
<!DOCTYPE html>
<html lang="ko">
<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>honeyricecake</title>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script>
</head>
<body>
<!-- hypertext reference 다른 페이지로 이동하는 참조가 되는 경로를 입력 -->
<a href="https://naver.com">NAVER</a>
</body>
</html>a태그는 a태그 내부의 특정한 글자, 내용을 클릭하면 href에 명시되어 있는 링크로 이동한다.
<!DOCTYPE html>
<html lang="ko">
<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>honeyricecake</title>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script>
</head>
<body>
<!-- hypertext reference 다른 페이지로 이동하는 참조가 되는 경로를 입력 -->
<a href="https://naver.com">NAVER</a>
<a href="/about/about.html">About</a>
</body>
</html><a href="/about/about.html">About</a> 이렇게 하면 About버튼을 누르면 about.html문서가 열리게 된다.
이 때 about.html을 index.html로 바꾸면 브라우저는 어떤 폴더에 접근하면 자동으로 그 경로의 index.html을 찾으므로 위의 코드를 다음과 같이 바꾸어도 된다.
<a href="/about">About</a>
그리고 About폴더의 index.html을
<!DOCTYPE html>
<html lang="ko">
<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>
<a href="/">Home</a>
About!!
</body>
</html>이렇게 수정하면 Home버튼을 누르면 루트 경로의 index.html로 이동한다.
(프로젝트 내에서 루트 경로는 프로젝트의 최상위 폴더)
이렇게 하면 About 폴더 내에 images나 css, js등의 폴더를 만들어 About폴더의 index.html 을 따로 관리해줄 수 있다.
그런데 이렇게 / 로 끝난다고 해서 이걸 폴더라고 볼 수는 없는게 이는 Router라는 기술로도 똑같이 구현할 수 있다. (들어만 두자)
<!DOCTYPE html>
<html lang="ko">
<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>honeyricecake</title>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script>
</head>
<body>
<!-- hypertext reference 다른 페이지로 이동하는 참조가 되는 경로를 입력 -->
<a href="https://naver.com">NAVER</a>
<a href="/about">About</a>
<a href="login">Login</a>
</body>
</html>프로젝트 폴더에 login폴더를 하나 더 만들어 index.html을 하나 더 만들었는데
<a href="login">Login</a>
가 작동하는 이유는 맨앞의 /를 생략시 상대경로로 인식하고
상대 경로에서 login폴더로 이동하면 index.html을 자동으로 먼저 찾기 때문이다.
