[CSS3]배경에 생명을 불어넣는 CSS: 배경 속성의 모든 것

HTML 태그는 박스 모델(Box Model)을 따릅니다. 박스 모델에서 Padding과 Content 영역은 요소의 배경을 나타내며, 이 영역에 색상이나 이미지를 지정하여 스타일을 꾸밀 수 있습니다. 이제 이러한 박스 모델의 배경 스타일링 방법을 자세히 살펴보겠습니다.

≣ 목차

• background-color🎨
• background-image🖼️
• background-repeat🔁
• background-position📍
• background-size📏
• background-attachment📌
• 핵심 내용👀

background-color🎨

배경색을 설정하는 속성입니다. 간단한 색상 코드나 RGB, HSL 등의 값을 사용할 수 있습니다.
배경의 색상을 지정하기 위해서는 요소의 너비와 높이를 지정하여야 표시됩니다.

body {
    background-color: #f0f0f0;
}

색상 표기법에 관한 내용은 아래 포스팅을 참고해 주세요😁

[CSS3]CSS의 특징: 기본 스타일 시트부터 상속까지

background-image🖼️

배경 이미지를 지정하는 속성입니다. background-image 속성은 url() 함수 내에 이미지 파일의 경로를 지정하여 사용합니다.

body {
    background-image: url('background.jpg');
}

HTML 요소는 주로 내용에 따라 자동으로 크기가 조정됩니다. 그러나 만약 요소에 내용이 없다면 해당 요소는 크기를 가지지 않게 됩니다. 이 경우에는 배경 이미지도 표시되지 않습니다.

배경 이미지를 올바르게 표시하기 위해서는 해당 요소의 너비와 높이를 명시적으로 지정해주어야 합니다. 이렇게 하면 비어있는 요소라도 적절한 크기를 가지며 배경 이미지를 표시할 수 있습니다.

background-repeat🔁

background-repeat 속성은 배경 이미지가 요소에 대해 반복되는 방식을 제어합니다. 이미지가 요소를 가득 채우지 못하는 경우에는 자동으로 이미지를 반복하여 배경을 채웁니다. 이를 통해 배경 이미지를 한 번만 표시하거나 요소를 채울 수 있도록 설정할 수 있습니다. 이 속성을 사용하여 배경 이미지의 반복 여부와 방향을 정확하게 조절할 수 있습니다.

background-repeat 속성 값

1. repeat: 배경 이미지가 수평과 수직으로 반복됩니다. 이미지의 복제본이 요소를 채우도록 반복 배치됩니다.
2. repeat-x: 배경 이미지가 수평으로만 반복됩니다. 수직으로는 반복되지 않습니다.
3. repeat-y: 배경 이미지가 수직으로만 반복됩니다. 수평으로는 반복되지 않습니다.
4. no-repeat: 배경 이미지가 반복되지 않고 한 번만 표시됩니다. 이미지가 요소에 한 번만 표시됩니다.
5. round: 이미지를 반복하여 요소를 가득 채우되, 이미지의 크기가 변형되어 끝에 잘리지 않고 자연스럽게 반복됩니다.
6. space: 이미지가 요소를 채우도록 반복되지만, 이미지 사이의 간격이 유지됩니다. 각 이미지의 주위에 동일한 간격이 유지됩니다.

예를 들어, 다음과 같이 CSS를 사용하여 배경 이미지를 설정하고 반복을 제어할 수 있습니다.

.element {
    background-image: url('이미지주소');
    background-repeat: repeat-x; /* 배경 이미지를 수평으로만 반복 */
}

이렇게 하면 해당 요소의 배경 이미지가 수평으로만 반복되며, 수직으로는 반복되지 않습니다.

background-repeat 활용 사례

1. 가로 또는 세로 반복 이미지

가로 또는 세로로만 반복되는 이미지를 만들고 싶을 때 repeat-x 또는 repeat-y 값을 사용합니다.

.banner {
    background-image: url('stripes.jpg');
    background-repeat: repeat-y;
}

2. 이미지 반복 제한

특정 방향으로만 이미지를 반복하거나, 전체적으로 반복하지 않도록 설정하여 디자인을 제어할 수 있습니다.

.header {
    background-image: url('header-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    height: 200px;
}

background-position📍

background-position 속성은 CSS에서 배경 이미지의 위치를 지정하는 데 사용됩니다. 이 속성을 사용하면 배경 이미지를 요소 내에서 어디에 배치할지 정확하게 제어할 수 있습니다.

가장 일반적인 사용 방법은 다음과 같습니다.

.element {
    background-image: url('이미지주소');
    background-position: X위치 y위치;
}

background-position 속성 값은 수평 위치와 수직 위치를 나타내는 데 사용됩니다. 가로 위치와 세로 위치는 각각 키워드, 백분율, 길이 값 등으로 지정할 수 있습니다.
background-position속성 값은 1개만 사용해도 되고, 또는 2개를 사용할 수 있습니다. 값이 1개인 경우에는 그 값이 x축 값이 되고, y축 값은 기본으로 center가 됩니다. 2개의 값을 사용하면 각각이 x축과 y축 값으로 지정됩니다.

background-position 속성 값

가로 위치(x축)를 나타내는 값은 다음 중 하나일 수 있습니다:

• left: 요소의 왼쪽에 배치합니다.
• center: 요소의 가운데에 배치합니다.
• right: 요소의 오른쪽에 배치합니다.
• 길이 값(px, em 등): 요소의 왼쪽 또는 오른쪽 가장자리에서 지정한 거리만큼 떨어진 위치에 배치합니다.
• 백분율 값: 요소의 가로 폭에 대한 백분율로, 왼쪽에서부터 지정한 비율의 위치에 배치합니다.

세로 위치(y축)를 나타내는 값도 위와 비슷합니다.

• top: 요소의 위쪽에 배치합니다.
• center: 요소의 가운데에 배치합니다.
• bottom: 요소의 아래쪽에 배치합니다.
• 길이 값(px, em 등): 요소의 위쪽 또는 아래쪽 가장자리에서 지정한 거리만큼 떨어진 위치에 배치합니다.
• 백분율 값: 요소의 세로 폭에 대한 백분율로, 위에서부터 지정한 비율의 위치에 배치합니다.

예를 들어, background-position: right top;은 배경 이미지를 요소의 오른쪽 상단에 배치하고, background-position: 50% 50%;은 배경 이미지를 요소의 가운데에 배치합니다.

background-position 속성은 이미지를 정확한 위치에 배치하여 디자인의 세부 조정을 할 때 유용합니다.

background-position 활용 사례

1. 가운데 정렬

.header {
    background-image: url('header-bg.jpg');
    background-position: center center;
    height: 200px;
}

2. 이미지 일부 감추기

.thumbnail {
    background-image: url('thumbnail.jpg');
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 100px;
    overflow: hidden;
}

3. 텍스트와 이미지 조합

.feature {
    background-image: url('feature.jpg');
    background-position: left center;
    padding-left: 100px; /* 이미지와 텍스트 사이 간격 조절 */
}

background-size📏

배경 이미지의 크기를 조절합니다. 이 속성을 사용하여 배경 이미지를 확대하거나 축소하거나, 반복되지 않는 영역에 맞게 조절할 수 있습니다. 가장 일반적인 사용법은 다음과 같습니다.

.element {
    background-image: url('이미지주소');
    background-size: cover; /* 배경 이미지를 요소에 맞게 확대 또는 축소하여 채웁니다. */
}

background-size 속성 값

1. auto: 기본값으로, 배경 이미지의 원래 크기를 유지합니다.
2. cover: 배경 이미지가 요소를 완전히 덮을 수 있도록 이미지를 확대 또는 축소합니다. 이미지의 가로 또는 세로 중 한쪽이 요소와 맞지 않을 수 있습니다.
3. contain: 배경 이미지가 요소 안에 모두 들어가도록 이미지를 확대 또는 축소합니다. 이미지의 가로 또는 세로 중 한 쪽이 요소에 맞지 않을 수 있습니다.
4. 길이 값(px, %) 또는 백분율 값: 배경 이미지의 크기를 직접 지정할 수 있습니다. 예를 들어, 100px 200px는 이미지의 가로를 100픽셀, 세로를 200픽셀로 설정합니다.
   

cover와 contain 차이점⭐

cover와 contain은 비슷해 보이지만 두 값의 주요 차이점은 다음과 같습니다.

1. cover:
   • 배경 이미지가 요소를 완전히 덮을 수 있도록 이미지를 확대 또는 축소합니다.
   • 이미지의 한 쪽이 요소와 맞지 않을 수 있습니다. 일반적으로 요소의 크기와 비율에 상관없이 이미지가 요소를 완전히 덮을 수 있도록 보장됩니다.
   • 결과적으로 이미지가 요소를 덮을 때, 이미지가 잘릴 수 있습니다. 예를 들어, 가로로 긴 이미지의 경우 위와 아래가 잘릴 수 있습니다.
2. contain:
   • 배경 이미지가 요소 안에 모두 들어가도록 이미지를 확대 또는 축소합니다.
   • 이미지의 가로 또는 세로 중 한쪽이 요소와 맞지 않을 수 있습니다. 일반적으로 이미지의 측면이 요소와 맞지 않을 수 있습니다.
   • 결과적으로 이미지가 요소 내에 완전히 보존되며, 이미지가 잘릴 위험이 적습니다. 요소에 딱 맞게 이미지가 표시됩니다.

따라서 cover는 요소를 완전히 채우고 이미지가 잘릴 수 있지만, contain은 이미지를 완전히 보존하고 요소 내에 맞게 조절됩니다. 선택은 디자인의 목적과 이미지의 종류에 따라 다릅니다.

TIP✨
background-position 속성을 background-size 속성 값으로 cover를 지정하여 함께 사용하면 좋은 효과를 얻을 수 있습니다. cover 값은 이미지의 가로와 세로 비율을 유지하면서 요소의 배경을 완전히 채울 때까지 이미지를 확대하는 방식입니다. 이때 background-position 속성 값을 center로 지정하면 이미지가 요소의 정중앙에 위치한 것처럼 보이게 됩니다.

background-size 활용 사례

1. 반응형 배경 이미지

.banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
    height: 300px;
}

2. 이미지 갤러리

.thumbnail {
    background-image: url('thumbnail.jpg');
    background-size: contain;
    width: 150px;
    height: 100px;
}

3. 텍스트와 이미지 조합

.feature {
    background-image: url('feature.jpg');
    background-size: auto;
    padding-left: 100px; /* 이미지와 텍스트 사이 간격 조절 */
}

background-attachment📌

CSS background-attachment 속성은 배경 이미지가 스크롤되는 동안 고정되는지 여부를 지정합니다. 이 속성을 사용하면 배경 이미지의 스크롤 동작을 조절하여 웹 페이지의 디자인을 향상할 수 있습니다.

background-attachment 속성 값

1. scroll: 배경 이미지가 요소와 함께 스크롤됩니다. (기본값)
2. fixed: 배경 이미지가 요소에 고정되어 스크롤되지 않습니다.
3. local: 배경 이미지가 내부 스크롤 박스에 고정되어 스크롤됩니다.

body {
    background-image: url('background.jpg');
    background-attachment: fixed;
}

위의 예제에서 배경 이미지는 페이지를 스크롤해도 고정됩니다.

background-attachment 활용 사례

1. 고정 헤더

고정 헤더를 만들 때 배경 이미지를 고정하여 스크롤되지 않도록 할 수 있습니다.

.header {
    background-image: url('header-bg.jpg');
    background-attachment: fixed;
    height: 100px;
}

2. 스크롤에 따라 변하는 배경 이미지

내용 스크롤에 따라 배경 이미지가 일부만 이동하도록 만들 수 있습니다.

.section {
    background-image: url('scroll-bg.jpg');
    background-attachment: local;
}

3. 페이지 섹션 구분

각 페이지 섹션에 고정된 배경 이미지를 적용하여 시각적으로 구분할 수 있습니다.

.section {
    background-image: url('section-bg.jpg');
    background-attachment: fixed;
    height: 500px;
}

핵심 내용👀