CSS background 배경 관련 스타일(background-color, background-clip)

CSS background 배경 관련 스타일(background-color, background-clip)

오늘은 배경색과 배경 범위를 지정해주는 스타일을 알아보겠습니다.

 

background-color

  - background-color를 사용하면 배경 색을 지정해줄 수 있습니다.

  - 기본형은 아래와 같습니다.

  - 선택자 { background-color: 색상 이름; }

  - 위 예시에서는 두 영역에 각각 배경 색을 다르게 지정해주었습니다.

  - 문서 전체의 배경이 되는 body는 배경색을 gray로, div태그에는 배경색을 pink로 지정해주었습니다.

  - 물론 색상 이름은 pink와 같은 색상 이름뿐만아니라, 16진수, rgb(a) 등을 입력해도 됩니다.

  - 색상 이름, 16진수, rgb(a)가 뭔지 잘 모르시는 분들은 아래 글을 참고해주세요.

2020/11/12 - [홈페이지 만들기/2단계. CSS] - CSS 텍스트 스타일: color text-decoration text-transform

 

background-clip

  - background-clip을 사용하면 배경 적용 범위를 조절해줄 수 있습니다.

  - 배경 적용 범위? 도대체 무슨 말인지 이해가 잘 안되실겁니다. 위 예제를 보며 설명을 드리겠습니다.

  - 일단 기본형은 아래와 같습니다.

  - 선택자 { background-clip: 속성값; }

  - 속성값에는 border-box, padding-box, content-box를 입력할 수 있습니다.

  - border-box를 입력하면 테두리(border)까지 배경 속성을 적용해줍니다. 위 예시에서 보면 점선으로 표시된 테두리까지도 핑크색으로 배경색이 칠해져 있는 것을 알 수 있습니다.

  - padding-box를 입력하면 테두리는 빼고 패딩(padding)은 포함하여 배경 속성을 적용해줍니다. 위 예시에서 보면 점선으로 표시된 테두리는 핑크색으로 배경색이 칠해지지 않은 것을 알 수 있습니다.

  - content-box를 입력하면 테두리와 패딩은 빼고, 순수 내용 부분에만 배경 속성을 적용해줍니다. 위 예시에서 보면 글자가 있는 내용 부분에만 핑크색으로 배경색이 칠해져 있는 것을 알 수 있습니다.

 

근데 패딩이 뭐예요?

 

  - 패딩이란 내용 주변을 패딩 잠바(?)로 둘러싸듯 감싸고 있는 부분을 말합니다.

  - 위 예시에서 패딩 부분을 연두색으로 표시해두었습니다.

  - 패딩은 내용의 바깥 부분과 테두리 안쪽 부분 사이에 위치하게 됩니다.

  - 위 예시에서는 padding 값을 30px로 주었습니다. 따라서 내용 바깥 부분과 테두리 안쪽 부분 사이에 30px 만큼의 흰 바탕 공간이 생기게 됩니다.

 

그럼 오늘은 여기까지. :D