HTML 요소로 문서 기본 URL 지정

웹 사이트는 이미지 및 스타일 시트와 같은 페이지 및 소스를 가리키는 일련의 링크로 만들어집니다. 다음 두 가지 방법으로 이 출처에 링크 된 URL을 지정하십시오: 절대 경로 또는 상대 경로를 사용하십시오..

절대 경로는 특정 대상을 말하며 일반적으로 도메인 이름 (HTTP와 함께)으로 시작됩니다. www.domain.com/destination/source.jpg. 상대 경로는 반대입니다. 링크 대상은 루트 위치 또는 대부분의 경우 웹 사이트의 도메인 이름에 따라 다릅니다..

일반적인 상대 경로는 다음과 같습니다.

귀하의 웹 사이트 도메인이 예를 들어, hongkiat.com 이미지 경로가 hongkiat.comimages_2 / specify-document-base-url-with-html-base-element.png. 당신이 잠시 동안 웹 사이트를 개발했다면 이것을 이해해야합니다..

하지만 대부분의 사람들은 요소. 이 HTML 태그는 HTML4부터 사용되었지만 아직까지는 구현이 거의 보이지 않습니다. W3C는이 요소를 다음과 같이 설명한다.

“기본 요소는 작성자가 문서 기본 URL 상대 URL을 해결할 목적으로 기본 브라우징 컨텍스트 하이퍼 링크를 따르기 위해.”

이 요소는 기본적으로 웹 페이지의 상대 경로에 대한 기본 URL을 결정합니다. 루트 위치 나 웹 사이트의 도메인에 의존하는 대신 리소스가 CDN (Content Delivery Network)에있는 URL과 같은 다른 위치를 가리킬 수 있습니다. 그것이 실제로 어떻게 작동하는지 보자..

기본 요소 사용

그만큼 의 측면을 따라 정의된다. 과 태그 안에 . 다음 예제에서 기본 URL을 Google로 설정했습니다..

이 명세는 문서 내에있는 모든 경로에 영향을 미칠 것입니다. href 속성과 src 이미지의. 따라서 문서의 스타일 시트, 이미지 및 링크가 다음과 같은 상대 경로로 설정되어 있다고 가정합니다.

  앵커 링크  

우리 웹 페이지가 demo.hongkiat.com 상대 경로는 다음을 참조합니다. hongkiat.maxcdn.com, 에 지정된 기본 경로를 따라 꼬리표. 링크 위로 마우스를 가져 가면 브라우저에서 경로가 정확히 어디로 향하는지를 보여줍니다..

모든 상대 경로는 결국 다음과 같습니다.

  앵커 링크  

기본 링크 대상 설정

기본 URL을 정의하는 것 외에도 태그를 통해 기본 링크 타겟을 설정할 수도 있습니다. 목표 속성. 문서의 모든 링크를 열려고한다고 가정 해 보겠습니다. 브라우저의 새 탭에서, 설정 목표 와 _공백, 그렇게.

제한 사항

그만큼 태그는 몇 가지 상황에서 몇 가지주의 사항이 있습니다.

첫째, 브라우저 지원은 훌륭합니다. 그것은 IE6에서 작동합니다. 하지만 IE6에서는 닫는 태그가 필요하다고 생각합니다. . 종결 태그가 지정되지 않은 채로 있으면 문서에서 계층 구조 문제가 발생할 수 있습니다. 이 문제를 해결할 수있는 간단한 방법은 코멘트 내에서 닫기, .

사용중인 경우 # 와 함께 문서 내의 섹션에 링크하려면 Internet Explorer 9에서 문제가 발생할 수 있습니다. 참조 된 섹션으로 이동하는 대신 Internet Explorer 9에서 페이지를 다시로드합니다.

또한, 블랭크 href 페이지가있는 현재 디렉토리에 링크하는 대신 기본 URL이됩니다 (기본 브라우저 동작 임). 이로 인해 예기치 않은 참조 문제가 발생할 수 있습니다.

마무리

그만큼 는 웹 문서에서 링크 참조를 단순화 할 수있는 편리한 HTML 기능입니다. 함정을 최소화하려면 태그를 적절히 사용하십시오. 자세한 내용은 아래 참조를 따르십시오. 꼬리표:

• 절대 및 상대 URL - MSDN
• HTML 기본 요소 - W3C