색상과 바탕
……..Color and Background Properties

색상
Color

형식 color:<color>
보기 H1 {color: red } …………..H2
{color: #000000 }
색상은 키워드나 숫자로 구성된 RGB 값으로 임의의 태그안에
있는 문자Letter의 색을 지정한다.

바탕색
Background Color

형식 background-color:<value>
보기 BODY { background-color:
white }
H1 { background-color: #000080 }
background-color는 특정 태그의 바탕 색상을
지정한다.

바탕그림
Background Image

형식 background-image: value=<url>
보기
BODY { background-image:
url(sample.gif) } P{ background-image: url(http://www.user.com/sample.gif)
}
바탕Background 그림을 지정할 때 사용한다.

바탕그림의
연속 Background Repeat

형식
background-repeat:
<value=repeat|repeat-x|repeat-y|no-repeat>
보기
BODY {background :
url(candybar.gif);background-repeat:repeat-x}
이것은 바탕그림Background Image을 어떤 식으로
반복시킬 것인지를 지정한다. repeat-x는 왼쪽에서 오른쪽으로 반복시키며, repeat-y는 위에서 아래로 반복시킨다. 위의
보기는 왼쪽에서 오른쪽으로만 그림Image이 연속적으로 나타날 것이다.

바탕의
성격 Background Attachment

형식 background-attachment:
<value=scroll
| fixed>
보기
BODY
{background:url(sam.gif);background-attachment:fixed}
지정된 바탕그림Background Image을 문서 내용에
따라 그림을 계속 연속시킬 것인지, 고정 시킬 것인지를 결정할 때 사용한다. 초기값Initial Value은 scroll이다.

바탕그림의
위치 Background Position

형식
background-position:value=<percentage>|<length>|{1,2}|top|center|bottom|left|center|
right>
바탕그림Background Image의 초기위치를 지정한다.
이것은 블럭태그Block-Level Elements와 대치태그(HTML의 대치태그는 IMG, INPUT, TEXTAREA, SELECT와
OBJECT등이다.)에만 적용된다.
<percentage>나<length>를
사용할 때에는 가로 위치를 먼저 지정한 다음 세로 위치를 지정해야 한다. 10% 70%로 지정할 경우, 바탕그림Background
Image은 가로 10%, 세로 70%되는 지점에 놓인다. 길이Length를 10px 20px로 하면, 그림은 가로 5px 세로
10px되는 지점에 놓인다.
주의
가로 값만을 지정하면, 세로 값은 자동으로 50%가
된다. 또 길이Length와 백분율Percentage의 섞어쓰기가 허용되지만, 이때 길이는 10% -2cm처럼 음수만 가능하다.
한편, 백분율Percentage과 길이Length의 섞어쓰기는 허용되지 않는다.

바탕
Background

형식
background:<value=<background-color>
|<background-image>|<background-repeat>
|<background-attachment> |<background-position>>

보기

BODY { background:
red url(http://www.user.com/sam.gif) }
위의 보기는 BODY라는 대상에 대하여 바탕색Background
Color는 'red', 바탕그림background-image은 위 url의 'sam.gif'를 지정하고 있다.
B
{ background: #ffffff }
위의 보기는 B에 대하여 바탕색Background-color을
'#ffffff'로 정한 것이다.
P
{ background: url(../dir/sam.gif) fixed }
위의 보기는 지정한 디렉토리의 'sam.gif'가 바탕그림Background
Image이고 바탕의 성격Background Attachment은 'fixed'로 나타난다.
TABLE
{ background: #000000 url(sam.gif) no-repeat bottom right }

위의 보기는 TABLE에 대하여 바탕색은 '#000000'로,
바탕그림은 'sam.gif'이고, 바탕그림의 연속Background Repeat은 'no-repeat'이며, 바탕그림의 위치Background
Position는 줄Line의 'bottom'이며, 가로위치는 'right'이다. 위의
모든 보기에서 지정되지 않은 사항은 초기값Initial Value이 사용된다.

• 제작: w3master@sanyaro.com bestsouth@korea.com