[HTML] Linking to Relative Page

안녕하세요. 동기 여러분! 오늘은 한 폴더에 있는 웹 페이지들을 링크하는 방법에 대해 알아봅시다!

 

Linking to Relative Page

웹 페이지를 만들 때, 여러 페이지들을 한 폴더에 넣어 놓고 쓰는 경우가 있는데 이럴 때 쓰는 방법입니다. (참고로 이 한 폴더를 root directory 루트 디렉터리라고 합니다.) 

 

---

 

 

사용방법

<a href= "./파일이름"> 클릭할 문구 </a>

"./파일이름" 은 relative path(상대 경로)인데, 로컬 파일(루트 디렉터리)의 경로를 컴퓨터에게 알려주는 아주 귀엽고 깜찍한 친구입니다.

 

이와 반대로 "https://www.사이트이름.com"(a Full URL)은 absolute path(절대 경로)인데, 다른 폴더에 저장된 링크를 가져오려는 경우 사용하는 아주 똑똑한 친구입니다. 

 

---

 

예

Diablo 2 폴더

 - main.html

 - classes.html

 - monsters.html

 - items.html

 

비주얼 스튜디오 코드를 사용해서 Diablo 2 폴더와 그 안에 네 파일을 만들어 봤습니다.

 

 

 

 

가장 중요한 main.html 파일에 코드를 써주고

 

 

classes.html 파일에 코드를 써주고

 

 

 

monsters.html에도 코드를 써주고

 

 

 

 

마지막으로 items.html에 코드를 써줍니다.

 

 

 

 

자 그럼 잘 작동하는지 Live Server를 켜서 확인해봅시다!!!

main.html의 모습입니다.

 

 

 

직업을 눌러보았습니다.

맨땅엔 팔라딘이나 소서가 건강에 이롭습니다.

 

 

 

아이템을 눌러보았습니다.

 

 

 

몬스터를 눌러보았습니다.

 

아주 잘 작동하네요!!!

 

---

 

오늘의 느낌

HTML도 슬슬 어려워지는 느낌적인 느낌 ㅎㅎㅎ