|
앞서 글꼴과 관련된 속성에 대해 알아보았다. 이번 강좌에서는 색상에 관련된
속성들을 살펴보고자 한다.
|
1. 스타일 시트(CSS)의 색상 관련 속성 : 글자색과 배경색에 관한 스타일 지정
| [Property] |
[Value] |
[Description] |
| color |
hexa값(16진수), RGB(R,G,B) |
글자색 |
| background-color |
hexa값(16진수), RGB(R,G,B) |
배경색 |
| background-image |
url(urlname) |
배경을 위한 이미지 지정(반복이 기본값) |
| background-repeat |
repeat, repeat-y, repeat-x, no-repeat |
배경 이미지의 반복 방법 지정 |
| background-attachment |
fixed, no-fixed |
fixed : 이미지는 고정, 내용만 스크롤
no-fixed : 이미지와 내용 모두 스크롤 |
| background-position |
keyword(top, bottom, left, right,
center), px, % |
배경 이미지의 시작위치를 치정 |
| background |
|
속성들을 한 문자열로 묶어서 한번에 설정 |
[☞
단위] - 색상 관련 속성에 사용하는 단위 |
| hexa(16진수)
|
#FF00FF(16진수 FF=10진수 255, 16진수
00=10진수 0 -> 결과적으로 R은 255, G는 0, B는 255이므로 R과 B가 섞인 색 분홍색 정도가 되겠다.) |
| RGB |
Red, Green, Blue로 (0~255, 0~255, 0~255)로 나타낸다. |
2. 실전 예제(color, background-color)
| [Source] |
[Description] |
| <html>
<head>
<style type="text/css" >
<!--
body {
color : purple;
background-color : #FFFF99;
}
h1 {
color : gold;
}
h2 {
color : green;
}
-->
</style>
</head>
<body>
배경색은 연노랑 색이며 기본 글자색은 보라색
<h1>H1의 글자색은 금색 </h1>
<h2>H2의 글자색은 초록 </h2>
</body>
</html>
|
-> 본문의 글자색을 보라로 지정
-> 배경색은 연노랑
-> 글자의 크기나
굵기를 지정하지 않았으므로 단순히 색상만 변할 뿐 <h1>,<h2> 속성은 그대로 지닌다.
-> 기준이 되는 글자와 배경색 지정
-> <H1> 태그에 의해 글자색만 변경
-> <H2> 태그에 의해 또 한번 글자색 변경
|
[Result] |
배경색은 연노랑 색이며
기본 글자색은 보라색
H1의 글자색은 금색
H2의 글자색은 초록 |
3. 실전 예제(background-image)
[Source] |
<html>
<head>
<style type="text/css" >
<!--
body {
color : navy;
font-weight : bold;
background-image : url(http://www.webmadang.net/script/img/title2.gif);
}
-->
</style>
</head>
<body>
배경을 지정된 주소의 그림으로 채운다. <br>
배경을 지정된 주소의 그림으로 채운다. <br>
배경을 지정된 주소의 그림으로 채운다. <br>
</body>
</html> |
[Result] |
배경을
지정된 주소의 그림으로 채운다.
배경을 지정된 주소의 그림으로 채운다.
배경을 지정된 주소의 그림으로 채운다.
|
4. 실전 예제(background-repeat)
[Source] |
<html>
<head>
<style type="text/css" >
<!--
body {
color : navy;
font-weight : bold;
background-image : url(http://www.webmadang.net/script/img/title2.gif);
background-repeat : no-repeat;
}
-->
</style>
</head>
<body>
배경을 지정된 주소의 그림으로 반복하지 않고 한번만 채운다. <br>
</body>
</html> |
[Result] |
배경을
지정된 주소의 그림으로 반복하지 않고 한번만 채운다.
|
[☞
background-repeat의 4가지 속성] |
no-repeat
|
이미지의 반복 없이 한번만 배경으로 채운다. 일반 그림삽입과는
사뭇 다르다. |
repeat
|
지정된 배경 이미지를 xy(양방향)방향으로 반복하여 채운다. |
| repeat-x |
지정된 이미지를 x(가로)방향으로만 채운다. |
| repeat-y |
지정된 이미지를 y(세로)방향으로만 채운다. |
5. 실전 예제(background-position)
[Source] |
<html>
<head>
<style type="text/css" >
<!--
body {
color : navy;
font-weight : bold;
background-image : url(http://www.webmadang.net/script/img/title2.gif);
background-repeat : no-repeat;
background-position : 100px 50px;
}
-->
</style>
</head>
<body>
배경 그림의 시작 위치를 왼쪽으로부터 100px, 위에서 부터 50px 만큼 간격을 두어 지정한다.
<br>
</body>
</html> |
[Result] |
| 배경 그림의
시작 위치를 왼쪽으로부터 100px, 위에서 부터 50px 만큼 간격을 두어 지정한다. |
6. 실전 예제(background)
[Source] |
<html>
<head>
<style type="text/css" >
<!--
body {
color : navy;
font-weight : bold;
background : url(http://www.webmadang.net/script/img/title2.gif)
center top fixed repeat-y orange;
}
-->
</style>
</head>
<body>
배경색은 오렌지색, 배경 이미지는 시작 위치를 상단 중앙에서 세로만 반복되고<br>
내용만 스크롤되고 그림은
고정된다.<br>
이때 스크롤바가 나오지 않을 시 내용을 늘이거나 윈도우 크기를 줄여준다.<br>
</body>
</html> |
[Result] |
| 배경 그림의
시작 위치를 수평:100px 수직:50px로 간격을 두어 지정한다. |
▶ 배경이미지의 주소 지정시 url과 (urlname)사이에 공백을 두면
이미지가 보이지 않으므로 주의한다. url(urlname) : ○, url (urlname) : ×)
☞ 잠깐만여! 강좌는 푹~ 퍼가지 마시고 링크만 걸어주세요~
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 | 
컴쟁이