🎨 CSS 배경 설정 완벽 가이드

배경을 적절히 설정하면 콘텐츠가 더 돋보이게 만들어 웹 페이지 디자인의 품격을 높일 수 있습니다. 이번 포스팅에서는 CSS를 사용해 배경을 설정하는 방법에 대해 알아보겠습니다. 배경 색상, 이미지, 크기, 위치 등 다양한 옵션을 활용하여 디자인을 꾸미는 방법을 살펴봅시다.

📌 박스에 배경 추가하기

CSS에서는 배경 색상, 배경 이미지, 배경 크기 등을 background 속성을 사용하여 설정할 수 있습니다. 배경은 요소의 콘텐츠를 뒷받침하고, 시각적으로 콘텐츠를 더욱 강조하는 역할을 합니다.

🔹 background 속성 사용법

background 속성은 여러 하위 속성을 한 번에 설정할 수 있는 단축 속성입니다. 이를 통해 배경에 관련된 모든 설정을 한 줄로 지정할 수 있습니다.

✅ 예시

div {
  background: #f0f0f0 url('background.jpg') no-repeat center center fixed;
}
  • background-color: 배경 색상 지정 / 색상
  • background-clip:요소내 배경의 적용 범위 /별도의 키워드 (border-box; padding-box; content-box) 컬러는 범위를 지정해주고 
  • background-origin: 요소내 배경의 시작위치 / 별도의 키워드 (border-box; padding-box; content-box) 이미지는 어디서부터시작할지를 정해준다.
  • background-size: 배경 이미지의 크기  / 수치와단위
  • background-image: 배경 이미지 지정 / 이미지 url
  • background-position: 배경 이미지 위치 지정 / 수치와 단위   (top,bottom,center,right,left) 키보드 조합가능 (x,y값으로 이동가능 ex. 100px 50px) 오른쪽으로갈때 x축의 값이커지고 밑으로내려갈경우 y  값이 커진다.)
  • background-repeat: 배경 이미지 반복 설정 / 별도의 키워드 (repeat; 기본값, repeat-x, repeat-y, no-repeat,)
  • background-attachment: 배경 이미지 고정 여부

📌 배경 색상 설정 배경 색상은 background-color 속성으로 설정합니다. 색상은 키워드, RGB, HSL, 16진수 색상 코드 등 다양한 방식으로 지정할 수 있습니다.

✅ 예시

div {
  background-color: lightblue;
}
  • 키워드: red, blue, green 등
  • RGB: rgb(255, 0, 0) (빨간색)
  • HSL: hsl(120, 100%, 50%) (초록색)
  • 16진수: #ff0000 (빨간색)

📌 배경 이미지 설정 배경 이미지는 background-image 속성을 사용하여 설정합니다. 이때 이미지 URL을 입력하여 이미지를 불러오고, 다양한 옵션을 설정할 수 있습니다.

✅ 예시

div {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center center;
}
  • background-size: cover, contain으로 이미지 크기 조정
  • background-position: 이미지의 위치 지정
  • background-repeat: 이미지 반복 여부 설정

📌 배경 크기와 위치 설정 배경 이미지의 크기와 위치를 조정하는 방법도 매우 중요합니다. background-size와 background-position 속성을 사용하여 배경 이미지를 더 세밀하게 설정할 수 있습니다.

✅ 예시

div {
  background-image: url('image.jpg');
  background-size: 50% 50%;  /* 너비 50%, 높이 50%로 설정 */
  background-position: right bottom;
}
  • background-size: auto, cover, contain 또는 수치로 크기 설정
  • background-position: top left, center center, bottom right 등 위치 설정
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible"
        contect="IE=edge"
        >
        <title>CSS 문서사용하기기</title>
        <style>
         div{
            width: 300px;
            height: 300px;
            padding: 20px;
            border: 20px double green;

            /* background-color: yellowgreen; */
            background-clip: border-box;
            background-image: url(images/45.jpg);
            background-size: 200px 200px;
            background-repeat: no-repeat;

            background-origin: content-box;
            background-position: center;

        }
        </style>
    </head>
    <body>
       <div></div>

    </body>
</html>

🧠 배경 속성 복습

속성 설명 예시

background 여러 배경 속성을 단축하여 설정 background: #f0f0f0 url('image.jpg') no-repeat;
background-color 배경 색상 설정 background-color: lightblue;
background-image 배경 이미지 설정 background-image: url('image.jpg');
background-size 배경 이미지 크기 조정 background-size: cover;
background-position 배경 이미지 위치 설정 background-position: center center;
background-repeat 배경 이미지 반복 여부 설정 background-repeat: no-repeat;

✨ 마무리 요약

  • CSS 배경은 요소의 시각적 스타일을 돋보이게 합니다.
  • 다양한 배경 색상, 이미지, 크기와 위치 속성을 활용하여 배경을 설정할 수 있습니다.
  • background 속성으로 여러 배경 관련 속성을 한 번에 설정할 수 있습니다.

이제 CSS 배경 설정을 마스터하여 멋진 웹 디자인을 구현해보세요! 🌟💻

'HTML & CSS' 카테고리의 다른 글

Chapter 2-9. 텍스트 꾸미기(CSS)  (0) 2025.03.31
Chapter 2-8. 색깔을 지정하는 다양한 방법(CSS)  (0) 2025.03.31
Chapter 2-6. 여백다루기(CSS)  (0) 2025.03.31
Chapter 2-5 테두리 스타일(CSS)  (0) 2025.03.31
Chapter 2-4 박스모델이란?(CSS)  (0) 2025.03.31

티스토리툴바