diff options
Diffstat (limited to 'files/ko/web/html/element/base/index.html')
| -rw-r--r-- | files/ko/web/html/element/base/index.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/ko/web/html/element/base/index.html b/files/ko/web/html/element/base/index.html new file mode 100644 index 0000000000..0a126d67f4 --- /dev/null +++ b/files/ko/web/html/element/base/index.html @@ -0,0 +1,136 @@ +--- +title: <base> +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - HTML document metadata + - 'HTML:Metadata content' + - Reference +translation_of: Web/HTML/Element/base +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><base></code> 요소</strong>는 문서 안의 모든 상대 {{glossary("URL")}}이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <code><base></code> 요소만 존재할 수 있습니다.</p> + +<p>문서의 기준 URL을 스크립트에서 접근해야할 땐 {{domxref('document.baseURI')}}을 사용할 수 있습니다. 문서에 <code><base></code> 요소가 존재하지 않을 때 <code>baseURI</code>의 기본값은 {{domxref("location.href")}}입니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td>다른 <code><base></code> 요소를 포함하지 않는 {{htmlelement("head")}} 요소.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="특성">특성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함합니다.</span></p> + +<div class="blockIndicator warning"> +<p><span style="line-height: 21px;">다음 특성 중 하나라도 지정한 경우, 상대 URL을 특성에 사용한 모든 요소보다 <code><base></code>가 앞에 위치해야 합니다.</span></p> +</div> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>문서 내 상대 URL이 사용할 기준 URL. 절대 및 상대 URL을 사용할 수 있습니다.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd><code>target</code> 속성을 명시하지 않은 {{htmlelement("a")}}, {{htmlelement("area")}}, 또는 {{htmlelement("form")}} 요소가 탐색을 유발했을 때, 그 결과를 보여줄 기본 {{glossary("browsing context", "브라우징 맥락")}}. <strong>키워드</strong>나 <strong>저작자 정의 이름</strong>으로 지정합니다.</dd> + <dd>다음 키워드는 특별한 의미를 갖습니다. + <ul> + <li><code>_self</code> (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.</li> + <li><code>_blank</code>: 결과를 새로 생성한, 이름 없는 브라우징 맥락에 보여줍니다.</li> + <li><code>_parent</code>: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 <code>_self</code>와 동일합니다.</li> + <li><code>_top</code>: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 <code>_self</code>와 동일합니다.</li> + </ul> + </dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<h3 id="다중_<base>_요소">다중 <code><base></code> 요소</h3> + +<p><code><base></code> 요소가 여러 개 존재하는 경우 첫 <code>href</code>와 첫 <code>target</code>만 사용하며 나머지는 모두 무시합니다.</p> + +<h3 id="페이지_내부_앵커">페이지 내부 앵커</h3> + +<p><code><a href="#some-id"></code>처럼, 문서 프래그먼트를 가리키는 링크 주소도 <code><base></code>를 사용해 처리하므로, 기준 URL 뒤에 프래그먼트를 붙인 주소로 HTTP 요청을 유발합니다. 예를 들어,</p> + +<ol> + <li><code><base href="https://example.com"></code>을 가정</li> + <li><code><a href="#anchor">Anker</a></code>를 가정</li> + <li>2번의 링크는 <code>https://example.com/#anchor</code>를 가리킵니다.</li> +</ol> + +<h3 id="Open_Graph">Open Graph</h3> + +<p><a href="https://ogp.me/">Open Graph</a> 태그는 <code><base></code>를 인식하지 않으므로 항상 온전한 형태의 절대 URL을 지정해야 합니다.</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://example.com/thumbnail.jpg"></pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><base href="http://www.example.com/page.html"> +<base target="_blank"> +<base target="_target" href="http://www.example.com/page.html"> +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">주석</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.base")}}</p> |