HTML <base> 태그는 어떤 상황에서 활용할수 있을까?

질문 : HTML에 대한 권장 사항은 무엇입니까? 꼬리표?

---

이전에 실제로 사용 된 <base> HTML 태그를 본 적이 없습니다. 내가 그것을 피해야한다는 것을 의미하는 사용에 함정이 있습니까?

내 사이트의 링크를 단순화하는 데 유용한 응용 프로그램이있는 것처럼 보이지만 최신 프로덕션 사이트 (또는 다른 사이트)에서 사용중인 것을 본 적이 없다는 사실이 저를 걱정스럽게 만듭니다.

몇 주 동안 기본 태그를 사용한 후 기본 태그를 사용하여 처음 나타나는 것보다 훨씬 덜 바람직하게 만드는 몇 가지 주요 문제를 발견했습니다. 기본적으로 기본 태그 아래의 href='#topic' 및 href='' 에 대한 변경 사항은 기본 동작과 매우 호환되지 않으며 기본 동작의 이러한 변경으로 인해 컨트롤 외부의 타사 라이브러리가 예상치 못한 방식으로 매우 불안정해질 수 있습니다. , 기본 동작에 논리적으로 의존하기 때문입니다. 종종 변경 사항은 미묘하고 대규모 코드베이스를 다룰 때 즉각적이지 않은 문제로 이어집니다. 이후 아래에서 경험 한 문제를 자세히 설명하는 답변을 만들었습니다. <base> 의 광범위한 배포를 약속하기 전에 링크 결과를 직접 테스트하십시오. 이것이 저의 새로운 조언입니다!

반응형

답변

---

<base> 태그를 사용할지 여부를 결정하기 전에 작동 방식, 용도 및 의미를 이해하고 마지막으로 장점 / 단점을 능가해야합니다.

<base> 태그는 모든 링크에서 현재 컨텍스트에 대해 걱정할 필요가 없기 때문에 템플릿 언어로 상대 링크를 쉽게 만들 수 있습니다.

예를 들어 할 수 있습니다.

<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />

대신에

<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />

<base href> 값은 슬래시로 끝납니다. 그렇지 않으면 마지막 경로를 기준으로 해석됩니다.

브라우저 호환성에 관해서는 IE에서만 문제가 발생합니다. <base> 태그는 종료 태그가 없는 </base> 이므로 종료 태그없이 <base> 만 사용하는 것이 합법적입니다. 그러나 IE6는 다르게 생각하고 <base> 태그 뒤 의 전체 내용은 HTML DOM 트리에서 <base> 요소의 자식 으로 배치됩니다. 이로 인해 Javascript / jQuery / CSS에서 설명 할 수없는 문제가 발생할 수 있습니다. 즉, HTML DOM 검사기에서 중간에 base (및 head )이 있어야한다는 것을 발견 할 때까지 html>body

일반적인 IE6 수정 사항은 IE 조건부 주석을 사용하여 종료 태그를 포함하는 것입니다.

<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->

W3 Validator가 마음에 들지 않거나 이미 HTML5를 사용 중이라면 자동으로 닫을 수 있습니다. 모든 웹 브라우저에서 지원합니다.

<base href="http://example.com/en/" />

<base> 태그를 닫으면 WinXP SP3에서 IE6 의 광기 가 즉시 수정되어 무한 루프 src 의 상대 URI를 사용하여 <script>

<base href="//example.com/somefolder/"> 또는 <base href="/somefolder/"> 와 같은 <base> 태그에 상대 URI를 사용하면 또 다른 잠재적 IE 문제가 나타납니다. IE6 / 7 / 8에서는 실패합니다. 그러나 이것은 브라우저의 잘못이 아닙니다. <base> 태그에 상대 URI를 사용하는 것은 그 자체로 잘못되었습니다. HTML4 사양 은 절대 URI 여야하므로 http:// 또는 https:// 스키마로 시작해야한다고 명시했습니다. 이것은 HTML5 사양 에서 삭제되었습니다. 따라서 HTML5를 사용하고 HTML5 호환 브라우저 만 대상으로하는 경우 <base> 태그에 상대 URI를 사용하면 괜찮습니다.

<a href="#anchor"> 와 같은 명명 된 / 해시 조각 앵커 <a href="?foo=bar"> 와 같은 쿼리 문자열 앵커 및 <a href=";foo=bar">와 같은 경로 조각 앵커 사용과 관련 <a href=";foo=bar"> , <base> 태그를 사용하면 기본적으로 이러한 종류의 앵커를 포함하여 관련 링크를 모두 선언합니다. 더 이상 현재 요청 URI에 상대적인 링크가 없습니다 ( <base> 태그없이 발생 함). 이것은 처음에는 혼란 스러울 수 있습니다. 이러한 앵커를 올바른 방식으로 구성하려면 기본적으로 URI를 포함해야합니다.

<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>

여기서 ${uri} 기본적으로 PHP에서는 $_SERVER['REQUEST_URI'] , JSP에서는 ${pageContext.request.requestURI} , JSF에서는 #{request.requestURI} <base> 대한 필요성을 제거하는 태그가 있다는 점에 유의해야합니다. ao 다른 JSF 페이지를 링크 / 탐색하는 데 사용할 URL 도 참조하십시오.

출처 : https://stackoverflow.com/questions/1889076/what-are-the-recommendations-for-html-base-tag