본문 바로가기
css

[html/css] 글자색 color 속성, 배경색 background-color 속성 배우기

by 지구별에 2014. 5. 20.

 

 

 [html/css] 글자색 color 속성, 배경색 background-color 속성 배우기

 

 

지난 주에 글꼴을 지정하는 font 속성을 배우면서, 글꼴 색상은 어떻게 하지? 궁금해하시는 분들 계실 것 같아요.

 

 

글꼴을 지정하는 font 속성 배우기

 

글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)

 

font-family 속성(serif, sans-serif차이)

 

 

 

오늘 배울 부분은 color 속성과 background-color 속성입니다.

 

background-color은 배경색, color는 전경색(글자색 등)을 지정 합니다.

 

자세히 알아보겠습니다~

 


▶background-color 속성


요소의 배경색을 지정하는 속성입니다.

 

padding, border를 포함하여 색칠되고요. 단 margin은 제외합니다.

 

화면 전부의 배경을 바꾸려면 <body>에 background-color 속성을 적용해야 합니다.

 

<body>뿐 아니라 <p>, <table>, <h1> 태그 등 배경에 해당하는 곳은 모두 이 속성을 사용합니다.

 

 

 

transparent : 기본값으로 투명한 바탕

색상 :  아래 셋 중 선택

-16진수 :  #ff0000
-색이름 :  red
-rgb값  :  rgb(255,0,0)

 

상속 여부 : NO


색상코드표 참조 

[css] 색상값 단위 5가지(rgba 포함)

 

 

사용 예:background-color.htm

 

<html>
  <head>
<style type="text/css">
body{
background-color: #FFD9EC;
}
h1{
background-color:yellow;
}
p{
background-color:rgb(159, 201, 60);
}
</style>
</head>

 

<body>

<h1 >애국가</h1>
<p> 동해물과 백두산이 마르고 닳토록 </p>

</body>
</html> 

 

☞ 실행화면입니다

 

<body>가 흐린 분홍색

<h1>은 노란색 배경

<p>엔 연두색 배경을 적용했습니다.

 


 

color 속성

 

글자색 등,  전경 색을 지정하는 속성입니다.

 

즉 <p>태그 <h1>태그 등 글꼴색을 지정할 때 사용합니다.

 

 

 

기본값 : 지정되있지 않음.

상속여부 : YES

색상:  아래 3가지 중 선택

-16진수 :  #D941C5
-색이름 :  red
-rgb값  :  rgb(217, 65, 197)

  

 

 

사용 예:  font color.htm

 

<html>
<head>
<style type="text/css">
h1{color: blue;}
p{color: red;}

</style>
</head>
<body>


<h1>월요일</h1>
<p>방학숙제</p>
<p>할머니네 가기</p>
<p>청소하기</p>

 

<h1>화요일</h1>
<p>수영</p>
<p>독서</p>
<p>수영</p>

</body>
</html>

 

 

☞ 실행화면입니다.

 

<h1> 글꼴은 파란색

<p> 글꼴은 빨간색으로 지정했습니다.

 

 

 

   

background 속성(배경 전체 지정)

 

font-style 속성 (normal, italic, oblique 차이)

 

font-weight 속성 (bold, 100~900, bolder, lighter)

 

font-variant 속성(normal, small-caps)

 

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)

 

 

반응형

댓글