색상과 배경



color

background-color

background-image

background-repeat

background-attchment

background-position

background


색상(color)

SELECTOR { color : "색상명" or "color"}

  • color 속성은 HTML을 비롯하여 CSS에서도 아주 많이 사용하는 속성입니다.
  • 사용방법은 RGB Hexa code(#RRGGBB)형식으로 지정할 수도 있고, CSS에서 지원하는 16가지 색상, 즉 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow 등을 적용할 수도 있습니다.


  • color 속성은 background 속성과 함께 지정하는 것이 좋습니다. 만일 그렇지 않다면 배경색과 글자색이 같거나 비슷해져서 읽기가 곤란해질 수 있기때문이죠.

< HTML>
< HEAD >
< STYLE type="text/css" >
H4{color : blue}
H2{color : red}
H3{color : green}
< /STYLE >
< /HEAD >
< BODY style="font-size:12" >
< H2 >color에 관해서..< /H2 >
< H3 >color 속성은 HTML을 비롯하여 CSS에서도 아주 많이 사용하는 속성입니다.< /H3 >
< H4 >사용방법은 RGB Hex 값(#RRGGBB) 형식으로 지정할 수도 있고, CSS에서 지원하는 16가지 색상명을 바로 적용할 수도 있습니다.< /H4 >
< /BODY >
< /HTML >

color에 관해서..

color 속성은 HTML을 비롯하여 CSS에서도 아주 많이 사용하는 속성입니다.

사용방법은 RGB Hex 값(#RRGGBB) 형식으로 지정할 수도 있고, CSS에서 지원하는 16가지 색상명을 바로 적용할 수도 있습니다.


background-color(배경색)

SELECTOR { backbround-color : "색상명 or color", "transparent"}

  • backbround-color 속성은 HTML문서의 배경색을 지정할 때 사용합니다.
  • 또한 < BODY >를 포함한 < P >, < TD >, < DIV >, < SPAN > 등 어떤 요소(element)에도 적용할 수 있습니다.
  • 속성 값으로 ①색상명 or #RGB color ② transparent를 적용할 수 있습니다. 기본값은 transparent입니다.

< HTML >
< HEAD >
< TITLE > 백그라운드 배경색 삽입하기< /TITLE >
< /HEAD >
< TABLE border="0" width="90%" align="center" cellpadding="5" cellspacing="0" >
< TR >
< TD style="background-color: pink ; font-size:30pt">pink< /TD >
< /TR >
< TR>
< TD style="background-color : orange ; font-size:30pt">orange< /TD >
< /TR >
< TR >
< TD style="background-color : yellow ; font-size:30pt">yellow< /TD >
< /TR >
< /TABLE >
< /BODY >
< /HTML >
백그라운드 배경색 삽입하기
pink
orange
yellow


background-image(배경이미지)

SELECTOR { backbround-image : "url(이미지 경로)"}

  • background-image는 백그라운드 이미지를 삽입하며, background-color와 동일하게 어떤 요소(element)에도 삽입 가능합니다. 또한 HTML의 < BODY >에 적용되는 백그라운드 이미지와 동일하게 작은 이미지의 경우 패턴 형식으로 반복됩니다.
  • 속성 값으로 ① url(배경이미지 명) ② none 이 있습니다.

< HTML >
< HEAD >
< TITLE > 백그라운드 배경이미지 삽입하기< /TITLE >
< style type="text/css" >
BODY{background-image : url(background.jpg)}
P{font-size:10pt ; color:white}
< /style >
< /HEAD >
< BODY >
< P > 백그라운드에 적용된 배경 이미지를 보세요.< /P >
< /BODY >
< /HTML >
눌러보세요.^^


background-repeat(배경 반복)

SELECTOR { backbround-repeat : "속성값"}

  • background-repeat는 배경 이미지를 어떻게 반복할 것인가를 지정합니다.
  • 속성 값으로 repeat, no-repeat, repeat-x, repeat-y가 있습니다.
repeat 배경이미지를 수직, 수평방향으로 반복합니다.(패턴방식)
no-repeat 배경이미지를 반복하지 않습니다.
repeat-x 배경이미지를 수평 방향으로 반복합니다.
repeat-y 배경이미지를 수직 방향으로 반복합니다.

※ 큰 화면으로 보시려면 아래의 글자를 클릭해보세요.
repeat no-repeat
repeat-x repeat-y


background-attchment(배경 고정)

SELECTOR { backbround-attachment : "속성값"}

  • HTML문서 내에 텍스트가 많을 경우에는 자동적으로 스크롤 바가 생깁니다. 이때 페이지를 스크롤하게 되면 자동으로 배경이미지도 같이 움직이게 됩니다. 하지만, backbround-attachment를 이용하게 되면 배경이미지가 바닥에 붙어 있는 것처럼 움직이지 않게 할 수 있습니다.
  • 속성 값으로는 fixed, scroll이 있으며, 기본 값은 scroll입니다.
  • backbround-attachment는 Netscape에서는 지원하지 않고, 단지 Explorer에서만 지원합니다.
  • 또한 Explorer의 버전에 따라 스크롤이 느려지는 현상이 발생하기도 합니다.
  • HTML에서는 < BODY background="이미지명" bgproperties=fixed > 이렇게 표현됩니다.

※ 아래 그림의 오른쪽 스크롤 바를 위, 아래로 움직여 보세요. 배경이미지가 고정되어있죠?
< HTML >
< HEAD >
< TITLE > 배경 고정 : background-attachment < /TITLE >
< STYLE type="text/css" >
BODY{background-color : white ;
background-image : url(background.jpg) ;
background-repeat : no-repeat;
background-attachment : fixed}
< /STYLE >
< /HEAD >
< BODY style="font-size:11pt ; font-family : 굴림" >
< p style="margin-right:0; margin-left:220;" align="left" >
헬렌켈러가 쓴 "3일 동안만 볼 수 있다면"< BR >이라는 책을 보면 우리가 감사해야 할 것이< BR >얼마나 많은지 알 수 있다.< BR >"만약 내가 사흘간 볼 수 있다면< BR >첫날에는 나를 가르쳐 준 설리번 선생님을< BR >찾아가 그 분의 얼굴을 보겠습니다.< BR >.....(중략..)< /p >
< /BODY >
< /HTML >

눌러보세요.^^


background-position(배경 위치)

SELECTOR { background-position : "속성값"}

배경이미지의 초기 위치를 설정하는 속성입니다. 속성 값으로는 아래와 같이 세 가지 방법을 이용합니다.

percentage(%) 초기 값은 왼편 상단(0% 0%)으로 되어 있으며, 상대적인 % 값으로 위치를 지정합니다.
0% 0%는 좌측 상단을 의미하고 100% 100%는 우측하단을 의미합니다.
설정은 가로값이 먼저오고 세로값이 나중에 옵니다.
lengths 직접 수치를 넣어 적용합니다. 윈도우 해상도가 사용자마다 다른 관계로 자칫 만든이의 의사와는 달리 나타나는 문제가 발생할 수 있습니다.
top, center, bottom, left, right 가장 손쉽게 지정할 수 있는 방법으로 top left(=left top)는 0% 0%이며 bottom right(=right, bottom)는 100% 100% 위치입니다. 주의할 점은 콤마(,)를 사용하지 않고 띄어쓰기로만 구분합니다.

< HTML >
< HEAD >
< TITLE > 배경 위치 : background-position< /TITLE >
< STYLE type="text/css" >
BODY{background-color : white ;
background-image : url(img/hiyake.gif) ;
background-repeat : no-repeat ;
background-attachment : fixed ;
background-position : left top}
P{font-size:13pt ; color:blue}
< /STYLE >
< /HEAD >
< BODY >
< P >현재의 이미지 위치를 보세요.^^ < /P >
< /BODY >
< /HTML >

※ 큰 화면으로 보시려면 아래의 글자를 클릭해보세요.
background-position : left top background-position : 15% 15%
background-position : center bottom background-position : 150 70


background

SELECTOR { background: "속성값"}

이 부분은 그룹화 기능입니다. 그동안 앞에서 background관련 속성들을 하나씩 예제를 통해 설명했는데, 이 기능을 잘 활용하면 속성들을 간단하게 정리할 수 있습니다.
아래의 예제에서 속성값들을 어떻게 나열했는지 잘 살펴보세요.

< HTML >
< HEAD >
< TITLE > 배경속성활용 : background< /TITLE >
< STYLE type="text/css" >
BODY{background:white url(background.jpg) no-repeat fixed top right}
< /STYLE >
< /HEAD >
< BODY style="font-size;10pt;font-family:굴림">
배경 속성을 활용해 보았습니다. < br >
background속성을 이용하여 grouping한 예제입니다.
< /BODY >
< /HTML >
※ 큰 화면으로 보시려면 클릭해보세요.