diff options
Diffstat (limited to 'files/ko/web/api/url/index.html')
-rw-r--r-- | files/ko/web/api/url/index.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/files/ko/web/api/url/index.html b/files/ko/web/api/url/index.html new file mode 100644 index 0000000000..ac29f47f05 --- /dev/null +++ b/files/ko/web/api/url/index.html @@ -0,0 +1,143 @@ +--- +title: URL +slug: Web/API/URL +tags: + - API + - Interface + - Overview + - Reference + - URI + - URL + - URL API + - Web +translation_of: Web/API/URL +--- +<div>{{APIRef("URL API")}}</div> + +<p><span class="seoSummary"><strong><code>URL</code></strong> 인터페이스는 {{glossary("URL")}}을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다.</span> <code>URL</code> 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다. 이렇게 생성한 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다.</p> + +<p>브라우저가 아직 {{domxref("URL.URL", "URL()")}} 생성자를 지원하지 않을 땐 {{domxref("Window")}} 인터페이스의 <code>Window.URL</code> 속성으로 <code>URL</code> 객체에 접근할 수 있습니다. 개발에 사용하기 전, 프로젝트의 지원 대상 브라우저를 확인하고, 이런 절차를 추가해야 하는지 결정하세요.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{domxref("URL.URL", "new URL()")}}</dt> + <dd>주어진 절대 URL, 또는 상대 URL과 기준 URL 문자열을 사용해 생성한 <code>URL</code> 객체를 생성하고 반환합니다.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{domxref("URL.hash", "hash")}}</dt> + <dd><code>'#'</code>과 URL의 프래그먼트 식별자를 담은 {{domxref("USVString")}}입니다.</dd> + <dt>{{domxref("URL.host", "host")}}</dt> + <dd>URL의 도메인(호스트 이름), <code>':'</code>, 포트를 담은 {{domxref("USVString")}}입니다.</dd> + <dt>{{domxref("URL.hostname", "hostname")}}</dt> + <dd>URL의 도메인을 담은 {{domxref("USVString")}}입니다.</dd> + <dt>{{domxref("URL.href", "href")}}</dt> + <dd>전체 URL을 반환하는 문자열화 속성입니다.</dd> + <dt>{{domxref("URL.origin", "origin")}} {{readonlyInline}}</dt> + <dd>URL의 {{glossary("origin", "출처")}}, 즉 스킴, 도메인, 포트를 담은 {{domxref("USVString")}}입니다.</dd> + <dt>{{domxref("URL.password", "password")}}</dt> + <dd>도메인 이름 이전에 지정된 비밀번호를 담은 {{domxref("USVString")}}입니다.</dd> + <dt>{{domxref("URL.pathname", "pathname")}}</dt> + <dd><code>'/'</code>와 URL의 경로를 담은 {{domxref("USVString")}}입니다.</dd> + <dt>{{domxref("URL.port", "port")}}</dt> + <dd>URL의 포트 번호를 담은 {{domxref("USVString")}}입니다.</dd> + <dt>{{domxref("URL.protocol", "protocol")}}</dt> + <dd>URL의 {{glossary("protocol", "프로토콜")}} 스킴을 담은 {{domxref("USVString")}}입니다. 마지막 <code>':'</code>을 포함합니다.</dd> + <dt>{{domxref("URL.search", "search")}}</dt> + <dd>URL의 매개변수 문자열을 나타내는 {{domxref("USVString")}}입니다. 어떤 매개변수라도 존재하는 경우 <code>'?'</code> 문자로 시작해, 모든 매개변수를 포함합니다.</dd> + <dt>{{domxref("URL.searchParams", "searchParams")}} {{readonlyInline}}</dt> + <dd><code>search</code> 속성의 매개변수 각각에 접근할 수 있는 {{domxref("URLSearchParams")}} 객체입니다.</dd> + <dt>{{domxref("URL.username","username")}}</dt> + <dd>도메인 이름 이전에 지정된 사용자 이름을 담은 {{domxref("USVString")}}입니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{domxref("URL.toString", "toString()")}}</dt> + <dd>전체 URL을 담은 {{domxref("USVString")}}을 반환합니다. {{domxref("URL.href")}}와 동일하나, <code>toString()</code>으로는 URL을 편집할 수 없습니다.</dd> + <dt>{{domxref("URL.toJSON", "toJSON()")}}</dt> + <dd>전체 URL을 담은 {{domxref("USVString")}}을 반환합니다. {{domxref("URL.href")}}와 동일한 문자열을 반환합니다.</dd> +</dl> + +<h2 id="정적_메서드">정적 메서드</h2> + +<dl> + <dt>{{domxref("URL.createObjectURL", "createObjectURL()")}}</dt> + <dd>고유한 블롭 URL, 즉 <code>blob:</code> 을 스킴으로 하고, 브라우저 내의 객체를 가리키는 고유한 불투명 문자열을 그 뒤에 붙인 {{domxref("DOMString")}}을 반환합니다.</dd> + <dt>{{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}</dt> + <dd>이전에 {{domxref("URL.createObjectURL()")}}로 생성한 객체 URL을 취소합니다.</dd> +</dl> + +<h2 id="사용_일람">사용 일람</h2> + +<p>생성자는 <code>url</code> 매개변수를 받으며, URL이 상대 URL인 경우 선택적으로 <code>base</code> 매개변수를 지정해 기준으로 사용할 수 있습니다.</p> + +<pre class="brush: js">const url = new URL('../cats', 'http://www.example.com/dogs'); +console.log(url.hostname); // "www.example.com" +console.log(url.pathname); // "/cats" +</pre> + +<p>URL 속성을 사용해 URL을 만들 수 있습니다.</p> + +<pre class="brush: js">url.hash = 'tabby'; +console.log(url.href); // "http://www.example.com/cats#tabby" +</pre> + +<p>URL은 {{RFC(3986)}}의 규칙을 따라 인코딩 됩니다.</p> + +<pre class="brush: js">url.pathname = 'démonstration.html'; +console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html" +</pre> + +<p>{{domxref("URLSearchParams")}} 인터페이스를 사용해 URL 쿼리 문자열을 생성하거나 조작할 수 있습니다.</p> + +<p>현재 URL의 검색 매개변수를 가져오려면 다음과 같은 코드를 사용하세요.</p> + +<pre class="brush: js">// https://some.site/?id=123 +const parsedUrl = new URL(window.location.href); +console.log(parsedUrl.searchParams.get("id")); // "123"</pre> + +<p>{{domxref("URL.toString", "toString()")}} 메서드는 단순히 {{domxref("URL.href", "href")}} 속성의 값을 반환하는 것이므로, URL 정규화와 인코딩에 생성자를 직접 사용할 수 있습니다.</p> + +<pre class="brush: js">const response = await fetch(new URL('http://www.example.com/démonstration.html'));</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td> + <td>{{Spec2('File API')}}</td> + <td>Added the static methods <code>URL.createObjectURL()</code> and <code>URL.revokeObjectURL</code><code>()</code>.</td> + </tr> + <tr> + <td>{{SpecName('URL', '#api', 'API')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition (implements <code>URLUtils</code>).</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.URL")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/URL_API">URL API</a></li> + <li>{{domxref("URLSearchParams")}}.</li> +</ul> |