색상과 바탕 ........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이 사용된다.