aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/html/element/base/index.html
blob: 0a126d67f4bb1efa3a43706a9788fca04862d488 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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>&lt;base&gt;</code> 요소</strong>는 문서 안의 모든 상대 {{glossary("URL")}}이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <code>&lt;base&gt;</code> 요소만 존재할 수 있습니다.</p>

<p>문서의 기준 URL을 스크립트에서 접근해야할 땐 {{domxref('document.baseURI')}}을 사용할 수 있습니다. 문서에 <code>&lt;base&gt;</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>&lt;base&gt;</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>&lt;base&gt;</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="다중_&lt;base>_요소">다중 <code>&lt;base&gt;</code> 요소</h3>

<p><code>&lt;base&gt;</code> 요소가 여러 개 존재하는 경우 첫 <code>href</code>와 첫 <code>target</code>만 사용하며 나머지는 모두 무시합니다.</p>

<h3 id="페이지_내부_앵커">페이지 내부 앵커</h3>

<p><code>&lt;a href="#some-id"&gt;</code>처럼, 문서 프래그먼트를 가리키는 링크 주소도 <code>&lt;base&gt;</code>를 사용해 처리하므로, 기준 URL 뒤에 프래그먼트를 붙인 주소로 HTTP 요청을 유발합니다. 예를 들어,</p>

<ol>
 <li><code>&lt;base href="https://example.com"&gt;</code>을 가정</li>
 <li><code>&lt;a href="#anchor"&gt;Anker&lt;/a&gt;</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>&lt;base&gt;</code>를 인식하지 않으므로 항상 온전한 형태의 절대 URL을 지정해야 합니다.</p>

<pre class="brush: html notranslate">&lt;meta property="og:image" content="https://example.com/thumbnail.jpg"&gt;</pre>

<h2 id="예제">예제</h2>

<pre class="brush: html notranslate">&lt;base href="http://www.example.com/page.html"&gt;
&lt;base target="_blank"&gt;
&lt;base target="_target" href="http://www.example.com/page.html"&gt;
</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', '&lt;base&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.base")}}</p>