Functions

Draft

url(<string>path)

CSS에서 사용할 외부 리소스를 가져온다.

설명

background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image의 값으로 사용된다. 또한 at-rules에서 @font-face의 src 속성, @counter-style의  symbols의 값으로도 사용된다.

구문

background-image:url();기본형식CSS1
배경 이미지로 사용할 이미지의 경로를 설정한다.
두 개 이상의 배경 이미지를 설정한다.
background-image:url(data);기본형식
url() 함수의 인수 값으로 SVG Data URL을 이용한 경우에 대한 샘플 코드

매개 변수

<string>path필수
<url> 타입의 경우:
문서내 CSS에 포함할 리소스에 대한 상대적 또는 절대 주소, 포인터인 url 또는 데이터 uri(선택적으로 단일 또는 큰따옴표로 묶음)이다. URL에 괄호, 백스페이스 또는 따옴표가 포함되어 있거나, 이러한 문자가 이스케이프(Escape) 하지 않는 한, 또는 주소가 0x7e를 초과하는 제어 문자를 포함하는 경우 인용 부호가 필요하다.
DATA URIs 리소스의 경우:
문서에 인라인 데이터를 제공하는 URI 체계로 HTML 및 CSS에 이미지를 내장하는 데 일반적으로 사용된다.
SVG 리소스의 경우:
SVG 구현 코드에서 리소스 ID를 사용한다.

지원 웹브라우저

기술 문서

URI와 URL

URL은 URI의 종류 중 하나로, 리소스의 위치를 표현한다. 따라서 URI는 URL일 수도 있고, 리소스의 이름(URN)일 수도 있다.

CSS Level 1의 url() 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었다. 이로써 url()을 사용해 <uri> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 url()은 <url>만을 나타낼 수 있다.