배경색을 바꾸는 방법 - 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

  • transform-origin transform-origin은 회전 중심점(원점·기준점)을 지정합니다. transform, transition 속성과 함께 사용되는 속성입니다.   기본형 transform-origin: x-position | y-position | z-position …
  • 선형 그러데이션이란 색상이수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것을 말합니다. 이것을 만들어 주느 함수는 linear-dradient인데 색상이 어느 방향으로 바뀌고 어떤 색상으로 바뀌는지 알려 주어야 합니다. 선형 그러데이션 구문에서 사용하는 옵션을 하나씩 살펴보겠습니다. linea…
  • 색상이 직선 형태로 바뀌는 것이 선형 그러데이션이라면 원형 그러데이션은 원이나 타원이 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다. 따라서 원형 그러데이션에서는 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야 합니다. radial-gradient radi…
  • perspective-origin perspective-origin 속성으로 요소와의 원근감(거리감) 기준점을 설정합니다. perspective 속성과 함께 사용합니다.   기본형 prespective-origin : x-position | y-position x…
  • transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 평면(2D)에서의 회전입니다.   기본형 transform : rotate ( angle ); angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, tur…
  • transform / scale transform의 scale로 요소를 확대 또는 축소할 수 있습니다. 평면(2D)에서의 확대 또는 축소입니다.   기본형 transform : scale ( value ); value에 값을 입력합니다. 1은 원래의 크기이고 0.5, 1.5…

Post a Comment