Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

배경

CSS 팟캐스트 - 053: 배경

모든 CSS 상자 뒤에는 배경 레이어라는 특수 레이어가 있습니다. CSS는 여러 배경을 허용하는 등 의미 있는 변경을 수행하는 다양한 방법을 제공합니다.

배경 레이어는 사용자와 가장 멀리 있으며 padding-box 영역에서 시작하여 상자의 콘텐츠 뒤에 렌더링됩니다. 이렇게 하면 배경 레이어가 테두리와 전혀 겹치지 않습니다.

배경 색상

Browser Support

배경 레이어에 적용할 수 있는 가장 간단한 효과 중 하나는 색상을 설정하는 것입니다. background-color의 초기 값은 transparent이며, 이 값을 사용하면 상위 요소의 콘텐츠가 표시될 수 있습니다. 배경 레이어에 설정된 유효한 색상은 해당 요소에 그려진 다른 항목 뒤에 배치됩니다.

배경 이미지

Browser Support

Source

background-color 레이어 위에 background-image 속성을 사용하여 배경 이미지를 추가할 수 있습니다. background-image는 다음을 허용합니다.

url CSS 함수를 사용하는 이미지 URL 또는 데이터 URI
그라데이션 CSS 함수로 동적으로 생성된 이미지입니다.

`url` CSS 함수로 background-image 설정

CSS 그라데이션 배경

두 개 이상의 색상을 전달할 때 background-image를 생성할 수 있는 여러 그라데이션 CSS 함수가 있습니다.

사용되는 그라데이션 함수와 관계없이 결과 이미지는 사용 가능한 공간의 크기에 맞게 기본 크기가 조정됩니다.

그라데이션 함수를 사용하여 background-image를 적용하는 예를 보여주는 데모입니다.

배경 이미지 반복

Browser Support

Source

기본적으로 배경 이미지는 가로와 세로로 반복되어 배경 레이어의 전체 공간을 채웁니다.

다음 값 중 하나와 함께 background-repeat 속성을 사용하여 이를 변경합니다.

repeat: 사용 가능한 공간 내에서 이미지가 반복되며 필요에 따라 자릅니다.
round: 이미지가 가로와 세로로 반복되어 사용 가능한 공간에 최대한 많은 인스턴스를 맞춥니다. 사용 가능한 공간이 늘어나면 이미지가 늘어나고 이미지의 원래 너비의 절반을 늘린 후 이미지 인스턴스를 더 추가하기 위해 압축됩니다.
space: 이미지가 가로와 세로로 반복되어 사용 가능한 공간 내에 최대한 많은 인스턴스를 맞춥니다. 이때 필요에 따라 이미지 인스턴스 간에 간격을 둡니다. 반복되는 이미지가 배경 레이어가 차지하는 공간의 가장자리에 닿고 그 사이에 균등하게 여백이 배치됩니다.

background-repeat 속성을 사용하면 x축과 y축의 동작을 독립적으로 설정할 수 있습니다. 첫 번째 매개변수는 가로 반복 동작을 설정하고 두 번째 매개변수는 세로 반복 동작을 설정합니다.

단일 값을 사용하면 수평 및 수직 반복에 모두 적용됩니다.

또한 의도를 더 명확하게 전달할 수 있는 편리한 한 단어 옵션도 있습니다.

값 repeat-x는 이미지를 가로로만 반복합니다. 이는 repeat no-repeat와 같습니다.

다음 데모에서는 background-repeat 속성의 이러한 기능을 보여줍니다.

배경 위치

Browser Support

Source

웹의 일부 이미지에 background-repeat: no-repeat 선언으로 스타일이 지정되면 이러한 이미지가 컨테이너의 왼쪽 상단에 표시되는 것을 볼 수 있습니다.

배경 이미지의 초기 위치는 왼쪽 상단입니다. background-position 속성을 사용하면 이미지 위치를 오프셋하여 이 동작을 변경할 수 있습니다.

background-repeat와 마찬가지로 background-position 속성을 사용하면 기본적으로 두 개의 값으로 x축과 y축을 따라 이미지를 독립적으로 배치할 수 있습니다.

CSS 길이와 비율이 사용되면 첫 번째 매개변수는 가로축에, 두 번째 매개변수는 세로축에 해당합니다.

키워드만 사용되는 경우 키워드의 순서는 중요하지 않습니다.

권장사항

background-position: left 50%;

권장사항

background-position: top left;

권장사항

background-position: left top;

순서는 다양한 위치 축과 연결된 키워드에는 중요하지 않습니다.

금지사항

  background-position: 50% left;

CSS 값이 키워드와 함께 사용되는 경우 순서가 중요합니다. 첫 번째 값은 가로축을 나타내고 두 번째 값은 세로축을 나타냅니다.

금지사항

  background-position: left right;

동일한 축과 연결된 키워드는 동시에 사용할 수 없습니다.

background-position 속성에는 편리한 단일 값 축약도 있습니다. 생략된 값은 50%로 확인됩니다. 다음은 background-position 속성이 허용하는 키워드를 사용하여 이를 보여주는 예입니다.

기본 두 매개변수 형식과 하나의 매개변수 형식 외에도 background-position 속성은 최대 4개의 매개변수를 허용합니다.

3개 또는 4개의 매개변수가 사용되는 경우 브라우저가 CSS 상자의 어느 가장자리에서 오프셋이 시작되어야 하는지 계산할 수 있도록 CSS 길이 또는 비율 앞에 top, left, right 또는 bottom 키워드를 지정해야 합니다.

세 개의 매개변수가 사용되는 경우 CSS 길이 또는 값은 두 번째 또는 세 번째 매개변수일 수 있으며 나머지 두 개는 키워드입니다. 뒤에 오는 키워드는 CSS 길이 또는 값이 오프셋에 해당하는 가장자리가 무엇인지 결정하는 데 사용됩니다. 지정된 다른 키워드의 오프셋은 0으로 설정됩니다.

권장사항

background-position: bottom 88% right;

권장사항

background-position: right bottom 88%;

금지사항

background-position: 88% bottom right;

세 개 이상의 매개변수를 사용할 때 CSS 길이 값 앞에 top, right, bottom 또는 left 키워드가 있어야 합니다.

권장사항

background-position: bottom 88% right 33%;

권장사항

background-position: right 33% bottom 88%;

금지사항

background-position: 88% 33% bottom left;

세 개 이상의 매개변수를 사용할 때 CSS 길이 값 앞에 top, right, bottom 또는 left 키워드가 있어야 합니다.

background-position: top left 20%가 CSS 배경 이미지에 적용되면 이미지가 상자의 상단에 배치되고 20% 값은 상자의 왼쪽 (x축)에서 20% 오프셋을 나타냅니다.

background-position: top 20% left가 CSS 배경 이미지에 적용되면 20% 값은 CSS 상자의 상단 (y축)에서 20% 오프셋을 나타내며 이미지는 상자의 왼쪽에 배치됩니다.

4개의 매개변수가 사용되면 두 키워드는 지정된 각 키워드의 출처에 대한 오프셋에 해당하는 두 개의 값과 페어링됩니다. background-position: bottom 20% right 30%가 background-image에 적용되면 background-image는 CSS 상자의 하단에서 20%, 오른쪽에서 30% 떨어진 위치에 배치됩니다.

다음 데모는 이 동작을 보여줍니다.

다음은 CSS 및 키워드 값을 혼합하여 background-position 속성을 사용하는 추가 예입니다.

배경 크기

Browser Support

Source

background-size 속성은 배경 이미지의 크기를 설정합니다. 기본적으로 배경 이미지의 크기는 고유 (실제) 너비, 높이, 가로세로 비율을 기준으로 설정됩니다.

background-size 속성은 CSS 길이 및 비율 값 또는 특정 키워드를 사용합니다. 이 속성은 배경의 너비와 높이를 개별적으로 변경할 수 있도록 허용하는 최대 2개의 매개변수를 허용합니다.

background-size 속성은 다음 키워드를 허용합니다.

auto: 독립적으로 사용하면 배경 이미지의 크기가 고유 너비와 높이를 기준으로 조정됩니다. auto가 너비 (첫 번째 매개변수) 또는 높이 (두 번째 매개변수)의 다른 CSS 값과 함께 사용되면 auto로 설정된 크기는 이미지의 자연스러운 가로세로 비율을 유지하기 위해 필요에 따라 조정됩니다. 이는 background-size 속성의 기본 동작입니다.
cover: 배경 레이어의 전체 영역을 덮습니다. 이는 이미지가 크기 조절 또는 자르기를 거쳤음을 의미할 수 있습니다.
contain: 이미지를 늘리거나 자르지 않고 공간을 채우도록 크기를 조절합니다. 따라서 background-repeat가 no-repeat로 설정되지 않는 한 이미지가 반복되도록 하는 빈 공간이 남아 있을 수 있습니다.

후자의 두 가지는 다른 매개변수 없이 독립형으로 사용하도록 설계되었습니다.

다음 데모에서는 이러한 키워드가 작동하는 방식을 보여줍니다.

다음 키워드를 background-size에 적용하는 방법을 보여주는 데모입니다.

배경 첨부파일

Browser Support

Source

background-attachment 속성을 사용하면 레이어가 화면에 표시된 후 배경 이미지 (배경 레이어의 일부인 이미지)의 고정된 위치 동작을 수정할 수 있습니다.

scroll, fixed, local 키워드 3개를 허용합니다.

background-attachment 속성의 기본 동작은 scroll의 초기 값입니다. 더 많은 공간이 필요하면 이미지가 CSS 상자의 경계로 결정된 배경 레이어 내에서 해당 공간을 따라 이동합니다.

fixed 값을 사용하면 배경 이미지의 위치가 뷰포인트로 고정됩니다.

백그라운드 레이어 이미지가 원래 차지하던 공간을 화면 밖으로 스크롤 (또는 렌더링)해야 하는 경우 백그라운드 레이어 내 이미지는 전체 레이어가 뷰포트에서 화면 밖으로 스크롤될 때까지 백그라운드 레이어에서 설정한 원래 위치에 고정된 상태로 유지됩니다.

local 키워드를 사용하면 배경 이미지의 위치를 요소의 콘텐츠를 기준으로 고정할 수 있습니다. 이제 배경 이미지가 CSS 상자의 경계 안팎에서 렌더링될 때 배경 이미지가 차지하는 공간을 따라 이동합니다 (일반적으로 스크롤, 2D 또는 3D 변환으로 인해).

배경 출처

Browser Support

Source

background-origin 속성을 사용하면 특정 상자와 연결된 배경 영역을 수정할 수 있습니다. 이 속성이 허용하는 값은 상자의 border-box , padding-box, content-box 영역에 해당합니다 .

다음 데모를 사용하여 이러한 옵션을 사용해 보세요.

배경 클립

Browser Support

Source

background-clip 속성은 background-origin 속성으로 생성된 경계와 관계없이 배경 레이어에서 시각적으로 보이는 항목을 제어합니다.

background-origin와 마찬가지로 지정할 수 있는 영역은 CSS 배경 레이어를 렌더링할 수 있는 위치에 해당하는 border-box, padding-box, content-box입니다. 이러한 키워드를 사용하면 지정된 영역보다 더 멀리 있는 배경 렌더링이 잘리거나 클립됩니다.

background-clip 속성은 콘텐츠 상자 내 텍스트보다 더 길지 않도록 배경을 자르는 text 키워드도 허용합니다. CSS 상자 내 실제 텍스트에 이 효과가 나타나려면 텍스트가 부분적으로 또는 완전히 투명해야 합니다.

비교적 새로운 속성으로, 이 글을 작성하는 시점에서 Chrome 및 대부분의 브라우저에서는 이 속성을 사용하려면 -webkit- 접두사가 필요합니다.

Browser Support

Source

참고: 이 속성은 CSS 상자에 동시에 설정되는 background-clip: text와 호환되지 않습니다.

여러 배경

모듈 시작 부분에서 언급했듯이 배경 레이어를 사용하면 여러 하위 레이어를 정의할 수 있습니다. 편의상 이러한 하위 레이어를 배경이라고 하겠습니다.

여러 배경은 위에서 아래로 정의됩니다. 첫 번째 배경은 사용자에게 가장 가깝고 마지막 배경은 사용자에게 가장 먼 배경입니다.

정의된 유일한 배경 또는 마지막 레이어가 브라우저에 의해 최종 배경 레이어로 지정됩니다. 이 레이어만 background-color를 할당할 수 있습니다.

아래의 코드 스니펫과 실시간 데모에서 볼 수 있듯이 쉼표로 구분된 대부분의 배경 관련 CSS 속성을 사용하여 여러 레이어를 개별적으로 구성할 수 있습니다.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

배경 단축어

특히 여러 배경 레이어가 필요한 경우 상자의 배경 레이어에 더 쉽게 스타일을 지정할 수 있도록 다음과 같은 특정 패턴을 따르는 바로가기가 있습니다.

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

여러 배경을 선언하는 축약형에서는 순서가 중요합니다. 위치 값과 크기 값을 모두 제공해야 하며 슬래시 (/)로 구분해야 합니다. 출처와 클립 동작을 올바른 순서로 선언하면 둘 다에 유효한 키워드 설정을 동시에 활용할 수 있습니다.

다음 선언은 배경을 클립하고 콘텐츠 상자에서 배경을 가져옵니다.

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

이러한 약어 의미론을 고려하여 이전 코드 스니펫의 백그라운드 관련 선언은 다음과 같이 다시 작성할 수 있습니다.

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

이해도 확인

CSS 배경에 대한 지식 테스트

배경 이미지는 CSS 상자의 왼쪽 상단에 배치됩니다.

참

정답입니다.

거짓

이미지의 고유한 크기에 따라 이미지가 CSS 상자의 왼쪽 상단에 배치되지 않은 것처럼 보일 수 있습니다. 배경 이미지의 기본 위치를 변경하려면 background-position를 명시적으로 사용해야 합니다.

배경 이미지는 기본적으로 반복됩니다.

거짓

background-image가 반복되지 않도록 하려면 background-repeat: no-repeat를 명시적으로 사용해야 합니다. 또한 background-repeat: repeat-x 및 background-repeat: repeat-y를 사용하여 특정 축에서 반복을 방지할 수 있습니다.

참

배경 이미지는 기본적으로 반복됩니다.

다음 background-position 선언 중 유효한 것은 무엇인가요?

background-position: 50% left

CSS 값이 키워드와 함께 사용되는 경우 값의 순서가 중요합니다.

background-position: top right 33%

이렇게 하면 배경 이미지가 상자의 맨 위에 배치되고 상자의 오른쪽 가장자리에서 33% 떨어진 곳에 배치됩니다.

background-position: right bottom

이렇게 하면 배경 이미지가 상자의 오른쪽 끝과 하단에 배치됩니다. 서로 다른 축의 위치는 순서에 관계없이 이름을 지정할 수 있습니다.

background-position: left

이렇게 하면 배경 이미지가 상자의 맨 왼쪽에 배치되고 세로로 가운데에 배치됩니다. 축의 위치가 하나만 제공되면 배경 이미지가 반대 축의 중앙에 배치됩니다.

뷰포트 내에 고정되도록 배경 이미지를 설정하려면 다음을 사용하세요.

background-position: fixed

'background-position 속성의 잘못된 값입니다.'

background-fixed-to-viewport: true

background-fixed-to-viewport은 아직 CSS에 없습니다.

background-attachment: fixed

background-attachment: fixed는 현재 뷰포트 내에 고정되도록 배경 이미지를 명시적으로 설정합니다.

background-attachment: scroll

'background-attachment는 배경 이미지를 표시 영역 내에 고정하도록 설정하는 데 사용하는 속성입니다. 그러나 scroll는 배경 이미지를 기본적으로 상자 내 콘텐츠의 영향을 받지 않는 상자에 고정하는 속성의 기본값입니다.'

CSS 상자 내 배경의 기본 background-origin은 다음과 같습니다.

content-box

background-origin의 유효한 값이지만 기본값은 아닙니다.

border-box

유효한 background-origin 값이며, 미리 정렬된 테두리를 배경 위에 그릴 수 있지만 기본값은 아닙니다.

padding-box

background-origin의 기본값입니다. 배경을 콘텐츠 너머 상자의 테두리까지 렌더링할 수 있습니다.

margin-box

CSS 상자의 인식된 영역이지만 background-origin 속성의 잘못된 값입니다.

배경

CSS 팟캐스트 - 053: 배경

배경 색상

배경 이미지

url CSS 함수로 background-image 설정

CSS 그라데이션 배경

배경 이미지 반복

배경 위치

배경 크기

배경 첨부파일

배경 출처

배경 클립

여러 배경

배경 단축어

이해도 확인

`url` CSS 함수로 background-image 설정