IV. 배경꾸미기 - 1. 배경색과 배경 범위 지정하기

📁Web Developing/CSS 기초

IV. 배경꾸미기 - 1. 배경색과 배경 범위 지정하기

Hush 2022. 6. 4. 21:38

background-color : 배경색을 지정

지금까지 우리가 색상을 지정한 방법 그대로 background-color 속성을 활용하여 배경색을 지정할 수 있다.

글꼴이나 글자 크기 등은 <body> 태그 선택자에 지정하면 문서 전체에 상속되었었다.

하지만 예외로 background-color 값은 상속되지 않는다.

기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일 뿐 웹 요소에 배경색이 상속된 것은 아니다.

background-clip : 배경색의 적용 범위를 조절

배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 있다.

즉, 박스 모델의 가장 외곽인 테두리까지 적용할 지, 테두리를 빼고 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있습니다.

종류	설명
border-box	박스 모델의 가장 외곽인 테두리까지 적용합니다. 기본값입니다.
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용합니다.
content-box	박스 모델에서 내용(콘텐츠) 부분에만 적용합니다.

다음 예제는 너비가 350px인 박스 모델의 테두리를 5px짜리 점선으로 하고 패딩을 20px로 지정했다.

이때 background-clip속성에 따른 박스 배경색을 보자.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            #clip-border {background-clip : border-box;}
            #clip-padding {background-clip: padding-box;}
            #clip-content {background-clip: content-box;}
            .div-highlight {
                background: orange;
                padding: 20px;
                margin: 10px;
                border : 5px dotted;
            }
        </style>
    </head>
    <body>
        <div id="clip-border" class="div-highlight">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세</div>
        <div id="clip-padding" class="div-highlight">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세</div>
        <div id="clip-content" class="div-highlight">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세</div>
    </body>
</html>

저작자표시 (새창열림)