배경

CSS 팟캐스트 - 053: 배경 를 통해 개인정보처리방침을 정의할 수 있습니다.

배경

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

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

배경 색상

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

소스

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

배경 이미지

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

소스

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

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

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

CSS 그라데이션 배경

두 가지 이상의 색상을 전달한 경우 배경 이미지를 생성할 수 있는 여러 그라데이션 CSS 함수가 있습니다.

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

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

배경 이미지가 반복됨

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

소스

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

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

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

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

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

약식에는 의도를 더 명확하게 하는 편리한 한 단어 옵션도 있습니다.

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

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

배경 위치

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

소스

웹상의 일부 이미지가 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 길이나 비율 앞에 top, left, right 또는 bottom 키워드가 있어야 브라우저에서 오프셋이 시작되는 CSS 상자의 가장자리를 계산할 수 있습니다.

세 개의 매개변수를 사용하는 경우 CSS 길이 또는 값은 두 번째 또는 세 번째 매개변수가 될 수 있고 나머지 두 개는 키워드가 될 수 있습니다. 성공한 키워드는 CSS 길이 또는 값이 오프셋에 해당하는 가장자리를 결정하는 데 사용됩니다. 지정된 다른 키워드의 오프셋이 0으로 설정됩니다.

권장사항
background-position: bottom 88% right;
권장사항
background-position: right bottom 88%;
금지사항
background-position: 88% bottom right;
드림 <ph type="x-smartling-placeholder"></ph> 3개 이상의 매개변수를 사용하는 경우 CSS 길이 값 앞에 top, right, bottom 또는 left 키워드 앞에 와야 합니다.
권장사항
background-position: bottom 88% right 33%;
권장사항
background-position: right 33% bottom 88%;
금지사항
background-position: 88% 33% bottom left;
드림 <ph type="x-smartling-placeholder"></ph> 3개 이상의 매개변수를 사용하는 경우 CSS 길이 값 앞에 top, right, bottom 또는 left 키워드 앞에 와야 합니다.

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

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

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

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

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

배경 크기

브라우저 지원

  • Chrome: 3. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <ph type="x-smartling-placeholder">

소스

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

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

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

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

후자 2는 다른 매개변수 없이 독립형으로 사용하기 위한 것입니다.

다음 데모는 이러한 키워드의 실제 예를 보여줍니다.

background-size에 이러한 키워드를 적용하는 방법을 시연합니다.

배경 첨부파일

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

소스

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

scroll, fixed, local의 3가지 키워드를 사용할 수 있습니다.

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

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

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

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

백그라운드 출처

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 3. <ph type="x-smartling-placeholder">

소스

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

다음 데모를 통해 옵션을 사용해 보세요.

배경 클립

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <ph type="x-smartling-placeholder">

소스

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

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

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

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

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <ph type="x-smartling-placeholder">

소스

를 통해 개인정보처리방침을 정의할 수 있습니다.

여러 배경

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

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

정의된 유일한 배경 또는 마지막 레이어는 브라우저에서 최종 배경 레이어로 지정합니다. 이 레이어만 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-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
'This is an invalid value for the background-position property.'
background-fixed-to-viewport: true
background-fixed-to-viewport는 아직 CSS에 없습니다.
background-attachment: fixed
background-attachment: fixed는 현재 표시 영역 내에서 고정되도록 배경 이미지를 명시적으로 설정합니다.
background-attachment: scroll
background-attachment는 표시 영역 내에서 고정될 배경 이미지를 설정하는 데 사용하는 속성입니다. 그러나 scroll는 상자 내 콘텐츠의 영향을 받지 않는 상자에 기본적으로 배경 이미지를 고정하는 속성의 기본값입니다.

CSS 상자 내 배경의 기본 배경 출처는 다음과 같습니다.

content-box
background-origin에 유효한 값이지만 기본값이 아닙니다.
border-box
background-origin에 유효한 값. 미리 정렬된 테두리는 배경 위에 칠할 수 있지만 기본값은 아닙니다.
padding-box
background-origin의 기본값입니다. 배경을 콘텐츠 너머로 상자의 테두리까지 렌더링할 수 있습니다.
margin-box
CSS 상자의 인식된 영역이지만 background-origin 속성에는 잘못된 값입니다.