7-1. CSS 배경색과 배경 범위 지정(background-color, background-clip)

1.  backgroud-color

background-color : 배경색을 지정하는 속성이다. 

background-color 는 앞에서 설명한 16진수나 rgb값 또는 색상 이름을 사용해서 지정한다. 

어떤 방법을 사용할지는 사용자가 선택하기 나름으로 색상을 세밀히 조절하고 싶다면 16진수값을 사용하고, 

투명도도 함께 조절하고 싶다면 rgba 표기법을 사용한다. 

 

 

2. background-clip

background-clip : 배경색의 적용 범위를 조절하는 속성이다. 

박스모델 관점에서 배경의 적용 범위를 조절할 수도 있다. 

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

 

backgroud-clip 속성값 

1️⃣ border-box : 박스 모델의 가장 외곽인 테두리까지 적용한다. (기본값)

2️⃣ padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다. 

3️⃣ content-box : 박스 모델에서 내용(콘텐츠) 부분에만 적용한다.