배경

CSS 팟캐스트 - 053: 배경

배경

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

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

배경 색상

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

배경 이미지

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

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

url CSS 함수로 배경 이미지 설정

CSS 그라데이션 배경

두 개 이상의 색상이 전달될 때 배경 이미지를 생성할 수 있는 몇 가지 그라데이션 CSS 함수가 있습니다.

어떤 그라데이션 함수를 사용하든 결과 이미지는 사용 가능한 공간의 양에 맞게 기본 크기로 지정됩니다.

그라데이션 함수를 사용하여 배경 이미지를 적용하는 예를 보여주는 데모:

배경 이미지 반복

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

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

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

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

단일 값을 사용하는 경우 이 값은 가로 및 세로 반복에 모두 적용됩니다.

또한 약식에는 한 단어로 된 옵션이 있어 의도를 더 명확하게 표현할 수 있습니다.

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

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

배경 위치

웹의 일부 이미지가 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;

  background-position: left right;

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

기본 매개변수 양식 2개와 매개변수 형식 1개 외에도 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;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% 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%가 배경 이미지에 적용되면 배경 이미지는 하단에서 20%, CSS 상자의 오른쪽에서 30% 에 배치됩니다.

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

다음은 CSS와 키워드 값을 함께 사용하여 background-position 속성을 사용하는 예입니다.

배경 크기

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

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

background-size 속성에는 다음과 같은 키워드가 허용됩니다.

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

후자의 두 가지 매개변수는 다른 매개변수 없이 독립형 방식으로 사용하기 위한 것입니다.

다음 데모는 이러한 키워드의 실제 동작을 보여줍니다.

이러한 키워드를 background-size에 적용하는 방법을 보여줍니다.

배경 첨부파일

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

scroll, fixed, local의 3가지 키워드가 허용됩니다.

background-attachment 속성의 기본 동작은 scroll의 초깃값입니다. 더 많은 공간이 필요한 경우 이미지는 CSS 상자의 경계에 의해 결정되는 백그라운드 레이어 내에서 해당 공간과 함께 이동합니다.

fixed 값을 사용하면 배경 이미지의 위치가 표시 영역에 고정됩니다.

원래 사용된 배경 레이어 이미지의 공간이 화면 밖으로 스크롤 (또는 렌더링)되어야 하면 배경 레이어 내의 이미지는 표시 영역에 의해 전체 레이어가 화면 밖으로 스크롤될 때까지 배경 레이어가 사용 설정된 원래 위치에 고정됩니다.

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

백그라운드 출처

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

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

배경 클립

background-clip 속성은 background-origin 속성에서 만든 경계와 관계없이 백그라운드 레이어에서 시각적으로 표시되는 항목을 제어합니다.

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

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

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

여러 배경

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

여러 배경은 위에서 아래로 정의됩니다. 첫 번째 배경이 사용자에게 가장 가깝고 마지막 배경이 사용자로부터 가장 멀리 떨어져 있습니다.

정의된 유일한 배경 또는 마지막 레이어가 브라우저에 의해 최종 배경 레이어로 지정됩니다. 이 레이어만 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 배경에 관한 지식 테스트