|
[html/css] 글자색 color 속성, 배경색 background-color 속성 배우기 |
지난 주에 글꼴을 지정하는 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
상속 여부 : NO |
☞사용 예:
background-color.htm
<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
|
☞사용 예: 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> 글꼴은 빨간색으로 지정했습니다.
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 차이)
'css' 카테고리의 다른 글
| [html/css] background-repeat 속성(배경 이미지 패턴) (3) | 2014.05.22 |
|---|---|
| [html/css]배경 이미지를 넣는 background-image 속성 (3) | 2014.05.21 |
| @font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) (0) | 2014.05.19 |
| @import rule 사용법, link 태그와 차이 (3) | 2014.05.16 |
| [html/css]외부 문서를 연결하는 link 태그 사용법 (1) | 2014.05.14 |
댓글