[CSS] CSS 배경 스타일 쉽게 배우기 | 배경색, 배경이미지 활용법

crushed-taro 2025. 3. 20. 15:16

728x90

[CSS] CSS 목록 스타일 완벽 가이드 : ul, ol, li 꾸미는 방법

CSS 문단 스타일 완벽 가이드: 정렬, 간격, 줄 간격 설정하기1. 목록 스타일list-style-typelist-style-type 속성은 목록 마커의 유형을 지정하는 데 사용됨.disc원형circle원형 (비어 있음)square사각decimal숫자

crushed-taro.tistory.com

1. 배경 스타일

background
- CSS 배경 속성은 요소의 배경을 지정하는 데 사용됩니다. 다음은 가장 일반적인 배경 속성

background-color	요소의 배경색을 지정
background-image	요소의 배경 이미지를 지정
background-repeat	요소의 배경 이미지를 반복할 것인지 여부를 지정
background-position	요소의 배경 이미지 위치를 지정
background-size	요소의 배경 이미지 크기를 지정
background-attachment	요소의 배경 이미지가 스크롤에 따라 어떻게 움직일지 지정

background-color
- 요소의 배경 색상을 지정하는 속성

색상	요소의 배경색을 적용

background-clip
- 요소의 배경을 어디까지 적용할지 지정하는 속성

border-box	요소의 테두리까지 배경을 적용
padding-box	요소의 패딩 박스까지 배경을 적용
content-box	요소의 콘텐츠 박스까지 배경을 적용

background-image
- 요소의 배경에 사용할 이미지 경로를 지정하는 속성
- 이미지 경로는 url() 함수로 지정한다.

none	배경 이미지를 사용하지 않음
url("image-path")	요소의 배경에 사용할 이미지 경로를 지정합니다.

background-repeat
- 배경 이미지의 반복 여부를 지정하는 속성

repeat	배경 이미지를 수평, 수직으로 반복
repeat-x	배경 이미지를 수평으로 반복
repeat-y	배경 이미지를 수직으로 반복
no-repeat	배경 이미지를 반복하지 않음

background-size
- 배경 이미지의 크기를 지정하는 속성

auto	배경 이미지의 원래 크기를 유지
cover	배경 이미지의 크기 비율을 유지하면서 요소를 덮음
contain	배경 이미지의 크기 비율을 유지하면서 요소에 내용이 전부 보이도록 함
특정 크기	배경 이미지의 크기를 지정

background-position
- 배경 이미지의 위치를 지정하는 속성

키워드	top, bottom, left, right 등을 이용해 위치를 지정
백분율	배경 이미지를 요소 내에서 위치의 백분율로 지정
단위	px, em 등의 단위를 이용해 위치를 지정

background-clip
- 배경이 적용될 범위를 지정하는 속성
- 기본값은 border-box이다.

border-box	요소의 테두리까지 배경이 적용
padding-box	요소의 패딩 박스까지 배경이 적용
content-box	요소의 콘텐츠 박스까지 배경이 적용

background-origin
- 배경 이미지의 위치를 지정하는 속성
- 기본값은 padding-box이다.

border-box	요소의 테두리 박스에서 배경이 시작 됨
padding-box	요소의 패딩 박스에서 배경이 시작됨
content-box	요소의 콘텐츠 박스에서 배경이 시작 됨

2. 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            background: aqua;
            background: rgb(20, 40, 200);

            /* 투명도는 0에 가까울 수록 투명, 1에 가까울 수록 불투명 */
            background: rgba(20, 40, 200, 0.6); 

            /* hue: 색상(0~360, 120: 초록, 240: 파랑), saturation: 채도(짙음), lightness: 명도(밝기) */
            background: hsl(120, 50%, 50%);
            background: hsla(120, 50%, 50%, 0.4);

            background: #d93e137b;
        }
        #div-bg {
            width: 50%;
            background: white;
        }

        .div-test {
            background-color: white;
            
            padding: 20px;
            width: 20%;
            border: 5px dashed black;
            float:right;
        }
        #div1 {
            background-clip: border-box;
        }
        #div2 {
            background-clip: padding-box;
        }
        #div3 {
            background-clip: content-box;
        }

        .clearfloat {
            clear: right;
        }

        #bg-img {
            width: 70%;
            height: 1600px;
            border: 4px solid red;
            background-image: url('../01_html/sample/image/flower1.PNG');

            background-repeat: no-repeat;

            background-size: cover;
            background-size: contain;
            background-size: auto;

            background-attachment: fixed;
            background-attachment: scroll;

            background-position: 50% 50%;
            background-position: 30px 50px;
            background-position: right;
        }
    </style>
    <title>배경스타일1</title>
</head>
<body>
    <h1>배경색과 배경 이미지</h1>
    <pre>body{background-color:색상명 | rgb | rgba | hsl | hsla | 16진수;}로
         배경색을 지정할 수 있다.</pre>
    <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">
        색상명 참조 사이트로 이동</a>
    
    <hr>
    <h3>div배경 테스트</h3>
    <pre>div 영역을 설정하는 경우 배경색을 지정하기 위해서는 div에 배경 색을 별도로
지정해야 한다.
    </pre>
    <div id="div-bg">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>

    <h3>배경 적용 범위 조정</h3>
    <pre>div 영역의 배경 적용 범위를 지정할 때 background-clip 속성을 사용한다.</pre>
    <!--div.div-test#div$*3-->
    <div class="div-test" id="div1">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
    <div class="div-test" id="div2">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
    <div class="div-test" id="div3">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>

    <!-- <br clear="left"> -->

    <hr class="clearfloat">

    <h3>배경 이미지 테스트</h3>
    <pre>background-image 속성을 이용하여 배경 사진을 넣을 수 있다. 사진 크기에 따라
자동 반복하여 이미지가 나타난다.
    </pre>
    <div id="bg-img"></div>

    <br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

3. 결과 화면

728x90