CSS Backgrounds
CSS Backgrounds: 웹 페이지에서 배경 설정하는 방법
CSS에서는 웹 페이지의 배경을 다양한 방식으로 설정할 수 있습니다. 배경은 웹사이트의 디자인과 사용자 경험에 중요한 요소로 작용하며, 색상부터 이미지, 그라데이션까지 다양한 스타일링 옵션을 제공합니다. 이 자료에서는 CSS 배경 속성을 자세히 설명하고, 자주 사용되는 예제를 통해 쉽게 이해할 수 있도록 구성되었습니다.
1. CSS 배경 속성 (Background Properties)
CSS는 여러 가지 배경 속성을 제공하며, 이를 사용하여 배경을 설정하고 조정할 수 있습니다. 배경 속성은 보통 함께 사용되며, HTML 요소의 배경 색상, 이미지, 위치, 반복 여부 등을 제어할 수 있습니다.
주요 CSS 배경 속성은 다음과 같습니다:
background-color: 배경 색상을 설정합니다.background-image: 배경 이미지를 설정합니다.background-repeat: 배경 이미지의 반복 여부를 설정합니다.background-position: 배경 이미지의 위치를 설정합니다.background-size: 배경 이미지의 크기를 설정합니다.background-attachment: 배경 이미지의 스크롤 동작을 제어합니다.background: 여러 배경 속성을 한 번에 지정하는 단축 속성입니다.
2. background-color 속성
background-color 속성은 HTML 요소의 배경 색상을 설정하는 속성입니다. 기본적으로 색상 이름, 16진수 값, RGB, HSL 값을 사용하여 배경색을 지정할 수 있습니다.
예시:
body {
background-color: #f0f0f0; /* 밝은 회색 */
}
p {
background-color: rgba(255, 0, 0, 0.3); /* 30% 투명한 빨간색 */
}- *
#f0f0f0*은 밝은 회색을 나타냅니다. - *
rgba(255, 0, 0, 0.3)*은 투명도가 30%인 빨간색입니다.
background-color는 간단한 배경 설정에 자주 사용되며, 텍스트나 콘텐츠 영역을 강조할 때 유용합니다.
3. background-image 속성
background-image 속성은 HTML 요소에 배경 이미지를 추가하는 속성입니다. 이미지 경로는 url()로 지정하며, 여러
이미지를 겹쳐서 배치할 수도 있습니다.
예시:
body {
background-image: url('background.jpg'); /* 배경 이미지 설정 */
}여러 이미지 겹치기:
body {
background-image: url('texture.png'), url('pattern.jpg');
}이 예시에서는 두 개의 이미지를 겹쳐서 배경으로 설정하며, 먼저 나열된 이미지가 위에 표시됩니다.
4. background-repeat 속성
배경 이미지를 반복할지 여부를 결정하는 속성입니다. 이미지를 반복할 수 있는 방향은 가로, 세로 또는 모두입니다.
background-repeat의 옵션:
repeat: 이미지를 가로와 세로로 모두 반복 (기본값)repeat-x: 이미지를 가로 방향으로만 반복repeat-y: 이미지를 세로 방향으로만 반복no-repeat: 이미지를 반복하지 않음
예시:
div {
background-image: url('pattern.png');
background-repeat: no-repeat;
}위 코드는 pattern.png 이미지를 한 번만 표시하며, 반복하지 않도록 설정합니다.
5. background-position 속성
background-position 속성은 배경 이미지의 위치를 설정하는 데 사용됩니다. 기본값은 **좌측 상단(0% 0%)**이지만,
center, top, bottom, left, right와 같은 키워드를 사용하거나, 픽셀
또는 퍼센트 단위로 설정할 수 있습니다.
예시:
div {
background-image: url('logo.png');
background-position: center;
}이 코드는 배경 이미지를 요소의 가운데에 위치시킵니다.
6. background-size 속성
background-size 속성은 배경 이미지의 크기를 설정합니다. 배경 이미지를 화면 크기에 맞추거나 비율을 조정할 수 있습니다.
background-size의 옵션:
cover: 요소 전체를 덮도록 이미지를 확장. 이미지가 잘릴 수 있음.contain: 이미지가 요소 내에 완전히 들어가도록 조정. 이미지 비율 유지.- 정확한 크기:
width height형식으로 이미지 크기를 지정 (예:100px 50px)
예시:
header {
background-image: url('header-bg.jpg');
background-size: cover;
}위 코드는 이미지를 요소 전체를 덮도록 확장합니다.
7. background-attachment 속성
background-attachment 속성은 배경 이미지가 스크롤할 때의 동작을 설정합니다.
background-attachment의 옵션:
scroll: 사용자가 페이지를 스크롤할 때 배경 이미지도 함께 스크롤 (기본값)fixed: 배경 이미지가 화면에 고정되어 스크롤하지 않음local: 요소의 스크롤에 따라 배경도 스크롤
예시:
section {
background-image: url('background.jpg');
background-attachment: fixed;
}위 코드는 배경 이미지가 고정되어 스크롤해도 움직이지 않게 설정합니다.
8. background 단축 속성
background 속성은 여러 배경 속성을 한 줄로 지정할 수 있는 단축 속성입니다. background-color,
background-image, background-position, background-size,
background-repeat, background-attachment 속성을 한 번에 지정할 수 있습니다.
예시:
body {
background: url('pattern.png') no-repeat center/cover #f0f0f0 fixed;
}위 코드는 다음을 설정합니다:
- 배경 이미지:
pattern.png - 반복 없음:
no-repeat - 이미지 위치: 가운데
center - 이미지 크기: 요소 전체를 덮도록
cover - 배경 색상: 밝은 회색
#f0f0f0 - 이미지 고정: 스크롤할 때 고정
fixed
9. 배경 그라데이션 (CSS Gradients)
- *그라데이션(Gradients)**은 색상이 부드럽게 변하는 효과를 말합니다. CSS 그라데이션은 이미지 대신 사용할 수 있으며, 선형 그라데이션(linear-gradient), **방사형 그라데이션(radial-gradient)**이 대표적입니다.
선형 그라데이션:
div {
background: linear-gradient(to right, red, yellow);
}위 코드는 왼쪽에서 오른쪽으로 빨간색에서 노란색으로 변하는 그라데이션을 설정합니다.
방사형 그라데이션:
div {
background: radial-gradient(circle, blue, white);
}위 코드는 중앙에서 바깥으로 퍼지는 파란색에서 흰색으로 변하는 그라데이션을 설정합니다.
10. 자주 사용되는 배경 예제
단색 배경:
body {
background-color: #e0e0e0;
}배경 이미지와 텍스트:
header {
background-image: url('header-bg.jpg');
background-size: cover;
color: white;
text-align: center;
}고정된 배경 이미지:
section {
background-image: url('fixed-background.jpg');
background-attachment: fixed;
background-size: cover;
}이 자료는 CSS에서 배경을 설정하고 조정하는 다양한 방법을 설명합니다. 배경 색상, 이미지, 그라데이션을 사용하여 웹 디자인을 더욱 풍부하게 만들 수 있으며, CSS 배경 속성을 활용하면 더욱 세련된 웹 페이지를 쉽게 만들 수 있습니다.