배경색을 바꾸는 방법 - background-color

배경 색을 지정하려면 배경을 넣고 싶은 요소의 속성에 background-color 속성을 넣으면 됩니다. 16진수나 rgb 값 또는 색상 이름을 사용해 지정합니다.
1 min read

배경 색을 지정하려면 배경을 넣고 싶은 요소의 속성에 background-color 속성을 넣으면 됩니다. 16진수나 rgb 값 또는 색상 이름을 사용해 지정합니다.

background-color

background-color로 배경의 색을 정합니다.

 

기본형

background-color: transparent | color
  • transparent : 배경색이 없습니다. (투명)
  • color : 색을 정합니다.

 

예제

  • 배경색을 채울 때 border와 padding을 포함한 여백이 채워집니다.
  • margin 영역은 채워지지 않습니다.
<h1 class="a">Lorem</h1>
<h1 class="b">Lorem</h1>
<h1 class="c">Lorem</h1>
.a, .b, .c {
  color: #ffffff;
}
.a {
  background-color: #555555;
}
.b {
  background-color: #555555;
  padding: 10px 20px;
}
.c {
  background-color: #555555;
  margin: 10px 20px;
}

Tip : 웹에서 색상 표현 방법

 

기타 CSS 참조

You may like these posts

  • calc() calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.   예를 들어 font-size : calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다.   문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는…
  • 배경의 투명도 배경만 투명하게 하려면 RGBA 색상을 이용하여 정합니다. 간단한 예제는 다음과 같습니다. div { padding: 40px; background-image: url( "//bit.ly/3l02sot" ); } p { font-family: "Arial Black", sans-se…
  • 이미지 가운데 정렬하는 방법 이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다.   방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <div> …
  • opacity opacity로 투명도를 정할 수 있습니다.   기본형 opacity : number number : 0 부터 1.0 까지의 수를 넣습니다. 숫자가 작을수록 투명해집니다.   예제 <div cla…
  • clip clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. position 속성값이 absolute 또는 fixed일 때만 적용됩니다.   기본형 clip : auto | shape auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록…
  • 이미지 비율 맞추기 텍스트는 일반적으로 바뀐 폭에 맞추어 자동으로 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다.   이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보…

Post a Comment