[HTML/CSS] 텍스트 색, 배경색 지정하기

 

CSS를 사용하여

텍스트의 색과 배경색을 지정할 수 있습니다.

 

 

 

CSS로 텍스트 배경색 지정하기 (background-color)

텍스트의 배경색을 지정하기 위해서 

CSS의 background-color 속성을 사용할 수 있습니다.

background-color: yellow;
background-color: #ffff00;

 

  예제  

<p>
  배경색은 <span class='y'>노랑</span>, <span class='g'>초록</span>, <span class='b'>파랑</span>입니다.
</p>

.y {
  background-color: yellow;
}

.g {
  background-color: #00FF00; 
}

.b {
  background-color: blue;
}

 

 

 

 

CSS로 텍스트 색 지정하기 (color)

위 예제를 보면,

배경색을 파란색과 같이 진한 색으로 지정한 경우

텍스트가 검정색이라서 잘 눈에 띄지 않습니다.

텍스트의 색도 변경해보겠습니다.

 

텍스트 색을 지정하기 위해서 CSS의 color 속성을 사용할 수 있습니다.

color: yellow;
color: #ffff00;

 

  예제  

<p>
  배경색은 <span class='y'>노랑</span>, <span class='g'>초록</span>, <span class='b'>파랑</span>입니다.
</p>

.y {
  background-color: yellow;
}

.g {
  background-color: #00FF00; 
}

.b {
  background-color: blue;
  color: white;
}

 

배경색이 파란색인 영역에

color: white;

를 추가하여 글자를 흰색으로 변경하였습니다.