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
|
---
title: <url>
slug: Web/CSS/url()
tags:
- CSS
- CSS Data Type
- Layout
- Reference
translation_of: Web/CSS/url()
translation_of_original: Web/CSS/url
original_slug: Web/CSS/url
---
<div>{{ CssRef() }}</div>
<p><strong><code><url></code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">자료형</a>은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.</p>
<div class="note">
<p><strong>URI와 URL</strong> <a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Identifier" title="http://en.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a>와 <a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator" title="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 <u>위치</u>를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(<a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Name" title="http://en.wikipedia.org/wiki/Uniform_Resource_Name">URN</a>)일 수도 있습니다.</p>
<p>CSS Level 1의 <code>url()</code> 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 <code>url()</code>을 사용해 <code><uri></code> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 <code>url()</code>은 <code><url></code>만을 나타낼 수 있습니다.</p>
</div>
<h2 id="구문">구문</h2>
<p><code><url></code> 자료형은 <code>url()</code> 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.</p>
<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png")
<a_css_property>: url('http://mysite.example.com/mycursor.png')
<a_css_property>: url(http://mysite.example.com/mycursor.png)
</pre>
<div class="note">
<p><strong>참고:</strong> Firefox 15부터, <span id="summary_alias_container"><span id="short_desc_nonedit_display">0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은</span></span> {{Bug(752230)}}을 참고하세요.</p>
</div>
<h2 id="예제">예제</h2>
<pre class="brush: css">.topbanner {
background: url("topbanner.png") #00D no-repeat fixed;
}
</pre>
<pre class="brush: css">ul {
list-style: square url(http://www.example.com/redball.png);
}
</pre>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Values', '#urls', '<url>') }}</td>
<td>{{ Spec2('CSS3 Values') }}</td>
<td>No significant change from CSS Level 2 (Revision 1).</td>
</tr>
<tr>
<td>{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>No significant change from CSS Level 1.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#url', '<url>') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
<p>{{Compat("css.types.url")}}</p>
|
