CSS 팟캐스트 - 053: 배경
모든 CSS 상자 뒤에는 배경 레이어라는 특수 레이어가 있습니다. CSS는 여러 배경을 허용하는 등 의미 있는 변경을 수행하는 다양한 방법을 제공합니다.
배경 레이어는 사용자와 가장 멀리 있으며 padding-box
영역에서 시작하여 상자의 콘텐츠 뒤에 렌더링됩니다. 이렇게 하면 배경 레이어가 테두리와 전혀 겹치지 않습니다.
배경 색상
배경 레이어에 적용할 수 있는 가장 간단한 효과 중 하나는 색상을 설정하는 것입니다. background-color
의 초기 값은 transparent
이며, 이 값을 사용하면 상위 요소의 콘텐츠가 표시될 수 있습니다. 배경 레이어에 설정된 유효한 색상은 해당 요소에 그려진 다른 항목 뒤에 배치됩니다.
배경 이미지
background-color
레이어 위에 background-image
속성을 사용하여 배경 이미지를 추가할 수 있습니다. background-image
는 다음을 허용합니다.
url
CSS 함수를 사용하는 이미지 URL 또는 데이터 URI- 그라데이션 CSS 함수로 동적으로 생성된 이미지입니다.
url
CSS 함수로 background-image 설정
CSS 그라데이션 배경
두 개 이상의 색상을 전달할 때 background-image를 생성할 수 있는 여러 그라데이션 CSS 함수가 있습니다.
사용되는 그라데이션 함수와 관계없이 결과 이미지는 사용 가능한 공간의 크기에 맞게 기본 크기가 조정됩니다.
그라데이션 함수를 사용하여 background-image를 적용하는 예를 보여주는 데모입니다.
배경 이미지 반복
기본적으로 배경 이미지는 가로와 세로로 반복되어 배경 레이어의 전체 공간을 채웁니다.
다음 값 중 하나와 함께 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
속성이 허용하는 키워드를 사용하여 이를 보여주는 예입니다.
기본 두 매개변수 형식과 하나의 매개변수 형식 외에도 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%
가 background-image에 적용되면 background-image는 CSS 상자의 하단에서 20%, 오른쪽에서 30% 떨어진 위치에 배치됩니다.
다음 데모는 이 동작을 보여줍니다.
다음은 CSS 및 키워드 값을 혼합하여 background-position
속성을 사용하는 추가 예입니다.
배경 크기
background-size
속성은 배경 이미지의 크기를 설정합니다. 기본적으로 배경 이미지의 크기는 고유 (실제) 너비, 높이, 가로세로 비율을 기준으로 설정됩니다.
background-size
속성은 CSS 길이 및 비율 값 또는 특정 키워드를 사용합니다. 이 속성은 배경의 너비와 높이를 개별적으로 변경할 수 있도록 허용하는 최대 2개의 매개변수를 허용합니다.
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 배경에 대한 지식 테스트
배경 이미지는 CSS 상자의 왼쪽 상단에 배치됩니다.
배경 이미지는 기본적으로 반복됩니다.
다음 background-position
선언 중 유효한 것은 무엇인가요?
background-position: right bottom
background-position: left
background-position: 50% left
background-position: top right 33%
뷰포트 내에 고정되도록 배경 이미지를 설정하려면 다음을 사용하세요.
background-attachment: fixed
background-attachment: scroll
background-fixed-to-viewport: true
background-position: fixed
CSS 상자 내 배경의 기본 background-origin은 다음과 같습니다.
border-box
content-box
margin-box
padding-box