CSS 이미지 모듈 레벨 3

1. 소개

CSS 레벨 1과 2에서는 background-image 속성 등에서 사용되는 이미지 값이 오직 하나의 URL 값으로만 제공될 수 있었습니다. 이 모듈은 2D 이미지를 표현하는 추가적인 방법들을 도입합니다. 예를 들어 그라디언트로 표현할 수 있습니다.

이 모듈은 또한 래스터 이미지 조작을 위한 여러 속성과, 크기 조정 또는 위치 지정 등 이미지와 같은 대체 요소를 CSS 레이아웃 알고리즘에 의해 결정된 박스 내에서 조정하는 속성도 정의합니다. 또한 이미지와 이와 유사한 대체 요소에 대해 CSS의 크기 결정 알고리즘을 일반적으로 정의합니다.

이 절(위)은 규범적이지 않습니다.

1.1. 모듈 상호작용

이 모듈은 <image> 값 타입을 정의 및 확장하며, 이는 [CSS-VALUES-3]에서 정의되었습니다. 또한 CSS1 및 CSS2의 background-image, cursor, list-style-image 정의에서 <url> 타입을 <image>로 대체하며, content 속성 값에는 <image>를 <url>의 대안으로 추가합니다. CSS2.1 이후의 CSS 명세들은 2D 이미지가 필요한 곳에 <image> 표기를 사용할 것으로 예상됩니다. (예: [CSS3BG] 참고.)

이 모듈에서 정의된 속성 중 image-rendering만이 ::first-line 및 ::first-letter에 적용됩니다.

1.2. 값 정의

이 명세서는 CSS 속성 정의 관례를 [CSS2]에 따라 따릅니다. 그리고 값 정의 문법은 [CSS-VALUES-3]에서 따릅니다. 이 명세서에 정의되지 않은 값 타입은 CSS Level 2 Revision 1 [CSS2]에서 정의됩니다. 다른 CSS 모듈들이 이러한 값 타입의 정의를 확장할 수 있습니다: 예를 들어 [CSS-VALUES-3]는 이 모듈과 결합될 때, initial 키워드를 속성 값으로 추가합니다.

각 속성 정의에 나열된 속성별 값 이외에도, 이 명세서에서 정의된 모든 속성은 CSS 전역 키워드도 속성값으로 허용합니다. 가독성을 위해 별도로 반복하지 않았습니다.

2. 이미지 값: <image> 타입

<image> 값 타입은 2D 이미지를 나타냅니다. 이는 url 참조 또는 컬러 그라디언트일 수 있습니다. 그 문법은 다음과 같습니다:

<image> = <url> | <gradient>

<image>는 background-image, list-style-image, cursor 속성과 같이 많은 CSS 속성에 사용할 수 있습니다. [CSS2] (여기서는 속성 값의 <url> 부분을 대체합니다.)

경우에 따라 이미지는 잘못된 값이 될 수 있습니다. 예를 들어 <url>이 유효하지 않은 이미지 포맷의 리소스를 가리키거나 로드에 실패한 경우입니다. 잘못된 이미지는 투명한 단색 이미지로 렌더링되며 자연 치수가 없습니다. 하지만 잘못된 이미지는 특정 상황에서 오류 처리 절차를 유발할 수 있습니다. 예를 들어, 잘못된 이미지가 list-style-image에 있다면 none으로 간주되어, list-style-type이 대신 렌더링될 수 있습니다. [CSS2]

이미지가 로딩 중일 때는 로딩 중인 이미지입니다. 로딩 중인 이미지는 잘못된 이미지가 아니지만, 비슷한 동작을 가집니다: 투명한 단색 이미지로 렌더링되고 자연 치수가 없습니다. 그리고 해당 컨텍스트에서 폴백 렌더링을 유발할 수 있지만, 폴백 리소스의 로드를 유발해서는 안 됩니다. 또는, 로딩 중인 이미지가 이미 로드된 이미지를 대체하는 경우 (예: 문서나 스타일 시트 변경으로 인해) UA가 이 정보를 추적하고 있다면 이미 로드된 이미지를 로딩 중인 이미지 대신 계속해서 렌더링할 수 있습니다.

부분적으로 로드된 이미지(즉, 자연 치수는 알지만 이미지 데이터가 모두 로드되지 않은 경우)는 로딩 중인 이미지로 취급하거나, 부분 데이터로 렌더링된 로드 완료 이미지로 취급할 수 있습니다. 예를 들어, UA는 인터레이스된 GIF의 첫 픽셀 데이터 패스가 로드되자마자 바로 렌더링할 수도 있고, 또는 이미지 헤더(크기 정보 포함)만 파싱된 시점에 렌더링할 수도 있으며, 추가 데이터가 로드될 때마다 렌더링을 갱신할 수도 있습니다. 또는 전체 이미지가 완전히 로드될 때까지 사용하지 않을 수도 있습니다.

계산된 <image> 값은 지정된 값에서 모든 <url>, <color>, <length>가 계산된 값입니다.

2.1. 이미지 참조: url() 표기법

이미지를 지정하는 가장 간단한 방법은 URL로 이미지 파일을 참조하는 것입니다. 이는 url() 표기법으로 할 수 있으며, [CSS-VALUES-3]에서 정의되었습니다.

background-image: url(wavy.png);

UA가 URL 내의 내용을 이미지로 다운로드, 파싱, 또는 성공적으로 표시하지 못하면 (즉, 이미지가 완전히 디코딩되지 않은 경우) 해당 이미지는 잘못된 이미지로 취급해야 합니다.

2.1.1. 모호한 참조 또는 이미지 URL

URL은 여러 컨텍스트에서 다양한 리소스 유형으로 사용되며, 다양한 방식으로 해석될 수 있습니다. 보통 URL이 나타나는 컨텍스트가 리소스 해석 방법을 명확히 하지만, 일부 경우에는 모호할 수 있습니다. 예를 들어, mask-image의 <url> 값이 SVG 파일을 가리킬 때, 파일 내의 요소 참조로 해석될 수도 있고 <image>로 해석될 수도 있습니다.

모호한 이미지 URL은 <url> 값으로, <image> 또는 요소 참조로 해석될 수 있습니다. 모호한 이미지 URL이 프래그먼트 전용 URL이라면, 반드시 요소 참조로 처리되어야 합니다. 그렇지 않고 모호한 이미지 URL이 해당 리소스 내의 요소를 참조하는 프래그먼트를 가지고 있으며, <url>이 나타나는 컨텍스트에 적합한 타입의 요소라면 (예: mask-image의 경우 mask 요소), 이는 요소 참조로 해석됩니다. 그렇지 않은 경우 <image>로 처리됩니다.

모호한 이미지 URL 개념을 사용하는 명세는 해당 URL에 대해 어떤 요소가 유효한 참조인지와 추가 적용 조건을 정의해야 합니다.

2.1.2. 이미지 메타데이터

이미지는 해상도, 방향 등 렌더링 방법을 지정하는 메타데이터를 포함할 수 있습니다. 일부 이미지 포맷은 이 메타데이터가 파일 내 어디에 위치할 수 있는지 유연하게 허용합니다. 그러나 메타데이터가 실제 이미지 데이터 이후에 위치하는 경우, UA가 이미지를 "점진적으로 디코딩"하여 데이터가 스트림될 때 이미지를 표시하는 능력이 저하됩니다.

이 문제의 영향을 줄이기 위해:

• 제작자는 반드시 메타데이터가 이미지 데이터 앞에 위치하도록 이미지 파일을 생성해야 합니다. (참고: 대부분의 이미지는 이미 기본적으로 이렇게 저장되어 있습니다.)

• 사용자 에이전트는 파일 내 이미지 데이터가 시작된 이후 나타나는 레이아웃에 영향을 미치는 메타데이터(예: 방향, 해상도)를 무시해야 합니다. (참고: 이 규칙은 색상 공간 정보처럼 레이아웃에 영향을 미치지 않는 메타데이터에는 적용되지 않습니다.)

  사용자 에이전트가 파일 내 메타데이터의 위치를 기반으로 이를 무시할 수 없는 경우 (예: 사용하는 디코더가 메타데이터 위치를 보고하지 않는 경우), 반드시 모든 경우에 메타데이터를 사용해야 합니다. (특히, 이미지가 "작은" 경우에만 메타데이터를 사용하고 전체 파일이 빠르게 다운로드되는 경우에는 메타데이터를 사용하지만, 이미지가 크고 메타데이터가 이미 표시되기 한참 뒤에 다운로드되는 경우에는 메타데이터를 무시하는 것은 허용되지 않습니다.)

3. 그라디언트

그라디언트는 한 색에서 다른 색으로 부드럽게 전환되는 이미지입니다. 배경 이미지, 버튼 등에서 미묘한 명암을 주기 위해 자주 사용됩니다. 본 절의 그라디언트 함수를 통해 작성자는 간결한 문법으로 이러한 이미지를 지정할 수 있으며, UA가 페이지 렌더링 시 이미지를 자동으로 생성해줍니다. <gradient>의 문법은 다음과 같습니다:

<gradient> =
  <linear-gradient()> | <repeating-linear-gradient()> |
  <radial-gradient()> | <repeating-radial-gradient()>

그라디언트는 구체적 객체 크기와 동일한 치수의 박스에 그려지며, 이를 그라디언트 박스라 부릅니다. 하지만, 그라디언트 자체는 자연 치수가 없습니다.

그라디언트는 시작점과 종료점 그리고 그라디언트 선(그라디언트 타입에 따라 기하학적으로 선, 광선, 나선 등이 될 수 있음)을 정의하고, 이 선을 따라 각 지점의 색상을 지정함으로써 정의됩니다. 색상들은 부드럽게 혼합되어 선의 나머지 부분을 채웁니다. 그리고 각 그라디언트 타입은 그라디언트 선의 색상을 실제 그라디언트에 적용하는 방법을 정의합니다.

3.1. 선형 그라디언트: linear-gradient() 표기법

선형 그라디언트는 직선 그라디언트 선을 지정하고, 해당 선을 따라 여러 색상을 배치하여 만듭니다. 이미지는 무한대의 캔버스를 생성하고 그라디언트 선에 수직인 선들로 칠하는 방식으로 생성됩니다. 칠해진 선의 색상은 두 선이 만나는 그라디언트 선의 색상입니다. 이렇게 하면 각 색상에서 다음 색상으로 부드럽게 변하는 효과가, 지정된 방향으로 진행됩니다.

3.1.1. linear-gradient() 문법

linear-gradient() 표기법은 CSS에서 선형 그라디언트를 지정합니다. 그 문법은 다음과 같습니다:

<linear-gradient()> = linear-gradient( [ <linear-gradient-syntax> ] )

<linear-gradient-syntax> = [ <angle> | to <side-or-corner> ]? , <color-stop-list>

<side-or-corner> = [left | right] || [top | bottom]

함수의 첫 번째 인자는 그라디언트 선을 지정합니다. 이것이 그라디언트의 방향을 정하고, 색상 중지점의 위치를 결정합니다. 이 인자는 생략할 수 있으며, 생략하면 기본값은 to bottom입니다.

그라디언트 선의 방향은 두 가지 방법으로 지정할 수 있습니다:

<angle> 사용

이 인자의 경우 0deg는 위쪽을 가리키며, 양의 각도는 시계방향 회전을 의미합니다. 따라서 90deg는 오른쪽을 가리킵니다.

단위 식별자는 <angle>이 0이면 생략할 수 있습니다.

키워드 사용

인자가 to top, to right, to bottom, to left 가운데 하나이면, 그라디언트 선의 각도는 각각 0deg, 90deg, 180deg, 270deg입니다.

대신 박스의 모서리(예: to top left)를 지정하면, 그라디언트 선은 지정된 모서리와 같은 사분면을 향하도록 각도를 잡고, 그라디언트 박스의 이웃 두 모서리를 잇는 선에 수직이 되게 설정해야 합니다. 이로 인해 50%에 위치한 색상 중지점이 두 이웃 모서리와 교차합니다(예시는 corner-gradient-example 참고).

그라디언트 박스의 중심에서 시작해, 지정된 각도로 양방향으로 선을 연장합니다. 종료점은 그라디언트 선에 수직인 선이 그라디언트 선과 교차하여 지정된 방향의 박스 모서리에 닿는 지점입니다. 시작점은 반대 방향으로 동일하게 결정됩니다.

참고: 이 모듈의 다음 레벨에서는 그라디언트의 방향을 현재 텍스트 방향 및 writing-mode에 상대적으로 정의할 수 있는 기능이 추가될 예정입니다.

이 예시는 위의 규칙대로 그라디언트 선을 계산하는 과정을 시각적으로 보여줍니다. 그라디언트 선의 시작점, 종료점과 실제 그라디언트(실제 요소의 background: linear-gradient(45deg, white, black);)가 표시되어 있습니다.

시작점과 종료점이 박스 바깥에 있지만, 그라디언트가 정확히 한쪽 모서리에서 완전히 흰색, 반대편 모서리에서 완전히 검정이 되도록 정확히 위치해 있다는 점에 주목하세요. 이는 의도된 동작이며, 선형 그라디언트에서 항상 사실입니다.

그라디언트의 색상 중지점은 일반적으로 시작점과 종료점 사이의 그라디언트 선 위에 위치하지만, 반드시 그래야 하는 것은 아닙니다: 그라디언트 선은 양방향으로 무한히 연장됩니다. 시작점과 종료점은 단지 임의의 위치 기준점일 뿐이며, 시작점은 0%, 0px 등 색상 중지점 위치의 기준이 되고, 종료점은 100%의 기준이 됩니다. 색상 중지점은 0% 이전이나 100% 이후에도 위치할 수 있습니다.

선형 그라디언트의 임의의 지점에서의 색상은 해당 지점을 지나는, 그라디언트 선에 수직인 유일한 선을 찾아서 결정됩니다. 해당 지점의 색상은 이 선이 그라디언트 선과 교차하는 지점의 색상입니다.

3.1.2. 선형 그라디언트 예제

아래의 모든 linear-gradient() 예제는 너비 200px, 높이 100px 박스의 배경으로 적용된다고 가정합니다.

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

linear-gradient(135deg, yellow, blue);
linear-gradient(-45deg, blue, yellow);

linear-gradient(yellow, blue 20%, #0f0);

linear-gradient(to top right, red, white, blue)

3.2. 방사형 그라디언트: radial-gradient() 표기법

방사형 그라디언트에서는, 선형 그라디언트처럼 색상이 그라디언트 박스의 한쪽에서 다른 쪽으로 부드럽게 번지는 대신, 한 점에서 시작해 원형 또는 타원형으로 바깥쪽으로 부드럽게 퍼져나갑니다.

radial-gradient() 표기법은 그라디언트의 중심(0% 타원 위치) 및 끝 모양(100% 타원)의 크기와 형태를 지정하여 방사형 그라디언트를 정의합니다. 색상 중지점은 linear-gradient()와 마찬가지로 리스트로 지정합니다. 그라디언트 중심에서 시작해 끝 모양까지(그리고 그 이상으로도) 균일하게 확장되는 동심 타원이 그려지며, 지정된 색상 중지점에 따라 채색됩니다.

3.2.1. radial-gradient() 문법

방사형 그라디언트의 문법은 다음과 같습니다:

<radial-gradient()> = radial-gradient( [ <radial-gradient-syntax> ] )

<radial-gradient-syntax> =
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? ,
  <color-stop-list>

<radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}

<radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side

<radial-shape> = circle | ellipse

radial-gradient(5em circle at top left, yellow, blue)

참고: 향후 레벨에서 original -webkit-gradient() 함수처럼 그라디언트의 초점 이동 기능이 추가될 수 있습니다. "from <position>" 및 "from offset <offset>"에 대한 proposal이 이슈 1575에서 논의되고 있습니다.

각 인자는 다음과 같이 정의됩니다:

<position>

그라디언트의 중심을 결정합니다. <position> 값 타입은 (background-position에도 사용됨) [CSS-VALUES-3]에 정의되어 있으며, 중심점을 객체 영역으로, 그라디언트 박스를 위치 지정 영역으로 하여 해석됩니다. 이 인자가 생략되면 기본값은 center입니다.

<radial-shape>

circle 또는 ellipse 중 하나일 수 있으며, 각각 그라디언트의 끝 모양이 원 또는 타원이 됨을 결정합니다. <radial-shape>가 생략되면, <radial-size>가 단일 <length>일 때는 원, 그렇지 않으면 타원이 기본값입니다.

<radial-size>

그라디언트의 끝 모양의 크기를 결정합니다. 생략되면 기본값은 farthest-corner입니다. 명시적으로 또는 키워드로 지정할 수 있습니다. 키워드 정의를 위해서는, 그라디언트 박스의 경계를 유한한 선분이 아니라 양방향으로 무한히 연장된 것으로 간주합니다.

끝 모양이 타원이면, 축은 수평 및 수직 축에 맞춰집니다.

circle 및 ellipse 그라디언트 모두 다음 <radial-extent> 값을 사용할 수 있습니다:

closest-side

끝 모양이 그라디언트 중심에 가장 가까운 그라디언트 박스의 변에 정확히 닿도록 크기가 조정됩니다. 형태가 타원일 경우, 각 치수별로 가장 가까운 변에 닿도록 합니다.

farthest-side

closest-side와 같으나, 끝 모양이 가장 먼 변을 기준으로 크기 조정됨.

closest-corner

끝 모양이 그라디언트 중심에 가장 가까운 그라디언트 박스의 모서리를 통과하도록 크기 조정됩니다. 형태가 타원일 경우, closest-side로 지정했을 때와 같은 종횡비를 가집니다.

farthest-corner

closest-corner와 같으나, 끝 모양이 가장 먼 모서리를 기준으로 크기 조정됩니다. 형태가 타원일 경우, 끝 모양이 farthest-side로 지정했을 때와 같은 종횡비를 가집니다.

<radial-shape>가 circle로 지정되거나 생략된 경우, <radial-size>는 다음과 같이 명시적으로 지정할 수 있습니다:

<length [0,∞]>

원의 반지름을 명시적으로 지정합니다. 음수 값은 허용되지 않습니다.

참고: 백분율은 여기서 허용되지 않습니다; 백분율은 타원형 그라디언트의 크기 지정에만 사용할 수 있습니다. 이는 백분율이 어떤 치수에 대해 상대적인지에 대해 여러 해석이 가능하기 때문입니다. 추후 레벨에서는 어느 치수를 기준으로 할지 보다 명확하게 제어하여 원에 백분율을 사용할 수 있는 기능이 추가될 수 있습니다.

<radial-shape>가 ellipse로 지정되었거나 생략된 경우, <radial-size>는 다음과 같이 명시할 수 있습니다:

<length-percentage [0,∞]>{2}

타원의 크기를 명시적으로 지정합니다. 첫 번째 값은 수평 반지름, 두 번째 값은 수직 반지름을 나타냅니다. 백분율 값은 그라디언트 박스의 해당 치수에 대해 상대적입니다. 음수 값은 허용되지 않습니다.

radial-gradient() = radial-gradient(
  [ [ circle               || <length [0,∞]> ]                          [ at <position> ]? , |
    [ ellipse              || <length-percentage [0,∞]>{2} ]            [ at <position> ]? , |
    [ [ circle | ellipse ] || <radial-extent> ]                     [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop-list>
)

3.2.2. 색상 중지점 배치

색상 중지점은 광선(한 점에서 시작해 한 방향으로 무한히 뻗는 선) 형태의 그라디언트 선에 배치됩니다. 이는 선형 그라디언트의 그라디언트 선과 유사합니다. 그라디언트 선의 시작점은 그라디언트 중심에 있고, 오른쪽 방향으로 연장되며, 종료점은 그라디언트 선이 끝 모양과 만나는 지점입니다. 색상 중지점은 0% 이전 위치에도 배치할 수 있습니다. 음수 영역은 직접적으로 렌더링에 사용되지는 않지만, 해당 위치의 색상 중지점은 보간 또는 반복을 통해 0% 이상의 위치 색상에 영향을 줄 수 있습니다 (반복 그라디언트 참고). 예를 들어, radial-gradient(red -50px, yellow 100px)는 중심에서 붉은-주황(#f50)으로 시작해 노란색으로 전환되는 타원형 그라디언트를 생성합니다. 100%를 초과하는 위치는 그라디언트 중심에서 그만큼 더 먼 위치를 지정하는 것과 같습니다.

그라디언트의 임의의 지점에서의 색상은 먼저 해당 점을 통과하며 끝 모양과 동일한 중심·방향·종횡비를 가진 유일한 타원을 구한 뒤, 그 타원이 그라디언트 선과 만나는 위치의 양수 구간 색상을 적용하여 결정합니다.

3.2.3. 퇴화 방사형 그라디언트

일부 위치, 크기, 형태 조합은 반지름이 0인 원 또는 타원을 만들 수 있습니다. 예를 들어 중심이 그라디언트 박스의 변 위에 있고 closest-side나 closest-corner가 지정되거나, 크기 및 형태를 명시적으로 지정했을 때 반지름 중 하나가 0인 경우입니다. 이러한 퇴화(degenerate) 상황에서는, 그라디언트를 다음과 같이 렌더링해야 합니다:

끝 모양이 반지름 0인 원일 때:

끝 모양이 0보다 약간 큰 임의의 작은 수로 반지름을 가지는 원이었던 것처럼 렌더링합니다. 이렇게 하면 그라디언트가 계속 원처럼 보입니다.

그 외 끝 모양의 너비가 0일 때(높이는 상관없음):

끝 모양이 높이는 임의의 매우 큰 수, 너비는 0보다 약간 큰 임의의 작은 수인 타원이었던 것처럼 렌더링합니다. 이렇게 하면 그라디언트가 중심을 기준으로 대칭인 수평 선형 그라디언트와 비슷하게 보입니다. 또한 백분율로 지정한 모든 색상 중지점 위치가 0px이 됨을 의미합니다.

그 외 끝 모양의 높이가 0일 때:

끝 모양이 너비는 임의의 매우 큰 수, 높이는 0보다 약간 큰 임의의 작은 수인 타원이었던 것처럼 렌더링합니다. 이렇게 하면 그라디언트가 마지막 색상 중지점의 색상으로 채워진 단색 이미지처럼 보이거나, 반복 그라디언트라면 그라디언트의 평균 색상과 동일하게 보입니다.

3.2.4. 방사형 그라디언트 예제

아래의 모든 예제는 너비 200px, 높이 100px 박스에 적용됩니다.

radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);

radial-gradient(circle, yellow, green);

radial-gradient(red, yellow, green);

radial-gradient(farthest-side at left bottom, red, yellow 50px, green);

radial-gradient(closest-side at 20px 30px, red, yellow, green);
radial-gradient(20px 30px at 20px 30px, red, yellow, green);

radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
radial-gradient(20px 20px at 20px 30px, red, yellow, green);

3.3. 반복 그라디언트: repeating-linear-gradient() 및 repeating-radial-gradient() 표기법

linear-gradient()와 radial-gradient() 외에도, 이 명세서는 repeating-linear-gradient() 및 repeating-radial-gradient() 값을 정의합니다. 이 표기법들은 각각의 비반복 표기법과 같은 값을 허용하며, 해석 방식도 동일합니다.

<repeating-linear-gradient()> = repeating-linear-gradient( [ <linear-gradient-syntax> ] )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <radial-gradient-syntax> ] )

하지만 렌더링 시에는 색상 중지점들이 양방향으로 무한히 반복되며, 각 반복은 마지막 지정 중지점 위치와 첫 번째 지정 중지점 위치의 차이만큼 이동하여 반복됩니다. 예를 들어, repeating-linear-gradient(red 10px, blue 50px)는 linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)와 동일합니다. 마지막 중지점과 첫 번째 중지점은 각 반복 그룹 경계에서 항상 일치하므로, 그라디언트가 동일한 색상으로 시작·끝나지 않을 경우 경계에서 급격한 전환이 발생합니다.

repeating-linear-gradient(red, blue 20px, red 40px)

repeating-radial-gradient(red, blue 20px, red 40px)

repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)

첫 번째와 마지막 색상 중지점 사이의 거리가 0이 아니지만, 출력 장치의 물리적 해상도가 그라디언트를 정확하게 렌더링하기에 충분하지 않을 정도로 거리가 작은 경우, 구현체는 그라디언트의 평균 색상 찾기를 수행해 해당 평균 색상으로 채워진 단색 이미지를 렌더링해야 합니다.

첫 번째와 마지막 색상 중지점 사이의 거리가 0이거나 (또는 구현 한계로 인해 0으로 반올림되는 경우), 구현체는 같은 개수와 색상의 색상 중지점을 첫 번째와 마지막 중지점이 임의의 0이 아닌 거리만큼 떨어져 있고, 나머지 중지점은 그 사이에 균등하게 배치된 그라디언트의 평균 색상 찾기를 수행하여, 해당 평균 색상으로 채워진 단색 이미지를 렌더링해야 합니다.

반복 방사형 그라디언트의 끝 모양 너비가 0이 아니고, 높이가 0이거나 출력 장치의 해상도가 충분하지 않을 정도로 매우 작은 경우에도 구현체는 그라디언트의 평균 색상 찾기를 수행해 평균 색상으로 채워진 단색 이미지를 렌더링해야 합니다.

참고: 퇴화 방사형 그라디언트 절에서 끝 모양의 너비가 0일 때 어떻게 조정되는지 설명합니다.

그라디언트의 평균 색상 찾기는 다음 단계로 수행합니다:

1. list를 premultiplied RGBA 색상으로 이뤄진 빈 리스트로 정의하고, total-length를 첫 번째와 마지막 색상 중지점 사이의 거리로 정의합니다.

2. 인접한 색상 중지점 쌍마다, weight를 두 색상 중지점 사이 거리의 절반을 total-length로 나눈 값으로 정의합니다. list에 두 항목을 추가합니다. 첫 번째는 첫 번째 색상 중지점을 premultiplied sRGBA로 표현해 각 성분에 weight를 곱한 값, 두 번째도 마찬가지로 두 번째 색상 중지점에 대해 계산한 값입니다.

3. list의 항목을 성분별로 모두 더해 평균 색상을 구해 반환합니다.

참고: 구현체는 위와 동일한 결과만 보장된다면 어떤 알고리즘이든 사용할 수 있습니다.

repeating-linear-gradient(red 0px, white 0px, blue 0px);

repeating-linear-gradient(red 0px, white .1px, blue .2px);

3.4. 그라디언트 색상 정의

그라디언트의 색상은 색상 중지점(<color>와 그라디언트 선의 해당 위치)과 색상 전이 힌트(두 색상 중지점 사이의 색상 전이의 중간 위치를 나타내는 위치)을 사용하여 지정합니다. 이들은 그라디언트 선에 배치되어 선의 각 지점의 색상을 정의합니다. (각 그라디언트 함수는 그라디언트 선의 모양과 길이, 시작점 및 종료점을 정의합니다. 위 참고.)

그라디언트 필드 전체의 색상은 그라디언트 함수에서 지정한 대로 그라디언트 선의 특정 지점에 연결되어 결정됩니다. UA는 그라디언트 색상을 약간 "디더링"(그라디언트 선의 인접 색상으로 픽셀을 무작위로 배치)하여 더욱 부드러운 그라디언트를 만들 수 있습니다.

3.4.1. 색상 중지점 리스트

색상 중지점과 전이 힌트는 색상 중지점 리스트로 지정되며, 이는 두 개 이상의 색상 중지점 사이에 선택적으로 전이 힌트가 끼어 있는 리스트입니다:

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> <length-percentage>?
<linear-color-hint> = <length-percentage>

백분율은 그라디언트 선의 시작점과 종료점 사이 길이에 대해 해석되며, 0%는 시작점, 100%는 종료점에 해당합니다. 길이 값은 그라디언트 선에서 시작점에서 종료점 방향으로 측정됩니다.

색상 중지점과 전이 힌트 위치는 보통 시작점과 종료점 사이에 배치되지만, 반드시 그런 것은 아닙니다: 그라디언트 선은 양방향으로 무한히 확장되며, 위치는 그라디언트 선 어디든 지정할 수 있습니다.

색상 중지점의 위치가 생략된 경우, 위치가 자동으로 할당됩니다. 색상 중지점 리스트의 첫 번째 또는 마지막 색상 중지점에는 각각 그라디언트 선의 시작점 또는 종료점이 할당됩니다. 그 외의 경우, 양 옆 중지점의 중간 위치가 할당됩니다. 연속된 여러 중지점에 위치가 없는 경우, 주변 위치 지정 중지점 사이에 균등하게 배치됩니다. 자세한 내용은 § 3.4.3 색상 중지점 “보정”을 참고하세요.

3.4.2. 그라디언트 선 색상 지정

각 색상 중지점 위치에서, 그라디언트 선은 해당 색상 중지점의 색상을 가집니다. 첫 번째 색상 중지점 이전에는 그라디언트 선이 첫 번째 색상 중지점의 색상이고, 마지막 색상 중지점 이후에는 그라디언트 선이 마지막 색상 중지점의 색상입니다. 두 색상 중지점 사이에서는, 그라디언트 선의 색상이 두 색상 중지점의 색상 사이에서 프리멀티플라이드 RGBA 공간에서 보간됩니다.

기본적으로, 이 보간은 선형입니다—두 색상 중지점 사이 거리의 25%, 50%, 75% 위치에서는 두 중지점 색상의 25%, 50%, 75% 혼합색이 됩니다.

하지만 두 색상 중지점 사이에 전이 힌트가 지정된 경우, 보간은 비선형이 되며 힌트에 의해 제어됩니다:

참고: 전이 힌트는 "중간 색상"(두 중지점 색상의 50% 혼합)이 실제로 위치할 지점을 지정합니다. 힌트가 두 중지점 사이 정확히 중간에 있을 때는 위 보간 알고리즘이 일반 선형 보간과 동일한 결과를 냅니다. 다른 위치에 있을 경우, 두 중지점 사이에 부드러운 지수 곡선 보간이 만들어지며, "중간 색상"은 힌트가 지정한 위치에 정확히 나타납니다.

색상 힌트 사용 예시 이미지를 추가해야 함.

여러 색상 중지점이 동일 위치에 있을 경우, 리스트상 앞에서 뒤로 극소 구간에서 색상이 갑자기 바뀝니다. 즉, 해당 위치에서 색상이 부드럽게 변하지 않고 즉시 바뀝니다.

linear-gradient(90deg, red, transparent, blue)

3.4.3. 색상 중지점 “보정”

각 사용 값의 색상 중지점 위치를 결정할 때, 다음 단계를 순서대로 적용해야 합니다:

1. 첫 번째 색상 중지점에 위치가 없으면, 위치를 0%로 설정합니다. 마지막 색상 중지점에 위치가 없으면, 위치를 100%로 설정합니다.
2. 색상 중지점이나 전이 힌트의 위치가 리스트상 앞에 있는 색상 중지점이나 전이 힌트의 지정 위치보다 작으면, 해당 위치를 앞에 있는 중 가장 큰 지정 위치로 수정합니다.
3. 여전히 위치가 없는 색상 중지점이 있다면, 위치가 없는 인접 색상 중지점 묶음마다, 앞뒤 위치 지정된 색상 중지점 사이에 균등하게 배치합니다.

이 규칙을 적용하면, 모든 색상 중지점과 전이 힌트는 명확한 위치와 색상을 가지게 되며, 위치가 오름차순으로 정렬됩니다.

참고: px, em, % 등 서로 다른 단위 혼용 시 색상 중지점이 이전 중지점보다 앞서게 될 수 있으니 주의해야 합니다. 예를 들어, background-image: linear-gradient(yellow 100px, blue 50%) 규칙은 배경 영역이 200px 이상일 때는 아무 보정도 일어나지 않습니다. 그러나 150px일 경우, 파란 색상 중지점 위치가 75px가 되므로 노란 색상 중지점보다 앞서게 되어 100px로 수정됩니다. 또한, 이런 색상 중지점의 상대적 순서는 레이아웃 수행 전에는 결정할 수 없으므로, 애니메이션이나 트랜지션에서 부드럽게 보간되지 않습니다.

1. linear-gradient(red, white 20%, blue)
   =1=>
   linear-gradient(red 0%, white 20%, blue 100%)

2. linear-gradient(red 40%, white, black, blue)
   =1,3=>
   linear-gradient(red 40%, white 60%, black 80%, blue 100%)

3. linear-gradient(red -50%, white, blue)
   =1,3=>
   linear-gradient(red -50%, white 25%, blue 100%)

4. linear-gradient(red -50px, white, blue)
   =1,3=>
   linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)

5. linear-gradient(red 20px, white 0px, blue 40px)
   =2=>
   linear-gradient(red 20px, white 20px, blue 40px)

6. linear-gradient(red, white -50%, black 150%, blue)
   =1,2=>
   linear-gradient(red 0%, white 0%, black 150%, blue 150%)

7. linear-gradient(red 80px, white 0px, black, blue 100px)
   =2,3=>
   linear-gradient(red 80px, white 80px, black 90px, blue 100px)

4. CSS에서 이미지 및 객체 크기 지정

CSS에서 사용되는 이미지는 다양한 소스에서 올 수 있습니다: 바이너리 이미지 포맷(gif, jpeg 등), 전용 마크업 포맷(SVG 등), 그리고 이 명세에서 정의된 linear-gradient() 값 타입과 같은 CSS 전용 포맷 등입니다. 또한, 문서에는 비디오, 플러그인, 또는 중첩 문서와 같은 다양한 종류의 객체가 포함될 수 있습니다. 이러한 이미지 및 객체(이하 객체)는 CSS에 다양한 크기 정보를 제공할 수도 있고, 전혀 제공하지 않을 수도 있습니다. 이 절에서는 객체와 CSS 레이아웃 알고리즘 사이의 크기 협상 모델을 일반적으로 정의합니다.

4.1. 객체 크기 지정 용어

이 처리를 정의하기 위해, 몇 가지 용어를 정의하여 다양한 개념을 더 쉽게 참조할 수 있게 합니다:

자연 치수

자연 치수란 자연 높이, 자연 너비, 자연 종횡비(너비와 높이의 비율)을 가리킵니다. 각각은 특정 객체에 존재할 수도, 존재하지 않을 수도 있습니다. 이러한 자연 치수는 객체 자체에 내재된 선호 크기로, 즉 객체가 사용되는 컨텍스트의 함수가 아닙니다. CSS는 일반적으로 자연 치수를 어떻게 찾는지는 정의하지 않습니다.

래스터 이미지는 세 가지 자연 치수를 모두 가진 객체의 예입니다. 크기에 맞게 설계된 SVG 이미지는 자연 종횡비만 가질 수 있습니다; SVG 이미지는 자연 너비 또는 자연 높이만으로도 생성될 수 있습니다. 이 명세서에서 정의된 CSS 그라디언트는 자연 치수가 전혀 없는 객체의 예입니다. 또 다른 예로는 문서 내에 포함된 문서(예: HTML의 iframe 요소)가 있습니다. 대부분의 객체(예: 대부분의 이미지)는 두 개의 자연 치수만 가질 수 없으며, 두 개가 있으면 자동으로 세 번째가 정의됩니다. 그러나 폼 컨트롤과 같은 일부 대체 요소는 자연 너비와 자연 높이는 있지만 자연 종횡비는 없을 수 있습니다.

객체가 퇴화된 자연 종횡비(적어도 한 쪽이 0 또는 무한대인 경우)를 가지면, 자연 종횡비가 없는 것으로 취급합니다.

객체(예: 아이콘)가 여러 크기를 가질 경우, 가장 넓은 크기(면적 기준)를 자연 치수로 사용합니다. 그 크기에서 여러 종횡비가 있거나, 크기는 없고 종횡비만 여러 개인 경우, 기본 객체 크기의 종횡비와 가장 가까운 종횡비를 사용합니다. 이는 기본 객체 크기 내에 contain 제약으로 맞췄을 때 면적이 가장 큰 종횡비를 고르면 됩니다. 여러 크기의 면적이 같으면 가장 넓은 크기를 자연 치수로 선택합니다.

자연 너비와 자연 높이를 합쳐 자연 크기라고 부릅니다.

지정 크기

객체의 지정 크기는 CSS에서 정해집니다. 예: width, height, background-size 속성 등. 지정 크기는 확정적인 너비와 높이, 또는 제약의 집합, 혹은 둘의 조합일 수 있습니다.

구체적 객체 크기

구체적 객체 크기는 객체의 자연 치수와 지정 크기, 그리고 해당 컨텍스트의 기본 객체 크기를 조합하여 절대 너비와 높이를 갖는 사각형을 산출한 값입니다.

기본 객체 크기

기본 객체 크기는 자연 치수와 지정 크기 모두에서 일부 치수가 빠진 경우 구체적 객체 크기 결정을 위해 사용되는 절대 높이와 너비를 가진 사각형입니다.

4.2. CSS⇋객체 협상

객체는 CSS에서 아래와 같이 객체 크기 협상 알고리즘에 따라 크기가 결정 및 렌더링됩니다:

1. 문서 내에서 객체가 지정되면, 예를 들어 url() 값을 background-image 속성에 지정하거나, src 속성을 img 요소에 지정하는 경우, CSS는 해당 객체의 자연 치수를 조회합니다.

2. 자연 치수, 지정 크기, 그리고 객체가 사용되는 컨텍스트의 기본 객체 크기를 사용하여, CSS는 구체적 객체 크기를 계산합니다. (자세한 내용은 다음 절 참고.) 이로써 객체가 렌더링될 영역의 크기와 위치가 정해집니다.

3. CSS는 객체에 구체적 객체 크기로 렌더링할 것을 요청합니다. CSS는 구체적 객체 크기가 객체의 자연 치수와 다를 때 객체가 어떻게 렌더링되는지는 정의하지 않습니다. 객체는 구체적 객체 크기에 맞게 조정될 수도 있고, 자신의 크기 제약을 맞추기 위해 더 크거나 작게 렌더링될 수도 있습니다.

4. CSS에서 별도 지정이 없는 한, 객체는 구체적 객체 크기로 클리핑됩니다.

4.3. 구체적 객체 크기 결정

현재 객체(objects)의 크기 결정 규칙은 해당 객체가 사용되는 각 컨텍스트에서 별도로 정의되어 있습니다. 이 절에서는 공통되는 크기 제약과 그 해결 방법을 정의하여, 이후 명세에서 각 인스턴스마다 크기 결정 방법을 재정의하지 않고 참조할 수 있게 합니다.

4.3.1. 기본 크기 결정 알고리즘

기본 크기 결정 알고리즘은 객체의 구체적 객체 크기를 찾는데 흔히 쓰이는 일련의 규칙입니다. 이 알고리즘은 객체의 자연 치수와, 제약이 없거나 확정적 너비/높이만 있는 지정 크기가 동시에 주어졌을 때를 해결합니다.

일부 객체 크기 규칙(예: list-style-image)은 기본 크기 결정 알고리즘과 정확히 일치합니다. 그 외(border-image 등)는 기본 크기 결정 알고리즘을 호출하되 추가 규칙을 적용해 최종 구체적 객체 크기를 산출합니다.

기본 크기 결정 알고리즘은 다음과 같이 정의됩니다:

• 지정 크기가 확정된 너비와 높이인 경우, 구체적 객체 크기는 해당 너비와 높이가 됩니다.

• 지정 크기가 너비 또는 높이만(둘 다 아님) 있는 경우, 구체적 객체 크기는 지정된 너비 또는 높이만을 가집니다. 나머지 치수는 다음과 같이 계산됩니다:

  1. 객체에 자연 종횡비가 있으면, 구체적 객체 크기의 누락된 치수는 해당 종횡비와 주어진 치수로 계산합니다.

  2. 그렇지 않고 누락된 치수가 객체의 자연 치수에 있으면, 누락된 치수는 객체의 자연 치수에서 가져옵니다.

  3. 그 외에는, 구체적 객체 크기의 누락된 치수는 기본 객체 크기에서 가져옵니다.

• 지정 크기에 제약이 없는 경우:

  1. 객체에 자연 높이나 너비가 있으면, 자연 치수가 지정 크기로 주어진 것처럼 크기를 결정합니다.

  2. 그 외에는, contain 제약을 기본 객체 크기에 적용해 크기를 결정합니다.

4.3.2. cover 및 contain 제약 크기 지정

다른 흔한 지정 크기로는 contain 제약과 cover 제약이 있습니다. 둘 다 제약 사각형을 기준으로 객체의 선호 종횡비를 사용해 결정됩니다:

• contain 제약은 구체적 객체 크기를 객체의 자연 종횡비를 유지하면서 제약 사각형의 너비/높이를 넘지 않는 가장 큰 사각형으로 설정합니다.

• cover 제약은 구체적 객체 크기를 객체의 자연 종횡비를 유지하면서 제약 사각형의 너비/높이보다 작지 않은 가장 작은 사각형으로 설정합니다.

두 경우 모두, 객체에 자연 종횡비가 없으면, 구체적 객체 크기는 지정된 제약 사각형이 됩니다.

4.4. CSS 객체 크기 지정 예시

4.5. 객체 크기 조정: object-fit 속성

object-fit 속성은 대체 요소의 콘텐츠가 사용된 높이와 너비로 정의된 박스에 어떻게 맞춰질지 지정합니다.

fill

대체 콘텐츠는 요소의 콘텐츠 박스를 채우도록 크기가 조정됩니다: 객체의 구체적 객체 크기는 요소의 사용 너비와 높이입니다.

contain

대체 콘텐츠는 자연 종횡비를 유지하면서 요소의 콘텐츠 박스 안에 맞도록 크기가 조정됩니다: 구체적 객체 크기는 요소의 사용된 너비와 높이에 대한 contain 제약으로 결정됩니다.

cover

대체 콘텐츠는 자연 종횡비를 유지하면서 요소의 전체 콘텐츠 박스를 채우도록 크기가 조정됩니다: 구체적 객체 크기는 요소의 사용된 너비와 높이에 대한 cover 제약으로 결정됩니다.

none

대체 콘텐츠는 요소의 콘텐츠 박스에 맞게 크기가 조정되지 않습니다: 구체적 객체 크기는 기본 크기 결정 알고리즘을 지정 크기 없이, 대체 요소의 사용된 너비와 높이를 기본 객체 크기로 하여 결정합니다.

scale-down

콘텐츠의 크기는 none 또는 contain이 지정된 것처럼 결정되며, 그 중 더 작은 구체적 객체 크기를 사용합니다.

참고: none과 contain 모두 콘텐츠의 자연 종횡비를 유지하므로, "더 작은"의 개념이 명확합니다.

콘텐츠가 대체 요소의 콘텐츠 박스를 완전히 채우지 못하는 경우, 채워지지 않은 부분에는 대체 요소의 배경이 표시됩니다. 대체 요소는 항상 콘텐츠 박스에 대해 콘텐츠를 클리핑하므로, 콘텐츠가 넘치는 일은 없습니다. 콘텐츠 박스 기준으로 객체 위치를 지정하려면 object-position 속성을 참고하세요.

참고: object-fit 속성은 [SMIL10]의 fit 속성이나, <meetOrSlice> 파라미터, 그리고 preserveAspectRatio 속성([SVG11] 참고)와 유사한 의미를 가집니다.

참고: 객체 크기 협상 알고리즘에 따라, 구체적 객체 크기 (즉, 여기서는 콘텐츠의 크기)는 객체 자체를 직접적으로 스케일하지 않습니다 - 이는 단순히 보여지는 캔버스의 크기에 관한 정보를 객체에 전달하는 것일 뿐입니다. 실제로 그 크기에 어떻게 그릴지는 이미지 포맷에 따라 다릅니다. 특히 래스터 이미지는 항상 지정된 크기로 스케일되고, SVG는 지정된 크기를 "SVG Viewport"(SVG에서 정의하는 용어)의 크기로 사용하며, 루트 <svg> 요소의 여러 속성 값을 이용해 렌더 방식을 결정합니다.

4.6. 객체 위치 지정: object-position 속성

object-position 속성은 대체 요소가 자신의 박스 내에서 어떻게 정렬될지 결정합니다. <position> 값 타입 (background-position에서도 사용됨)은 [CSS-VALUES-3]에 정의되어 있으며, 객체 영역은 구체적 객체 크기, 위치 지정 영역은 콘텐츠 박스로 해석됩니다.

참고: 박스 중 대체 요소가 덮지 않는 영역에는 요소의 배경이 표시됩니다.

5. 이미지 처리

5.1. 페이지에서 이미지 방향 지정: image-orientation 속성

카메라를 옆으로 돌려 사진을 찍었거나, 문서를 스캐너에 제대로 놓지 않은 경우, 결과 이미지는 "옆으로" 혹은 거꾸로 나타날 수 있습니다. image-orientation 속성은 이미지 원본 데이터에 "외부(out-of-band)" 회전을 적용하여 이미지를 올바른 방향으로 맞출 수 있는 방법을 제공합니다.

이 속성은 구현에서 선택적입니다.

이 속성은 요소의 이미지에 도큐먼트에 사용되기 전에 적용되는 직교 회전을 지정합니다. 이는 콘텐츠 이미지 (예: 대체 요소 및 생성 콘텐츠) 그리고 SVG 요소에서 참조하는 이미지 소스 (예: feImage) 뿐만 아니라, CSS 규칙을 통해 적용되는 장식용 이미지(예: background-image 및 기타 <image> 속성)에도 적용됩니다. 문서 외부(예: UA의 내비게이션 툴바나 메뉴 등)에 표시되는 이미지 렌더링에는 적용되지 않습니다.

참고: 이 속성은 임의 회전이나 수평/수직 뒤집기 등 레이아웃 변환을 지정하려는 목적이 아닙니다. (그런 기능은 [CSS-TRANSFORMS-1] 참고.) 또한 인쇄 시 가로/세로 방향에 따라 이미지를 올바르게 맞추는 데도 필요하지 않습니다. 이 회전은 레이아웃의 일부로 처리됩니다. ([CSS3PAGE] 참고.) 잘못된 방향의 이미지만 바로잡는 데만 사용해야 합니다.

값의 의미는 다음과 같습니다:

none

추가 회전 없음: 이미지는 인코딩된 대로 표시됩니다.

from-image

이미지 메타데이터(EXIF 등)에 방향이 지정된 경우, 이 값은 이미지를 올바른 방향으로 맞추기 위해 필요한 각도로 계산됩니다. 필요시, 위에서 설명한 대로 <angle> 값으로 반올림·정규화됩니다. 메타데이터에 방향 정보가 없으면, 이 값은 none으로 계산됩니다.

참고: § 2.1.2 이미지 메타데이터는 어떤 메타데이터가 사용될 수 있는지 제한합니다.

<angle> || flip

양수 <angle> 값은 이미지를 오른쪽(시계 방향)으로 회전시키고, 음수 값은 왼쪽으로 회전시킵니다. <angle>이 생략되면 기본값은 0deg입니다.

flip이 지정된 경우, 회전 후 이미지를 수평으로 뒤집습니다.

이 값은 콘텐츠 이미지에만 적용됩니다; 장식용 이미지는 계속 from-image처럼 동작합니다. 이 값은 폐지(deprecated)되었으며, [CSS-PRINT]를 준수하는 구현을 제외하고는 선택적입니다.

참고: 이 값으로 from-image가 만들 수 있는 8가지 EXIF 방향을 수동으로 모두 구현할 수 있습니다.

이 속성의 계산값은 <angle>을 가장 가까운 1/4회전 단위로 반올림(애매할 경우 양수 방향으로)한 뒤, 1turn으로 모듈로 연산하여 [0turn, 1turn) 구간에 오도록 합니다.

none 및 from-image 이외의 값은 CSS에서 선택적이며 폐지 예정입니다.

모든 CSS 레이아웃 및 렌더링 과정은 이미지를 회전 후 사용합니다. 즉, 이미지를 처음부터 회전된 형태로 인코딩한 것처럼 처리합니다. 즉, 예를 들면:

• 자연 높이와 너비는 원본이 아니라 회전된 이미지에서 유도됩니다.

• height(너비) 속성은 회전 후 이미지의 수직(수평) 치수에 적용됩니다.

• 이미지 cursor의 핫스팟 좌표도 회전 후 이미지를 기준으로 합니다.

• 테두리 이미지(border-image 참고)는 회전 후 분할(slicing)됩니다.

• [CSS-TRANSFORMS-1] 등 기타 변환은 전부 image-orientation 적용 후에 적용됩니다.

img.ninety     { image-orientation: 90deg }
...
<img class="ninety" src=...>

참고: 이 속성은 이전에는 none이 초기값이었습니다. from-image를 초기값으로 하면 일반적으로 더 나은 사용자 경험과 최소한의 문제만 발생할 것으로 예상되며, UA가 이 변경을 시도하면서 나오는 향후 호환성 데이터가 이를 확인할 것입니다. 확인되면, "잘못된 방향 교정 외의 사용 사례"가 별도로 제기되지 않는 한 이 속성의 다른 값들은 CSS에서 삭제될 가능성이 높습니다.

5.2. 이미지 스케일링 방식 결정: image-rendering 속성

image-rendering 속성은 이미지를 스케일링할 때 어떤 부분을 가장 중요하게 보존해야 하는지에 대해 사용자 에이전트에 힌트를 제공하여, 적절한 스케일링 알고리즘 선택을 돕습니다. 요소에 지정되면, 해당 요소에 적용된 모든 이미지(예: background 이미지, list-style 이미지, 또는 크기 조정이 필요한 대체 요소의 콘텐츠 이미지)에 적용됩니다. image-rendering 속성의 값 해석은 다음과 같습니다:

auto

스케일링 알고리즘은 UA(사용자 에이전트)마다 다를 수 있습니다.

smooth

이미지는 최대한 보기 좋게 보이도록 스케일링해야 합니다. 특히 색상을 "부드럽게"하는(예: bilinear interpolation) 알고리즘이 허용됩니다. 사진 등 자연 이미지에 적합합니다.

high-quality

smooth와 동일하지만, 더 높은 품질의 스케일링을 선호합니다. 시스템 리소스가 제한될 때는, high-quality가 적용된 이미지를 다른 값의 이미지보다 우선적으로 고화질로 처리해야 하며, 품질 저하 여부 및 정도를 결정할 때 이 점을 고려합니다.

이 값은 시스템 리소스가 부족할 때 이미지 품질 저하를 막아주지는 않습니다. 단지 auto 이미지보다 우선적으로 자원을 할당해 달라는 선호를 표시할 뿐입니다. 페이지 내 모든 이미지에 high-quality가 적용되면, 실질적으로 모두 auto와 동일하게 취급됩니다.

high-quality를 최대한 활용하려면, 페이지 내에서 가장 중요한 이미지에만 적용하세요.

pixelated

이미지는 원본의 픽셀화 특성을 가능한 한 많이 유지하도록 스케일링되며, 타깃 크기가 원본의 정수배가 아닐 경우 이미지를 왜곡하지 않기 위해 약간의 부드러움(smoothing)이 허용될 수 있습니다.

각 축마다 별도로, 원본 크기에 가장 가깝고 0보다 큰 정수배를 먼저 결정합니다. nearest neighbor로 이 정수배 크기까지 스케일링한 뒤, 나머지는 smooth 방식으로 타깃 크기까지 스케일링합니다.

참고: 원본 크기의 정수배일 경우, crisp-edges와 동일한 결과를 냅니다. 정수배가 아닐 경우, 일반적으로 픽셀 아트에도 더 좋은 시각적 결과를 주지만, "2단계" 렌더링으로 인해 성능 하락이 있을 수 있습니다.

crisp-edges

이미지는 대비와 경계선을 보존하며, 색상 블렌딩이나 블러 없이 스케일링됩니다. 선화(선그림) 등 선명한 이미지에 적합합니다.

nearest neighbor 또는 원본 이미지의 경계선 블러/색상 혼합 없이 UA가 선택한 다른 알고리즘으로 스케일링할 수 있습니다. 단, 대각선이나 곡선을 감지해서 실제 곡선/대각선으로 렌더할 수 있습니다 (거대한 픽셀처럼 보이지 않게).

참고: 새 크기가 원본의 정수배가 아니면, nearest neighbor는 상당한 "앨리어싱" 문제를 유발할 수 있습니다; 원본의 같은 두께의 선이 스케일된 이미지에서 위치에 따라 한 픽셀 더 얇거나 두꺼워질 수 있습니다. 대부분의 경우 pixelated가 nearest neighbor보다 더 적합한 렌더링을 제공합니다.

pixelated의 첫 단계 외에는, 이 속성은 사용해야 하는 특정 스케일링 알고리즘을 강제하지 않습니다. 예를 들어 image-rendering: auto일 때, 사용자 에이전트는 기본적으로 bilinear interpolation을 사용하거나, 부하가 높을 때는 nearest-neighbor, 움직임 없는 정적 이미지에는 Lanczos interpolation 같은 더 고품질 스케일러를 쓸 수 있습니다.

예를 들어, 아래와 같은 작은 이미지가 있을 때:

이 이미지를 3배로 확대할 경우, image-rendering의 값에 따라 아래와 같이 보일 수 있습니다:

위 예시처럼 3배 확대 시, pixelated와 순수 nearest neighbor 결과는 동일합니다. 정수배가 아닌 스케일 비율에선, 두 방식이 다르게 동작합니다:

pixelated 버전은 전체적으로 픽셀만 확대한 느낌을 유지하지만, 약간의 블러가 생깁니다. (단, smooth 방식보다는 훨씬 덜 블러가 생김.) 반면에, nearest neighbor는 어떤 블러도 발생하지 않지만, 앨리어싱 아티팩트로 "픽셀"이 불규칙한 크기로 보일 수 있습니다.

이 속성은 과거 optimizeSpeed, optimizeQuality 값을 허용했습니다. 이 값들은 현재 폐지되었으며, 사용자 에이전트는 이 값들을 유효값으로 인식해야 하지만 각각 crisp-edges 및 smooth와 동일하게 동작해야 하며, 저자(author)는 사용해서는 안 됩니다.

6. 보간

<image> 값의 보간은 이 레벨에서 정의되어 있지 않습니다. 구현에서는 (다른 지원되지 않는 보간과 마찬가지로 50% 전환 지점에서) 갑작스럽게 전환되어야 하며, 추후 명세에서 달리 정의하지 않는 한 이 규칙을 따릅니다.

참고: CSS Images Level 4에서 그라디언트의 특수 보간과, 그 외 이미지는 크로스-페이드 방식의 보간이 정의될 예정입니다.

7. 직렬화

이 절은 본 명세에서 새로 도입된 모든 속성과 값 타입의 직렬화 방법을 설명하며, CSS Object Model [CSSOM]과의 인터페이스를 목적으로 합니다.

이 모듈에서 정의된 함수의 직렬화는 각 함수의 개별 문법에 따라, 문법에 쓰인 순서대로, 의미가 달라지지 않는 한 일부 구성요소는 생략하며, 공백으로 구분된 토큰은 한 칸 공백으로, 직렬화된 쉼표 뒤에는 한 칸 공백을 넣는 방식으로 해야 합니다.

Linear-Gradient( to bottom, red 0%,yellow,black 100px)

linear-gradient(red, yellow, black 100px)

개인정보 보호 고려사항

이 명세는 새로운 개인정보 보호 문제를 도입하지 않습니다.

보안 고려사항

이 명세는 기본적으로 교차 출처 이미지를 렌더링할 수 있게 하며, 이로 인해 해당 이미지의 일부 정보(특히 자연 치수 및 해상도)가 코드로 노출될 수 있습니다.

감사의 글

그라디언트 정의에 기여한 Webkit 팀, Brad Kemper, Brian Manthos, Alan Gresley에게, object-fit, object-position, image-orientation에 대한 작업을 해준 Melinda Grant에게, 그리고 세심한 리뷰와 의견, 교정 작업을 해준 L. David Baron, Kang-Hao Lu, Leif Arne Storset, Erik Dahlstrom, Øyvind Stenhaug에게 감사드립니다.

변경 사항

2019년 10월 10일 후보 권고안 이후 변경 사항 10 October 2019 Candidate Recommendation

2020년 12월 17일 CRD 이후 주요 변경 사항:

• <linear-color-stop>에서 순서를 바꿀 수 있도록 하는 && 제거 (Issue 8021)

• pixelated가 왜곡을 방지하기 위해 nearest neighbor로 가장 가까운 픽셀 배수까지 부드럽게 스케일링하도록 명시함 (Issue 5837)

• nearest neighbor가 crisp-edges의 구현체로 명시적으로 허용됨 (현재 구현들이 실제로 이렇게 동작함) (Issue 6038)

• 문법 생산 규칙의 여러 에디토리얼/오타 수정

2019년 10월 10일 CR 이후 주요 변경 사항:

• 퇴화된 종횡비 처리 정의 (Issue 4572)

• 이미지 데이터 이후에 위치한 레이아웃에 영향 주는 메타데이터는 무시하도록 정의 (Issue 5165)

• 그라디언트에서 디더링 허용을 명시 (Issue 4793)

• image-orientation이 장식 및 콘텐츠 이미지 모두에 적용됨을 명시 (Issue 5245)

• “intrinsic dimensions”를 자연 치수로 명명 변경해 intrinsic sizes와의 혼동 방지 (Issue 4961)

2012년 4월 17일 후보 권고안 이후 변경 사항 17 April 2012 Candidate Recommendation

주요 변경 사항:

• image() 표기법은 4단계로 연기됨.

• image-resolution 속성은 4단계로 연기됨.

• image-orientation 속성이 폐지, 선택, at-risk로 표시됨. 추가로:

  • from-image 및 none 키워드 추가

  • flip 값 추가

  • "mod then round" 순서로 변경

• image-rendering 속성 추가

• <resolution> 타입을 [CSS-VALUES-3]로 이동

• 잘못된 이미지, 부분 로드 이미지 처리 명확화

• <image>의 일반 계산 형태 정의

• 이미지/요소 참조 모호 URL의 개념과 처리 정의

• linear-gradient()에서 0도 각도일 때 단위 생략 가능(호환성)

• 퇴화 반복 방사형 그라디언트 처리 명확화

• 전이 힌트를 <color-stop-list>에 추가, 관련 설명을 새롭게 서술

• 모든 속성 정의 표에 "정규 순서", "애니메이션 타입" 추가

• <image> 값의 보간 및 직렬화 정의

• 기타 사소한 명확화

의견 처리 현황(Disposition of Comments)을 확인할 수 있습니다.