이 포스트는 HTML의 <base> 태그에 관한 내용입니다.
<base> 태그는 HTML5 표준이 정해지기 전에도 이미 표준으로 정해져 있는 태그입니다. 이 태그는 <head> … </head> 안에 쓰여 마치 <meta> 태그와 같이 작동하는 태그로, 페이지의 링크가 상대경로로 되었을 때 그 기준이 될 경로를 지정하고 다른 페이지로 링크할 때 기본적으로 그 링크의 대상이 되는 창 혹은 프레임을 어디로 할 것인가를 지정합니다. 이 태그는 필수적인 것은 아니지만 상대경로로 링크를 걸 상황이거나 페이지를 새 창으로 여는 링크를 많이 걸어야 할 상황 등에 편리하게 쓸 수 있습니다.
다음 HTML 문서의 코드를 봅시다.
<!DOCTYPE html> <html> <head> <base href="https://pjw48.net/portfolio/jwa2/" target="_blank" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Base tag Sample</title> </head> <body> <h1>Base tag Sample</h1> <p><img src="images/cov_awakening.jpg" alt="THE AWAKENING" /></p> <p><a href=".">Go to main</a></p> <p><a href="https://www.google.com/">https://www.google.com/</a></p> </body> </html>
여기서 4번 줄과 5번 줄이 <base> 태그를 사용한 부분입니다. 편의상 태그를 두 줄에 나눠서 기술하였습니다.
- href
- 상대경로의 기준이 될 경로를 지정합니다. 이는 <a>나 <img> 등 URL 링크를 사용하는 모든 태그에 적용됩니다. <link>나 <script> 등의 태그를 사용하여 외부 코드를 불러들이는 경우에도 마찬가지로 적용됩니다. 기본값은 웹 페이지가 위치한 경로입니다.
- target
- 링크의 대상이 되는 창이나 프레임 이름을 별도로 지정하지 않았을 때 기본적으로 적용될 창이나 프레임 이름을 지정합니다. 기본값은 _self입니다.
<base> 태그는 <head> … </head> 안의 여러 메타 태그들 중 가장 먼저 쓰는 것을 권장합니다. 또한, <base> 태그는 하나의 웹 페이지에 단 한 번씩만 사용할 수 있습니다.
이 예제같은 경우 상대경로의 기준경로는 “https://pjw48.net/portfolio/jwa2/”이고 다른 웹 페이지를 열 때 대상이 되는 프레임 이름을 지정하지 않으면 새로운 창 혹은 새로운 탭(_blank)에서 열리게 됩니다.
12번 줄에서는 URL이 “images/cov_awakening.jpg”인 이미지를 표시합니다. 이 URL이 상대경로이므로 4번 줄에서 지정된 기준경로에 따라 절대경로로 변환하여 그 절대경로에 위치한 이미지를 표시합니다. 즉, 이 예제에서는 기준경로가 “https://pjw48.net/portfolio/jwa2/”이므로 상대경로인 “images/cov_awakening.jpg”와 조합한 절대경로는 “https://pjw48.net/portfolio/jwa2/images/cov_awakening.jpg”가 됩니다.
13번 줄에서는 링크 URL이 “.”으로 되어 있고 대상 프레임이 지정되어 있지 않습니다. 이 경우 4번 줄에서 지정된 기준경로를 절대경로로 하여 “https://pjw48.net/portfolio/jwa2/”로 링크하게 됩니다. 또한, 5번 줄에서 대상 프레임의 기본값을 “_blank”로 지정하였기 때문에 새로운 창에서 링크가 열리게 됩니다. 14번 줄 역시 마찬가지로 구글이 새로운 창에서 열립니다.
샘플 링크는 다음과 같습니다. 요소 검사 등으로 이미지의 URL을 확인해 보거나 링크를 클릭하여 새 창으로 열리는 것을 확인해 보시면 됩니다.
https://pjw48.net/samp/base_tag_sample.html
이와 같이 <base> 태그를 잘 활용하면 웹 페이지를 만들 때 편리하게 만들 수 있습니다.
참고: 이와 비슷한 역할을 하는 태그로 <basefont> 태그가 있었습니다. 웹 페이지의 기본 글꼴을 지정하는 태그였으나 CSS로 인해 사용할 필요성이 없어지게 되어 현재는 지원하지 않는 태그입니다.
다른 글 여러 검색하다가 예제가 이해하는데 많이 도움이 되었습니다. 감사합니다.