[CSS] 색상 스타일

색상 스타일

색상 스타일

    <h2>배경 스타일</h2>
    <h3>background-color</h3>

    <div id="div-bg">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempore nostrum accusantium tenetur sit cum sed. Magnam provident nostrum excepturi quo aut impedit, possimus voluptates ea reiciendis quae. Nostrum adipisci deleniti cumque amet commodi obcaecati debitis tempore mollitia, quos totam nemo, possimus reprehenderit dignissimos id est ratione laborum fugiat delectus illum eligendi? Placeat incidunt, enim aut quas obcaecati sit perferendis.
    </div>

    <h3>background-clip</h3>

    <div class="clip-test" id="clip1">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempore nostrum accusantium tenetur sit cum sed. Magnam provident nostrum excepturi quo aut impedit, possimus voluptates ea reiciendis quae. Nostrum adipisci deleniti cumque amet commodi obcaecati debitis tempore mollitia, quos totam nemo, possimus reprehenderit dignissimos id est ratione laborum fugiat delectus illum eligendi? Placeat incidunt, enim aut quas obcaecati sit perferendis.
    </div>
    <div class="clip-test" id="clip2">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempore nostrum accusantium tenetur sit cum sed. Magnam provident nostrum excepturi quo aut impedit, possimus voluptates ea reiciendis quae. Nostrum adipisci deleniti cumque amet commodi obcaecati debitis tempore mollitia, quos totam nemo, possimus reprehenderit dignissimos id est ratione laborum fugiat delectus illum eligendi? Placeat incidunt, enim aut quas obcaecati sit perferendis.
    </div>
    <div class="clip-test" id="clip3">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero tempore nostrum accusantium tenetur sit cum sed. Magnam provident nostrum excepturi quo aut impedit, possimus voluptates ea reiciendis quae. Nostrum adipisci deleniti cumque amet commodi obcaecati debitis tempore mollitia, quos totam nemo, possimus reprehenderit dignissimos id est ratione laborum fugiat delectus illum eligendi? Placeat incidunt, enim aut quas obcaecati sit perferendis.
    </div>
    
    <h2>배경 이미지</h2>
    <div id="bg-img"></div>
    
css
/* 배경 스타일 */
        body
        {
            /* background-color: darkblue; */
            /* background-color: #3250d6; */
            background-color: rgb(0, 100, 255);
            /* background-color: rgba(0, 0, 255, .5); */
            /* background-color: hsla(240, 70%, 50%, 1); */
            color: #fff;
        }
        /* background-color */
        #div-bg
        {
            width: 50%;
            background-color: #fff;
            color: rgb(0, 100, 255);
        }

        /* background-clip */
        .clip-test
        {
            background-color: #fff;
            color: rgb(0, 100, 255);
            margin: 30px;
            padding: 30px;
            width: 30%;
            border: 15px dashed rgba(0, 0, 0, .3);
        }
        #clip1
        {
            background-clip: border-box;
        }
        #clip2
        {
            background-clip: padding-box;
        }
        #clip3
        {
            background-clip: content-box;
        }

        /* 배경 이미지 */
        #bg-img
        {
            border: 15px solid rgba(0, 0, 0, .3);
            width: 70%;
            height: 750px;
            padding: 50px;
            background-image: url('../resources/image/bgsample.PNG');

            /* 이미지 반복 설정 */
            /* 기본값 */
            /* background-repeat: repeat; */
            /* background-repeat: repeat-x; x축으로 반복 */
            /* background-repeat: repeat-y; y축으로 반복 */
            background-repeat: no-repeat;
            
            /* 이미지 크기 설정 */
            /* 기본값 */
            /* background-size: auto; 기본 이미지 크기 */
            /* background-size: contain; 요소에 한쪽면이라도 맞을 때 까지 요소에 맞게 축소/확대 */
            background-size: cover; /* 요소안에 모두 찰 때까지 축소/확대 */
            /* background-size: 350px 200px; */
            /* background-size: 100%; */

            /* 이미지 위치 설정 */
            /* 기본값 */
            /* background-position: left top; */
            /* background-position: right top; */
            /* background-position : center top; */
            /* background-position: left center; */
            /* background-position : center; */
            /* background-position: left bottom; */
            /* background-position: center bottom; */
            /* background-position: right bottom; */
            /* background-position: 150px 250px; */
            /* background-position: 50% 50%; */

            /* 이미지 배치 기준 설정 */
            /* background-origin: border-box; */
            /* background-origin: padding-box; */
            background-origin: content-box;

            /* 이미지를 고정하도록 설정 */
            /* 기본값 */
            /* background-attachment: scroll; */
            background-attachment: fixed;
        }