2차원 이미지를 나타낸다.
CSS에서 이미지는 데이터는 <url>로 참조하는 일반 이미지와 <gradient> 타입의 알고리즘에 의해 만들어진 이미지가 존재한다.
최근 이미지를 생성하는 새로 추가된 함수로는 image(), image-set(), cross-fade()가 있다.
주의할 점은 DOM API에 존재하는 이미지를 동적으로 생성하는 Image() 생성자 함수와 혼동하지 말아야 한다.
CSS에서 이미지의 크기를 처리하는 유형은 다음과 같다.
자연 해상도는 이미지가 기본적으로 가지는 있는 원래의 크기를 의미한다. 명시적으로 원래 이미지의 크기를 지정하거나 지정하지 않으면 원래의 크기로 기본적으로 처리한다. 명시적으로 지정하더라도 원래의 크기가 아니라면 원래의 종횡비와 상관없이 지정된 크기로 처리된다.
만약에 가로 또는 세로 한쪽만 크기를 지정한 경우에는 지정되지 않은 다른 방향의 크기는 원래 이미지의 종횡비를 유지하면서 자동으로 크기가 지정된다.
어떤 경우이든 절대 단위의 px, 상대 단위의 % 모두 동일하게 크기 처리에 적용된다. JPG(JPEG), PNG, GIF 등의 비트맵(bitmap) 방식의 이미지들이 해당된다.
SVG 그래픽 요소는 자연 해상도가 존재하지 않고 원래의 종횡비를 고정으로 크기 조절을 한다. 기타 CSS에서 처리 가능한 모든 벡터(vector) 방식의 이미지들이 해당된다.
CSS에서 생성한 그라디언트가 해당된다. 요소에게 적용된 그라디언트는 일반적으로 요소의 크기에 따라 정해진다.
<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()는 지원하지 않는다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Images Module Level 3 | 편집자 초안 | Last review date: 2022-6-3 |
| CSS Images Module Level 4 | 편집자 초안 |
Last review date: 2022-6-3 |
