Functions

Editing

url(<param-url>)

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

설명

background-image, list-style-image, content, cursorborder-image, border-image-source, mask-image 속성 등의 값으로 사용된다. 또한 at-rules에서 @font-facesrc , @counter-style의  symbols 디스크립터 등의 값으로도 사용된다.

매개 변수

url() 함수의 매개 변수 유형을 나타낸다.

  • CSS Values and Units Module Level 4
    <string> <url-modifier>*
Details

포함된 타입

  • <string>

    따옴표로 감싸진 데이터 유형을 표현한다.

    • "this is a 'string'."
    Details

    동일한 타입을 사용하는 관련 속성

    모든 속성을 표시하지 않을 수도 있다.

    • font-family

      글꼴을 지정한다.

    • content

      가상 요소로 생성할 콘텐츠를 설정한다.

    • quotes

      인용 부호의 유형을 설정한다.

  • <url-modifier>

    URL의 의미나 해석을 어떻게든 변경하는 타입이다.

구문

background-image: url();
CSS1, CSS Values and Units Module Level 3Post pending
두 개 이상의 배경 이미지를 설정한다.

url() 함수의 인수 값으로 SVG Data URL을 이용한 경우에 대한 샘플 코드

기술 문서

URI와 URL

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

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

버전 명세

Modules
Module NameStatusSummary
CSS Values and Units Module Level 3편집자 초안

Last review date: 2022-6-4

지원 웹브라우저