CSS - 여러 배경들

안녕하세요, 미래의 웹 디자이너 여러분! 오늘 우리는 CSS 여러 배경들의 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 많은 예제와 설명으로 여러분을 이 여정을 안내해 드릴 거예요. 여러분의 좋아하는 음료를 손에 들고, 시작해 보세요!

문법

들어가기 전에, 기본적인 것부터 시작해 보겠습니다. CSS에서 여러 배경을 사용하는 문법은 매우 간단합니다:

셀렉터 {
background: 배경1, 배경2, ..., 배경N;
}

각 배경은 쉼표로 구분되며, 첫 번째에서 마지막까지 쌓입니다. 첫 번째 배경은 맨 위에 있으며, 마지막 배경은 맨 아래에 있습니다. 팬케이크를 쌓는 것처럼 생각하면 됩니다 - 盤에 먼저 올린 것은 맨 위에 있게 됩니다!

CSS 여러 배경들 - background-image 속성 사용

먼저 background-image 속성을 사용한 간단한 예제를 보겠습니다:

.multi-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-repeat: no-repeat, repeat;
background-position: center center, top left;
}

이 예제에서 우리는 요소에 두 개의 배경 이미지를 적용하고 있습니다. top-image.png는 맨 위에 배치되고 반복되지 않으며, bottom-image.png는 그 아래에 배치되고 반복됩니다. 상단 이미지는 중앙에 배치되고, 하단 이미지는 왼쪽 상단에서 시작합니다.

CSS 여러 배경들 - background-size 속성 사용

이제 배경 이미지의 크기를 어떻게 조정할 수 있는지 보겠습니다:

.sized-bg {
background-image:
url('small-icon.png'),
url('large-pattern.png');
background-size: 50px 50px, cover;
background-repeat: no-repeat, repeat;
background-position: top right, center;
}

여기서 small-icon.png의 크기를 50x50 픽셀로 설정하였고, large-pattern.png는 전체 요소를 덮이게 설정하였습니다. 이는 작은 로고나 아이콘과 더 큰 배경 패턴을 결합하는 데 유용합니다.

CSS 여러 배경들 - background 속성 사용

background 축약 속성을 사용하면 모든 배경 속성을 한 번에 설정할 수 있습니다:

.shorthand-bg {
background:
url('top-layer.png') no-repeat center / 100px,
linear-gradient(to bottom, #f00, #00f) no-repeat center / cover;
}

이 예제는 이미지와 그라디언트 배경을 결합하고 있습니다. 이미지는 중앙에 배치되고 크기를 100px로 설정하였고, 그라디언트는 전체 요소를 덮이게 설정하였습니다. 컬러풀한 사이드에 체리를 올리는 것처럼 생겼습니다!

CSS 여러 배경들 - 전체 크기 이미지

때로는 배경을 전체로 덮이게 하고 싶을 때가 있습니다:

.full-size-bg {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('landscape.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}

이렇게 하면 전체 크기의 배경 이미지와 반투명 오버레이가 만들어집니다. 이는 극적인 헤로 섹션이나 전체 페이지 배경을 만드는 데 완벽합니다.

CSS 여러 배경들 - 헤로 이미지

헤로 섹션에 대해 이야기하자면, 이렇게 만들 수 있습니다:

.hero-bg {
background:
linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
url('hero-image.jpg') no-repeat center center / cover;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
color: white;
}

이렇게 하면 배경 이미지와 그라디언트 오버레이가 왼쪽에서 오른쪽으로 가볍게 사라지는 헤로 섹션이 만들어집니다. 웹사이트의 대단한 오프닝을 위한 무대를 설정하는 것처럼 느껴집니다!

CSS 여러 배경들 - background-origin 속성 사용

background-origin 속성은 배경 이미지가 어디에서 위치할지 결정합니다:

.origin-bg {
background-image: url('pattern.png');
background-origin: content-box, padding-box, border-box;
background-repeat: no-repeat;
border: 10px dashed black;
padding: 20px;
}

이 속성은 배경이 요소의 박스 모델과 관련된 정확한 위치에서 시작할 때 특히 유용할 수 있습니다.

CSS 여러 배경들 - background-clip 속성 사용

background-clip 속성은 배경이 얼마나 멀리 확장되어야 하는지 정의합니다:

.clip-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-clip: content-box, padding-box;
border: 10px solid rgba(0,0,0,0.5);
padding: 20px;
}

이 속성을 사용하면 배경을 박스 모델의 다른 부분에 따라 자를 수 있어 흥미로운 레이어링 효과를 만들 수 있습니다.

CSS 여러 배경들 - 관련 속성들

여러 배경과 함께 사용할 수 있는 관련 속성들의 표를 보여드리겠습니다:

속성	설명
background-image	하나 이상의 배경 이미지를 설정합니다
background-position	각 배경 이미지의 시작 위치를 설정합니다
background-size	배경 이미지의 크기를 지정합니다
background-repeat	배경 이미지의 반복 방식을 설정합니다
background-origin	배경 이미지의 위치 지정 영역을 지정합니다
background-clip	배경이 요소 내에서 얼마나 멀리 확장되는지 정의합니다
background-attachment	배경 이미지가 페이지의 나머지와 함께 스크롤되는지 또는 고정되는지 설정합니다

이 속성들을 개별적으로 사용하거나 background 축약 속성으로 결합하여 더 간결한 코드를 작성할 수 있습니다.

그럼 여러분, CSS에서 아름다운 멀티 레이어 배경을 만드는 지식을 얻었어요! 연습이 완벽을 만들어 준다는 것을 기억하고, 이 속성들을 실험해 보지 마세요. 누가 알략니까? 여러분이 다음 큰 웹 디자인 트렌드를 만들 수도 있을 거예요!

행복하게 코딩하세요, 여러분의 배경은 항상 완벽하게 레이어링되기를 바랍니다!

Credits: Image by storyset