[HTML] 상대 경로 & 절대 경로

상대 경로 & 절대 경로를 사용할 수 있는 HTML 태그들은 다른 리소스를 불러오거나 참조하는 태그들이다.

페이지 이동 : <a>, <link>, <iframe>
멀티미디어 : <img>, <audio>, <video>, <source>
스크립트 관련 : <script>
폼 관련 : <form>, <input>

필요할 때마다 상대 경로와 절대 경로를 잘 활용하면 된다.

 

상대 경로 (Relative URL)

href="www.naver.com"처럼 scheme(프로토콜, 예 : https://)이 없는 URL을 작성하면, 브라우저는 해당 URL을 현재 문서의 경로를 기준으로 해석한다.
예를 들어, 현재 페이지가 https://www.example.com/page.html이라면,
href="www.naver.com" -> https://www.example.com/www.naver.com 처럼 변환되어 엉뚱한 주소로 이동한다.

 

절대 경로 (Absolute URL)

href="https://www.naver.com"처럼 http:// 또는 https://를 포함한 주소는 절대 경로이다.
절대 경로는 현재 문서의 위치와 관계없이 항상 지정된 주소로 이동한다.
그래서 href="https://www.naver.com"으로 변경했을 때, 정상적으로 네이버 홈페이지가 열리는 것이다.

 

추가 설명 : //만 사용하는 경우

href="//www.naver.com"처럼 앞에 //만 붙이면, 현재 페이지의 프로토콜(http 또는 https)을 따라간다.
예 : 현재 페이지가 https://www.example.com/page.html이라면, href="//www.naver.com" -> https://www.naver.com
예 :  현재 페이지가 http://www.example.com/page.html이라면, href="//www.naver.com" -> http://www.naver.com
주로 프로토콜을 자동으로 맞추고 싶을 때 사용한다.

 

결론

href="이 부분에"

www.naver.com만 쓰면 상대 경로로 처리돼서 엉뚱한 경로가 나온다.
https://www.naver.com처럼 프로토콜을 포함하면 절대 경로가 되어 정확한 사이트로 이동한다.
//www.naver.com은 현재 페이지의 프로토콜을 따라가는 절대 경로 방식이다. 

 

https:// 또는 http://를 명시하는 것이 더 명확하고 안전한 방법이다.