2. CSS(Cascading Style Sheets language)


2.7 색상 지정하기

  색상을 지정하기 위해서는 다양한 속성이 지원된다.

  • color / color : 전경색, 글자색을 지정한다.

  • background / Background : 바탕색을 지정한다.

    * 다음은 background속성에 추가할 수 있는 목록 이다.
    • background-color / backgroundColor : 바탕색

    • background-image / backgroundImage : 배경이미지(URL형식)

    • background-repeat / backgrundRepeat : 배경이미지를 반복해서 그리는 방법을 지정하며, 3가지 방법이 있다. (repeat : 바둑판식, repeat-x : 수평적으로 만 반복. repeat-y : 수직적으로만 반복)

    • background-attachment / backgroundAttachment : 배경이미지가 스크롤바에 영향을 받아서 글자와 함께 스크롤되는지(scroll), 아니면 배경이미지가 스크롤에 상관없이 항상 고정(fixed)적인지를 지정한다.

    • background-position / backgroundPostion : 배경이미지의 시작점을 지정한다. 처음값이 수평적 위치를 두번째 값이 수직적 위치를 의미한다. 수평적 값으로 사용가능한 값으로는 left, center, right가 있고, 수직적값으로는 top, center, bottom이 있으며, 퍼센트로도 위치를 나타낼 수 있다.( 이때 맨 왼쪽위는 0% 0%이고, 맨 오른쪽하단은 100% 100%이다.) 또한 센티미터나 인치단위로도 나타낼 수 있다.

  ** 다음은 Color에 올수 있는 값에 대한 예시이다.(Bob Stein, www.visibone.com참조 했다.)

FFF
 FFF
CCC
 CCC
999
 999
666
 666
333
 333
000
 000
FFC
 C00
FF9
 900
FF6
 600
FF3
 300
99C
 C00
CC9
 900
FFC
 C33
FFC
 C66
FF9
 966
FF6
 633
CC3
 300
CC0
 033
CCF
 F00
CCF
 F33
333
 300
666
 600
999
 900
CCC
 C00
FFF
 F00
CC9
 933
CC6
 633
330
 000
660
 000
990
 000
CC0
 000
FF0
 000
FF3
 366
FF0
 033
99F
 F00
CCF
 F66
99C
 C33
666
 633
999
 933
CCC
 C33
FFF
 F33
996
 600
993
 300
663
 333
993
 333
CC3
 333
FF3
 333
CC3
 366
FF6
 699
FF0
 066
66F
 F00
99F
 F66
66C
 C33
669
 900
999
 966
CCC
 C66
FFF
 F66
996
 633
663
 300
996
 666
CC6
 666
FF6
 666
990
 033
CC3
 399
FF6
 6CC
FF0
 099
33F
 F00
66F
 F33
339
 900
66C
 C00
99F
 F33
CCC
 C99
FFF
 F99
CC9
 966
CC6
 600
CC9
 999
FF9
 999
FF3
 399
CC0
 066
990
 066
FF3
 3CC
FF0
 0CC
00C
 C00
33C
 C00
336
 600
669
 933
99C
 C66
CCF
 F99
FFF
 FCC
FFC
 C99
FF9
 933
FFC
 CCC
FF9
 9CC
CC6
 699
993
 366
660
 033
CC0
 099
330
 033
33C
 C33
66C
 C66
00F
 F00
33F
 F33
66F
 F66
99F
 F99
CCF
 FCC
CC9
 9CC
996
 699
993
 399
990
 099
663
 366
660
 066
006
 600
336
 633
009
 900
339
 933
669
 966
99C
 C99
FFC
 CFF
FF9
 9FF
FF6
 6FF
FF3
 3FF
FF0
 0FF
CC6
 6CC
CC3
 3CC
003
 300
00C
 C33
006
 633
339
 966
66C
 C99
99F
 FCC
CCF
 FFF
339
 9FF
99C
 CFF
CCC
 CFF
CC9
 9FF
996
 6CC
663
 399
330
 066
990
 0CC
CC0
 0CC
00F
 F33
33F
 F66
009
 933
00C
 C66
33F
 F99
99F
 FFF
99C
 CCC
006
 6CC
669
 9CC
999
 9FF
999
 9CC
993
 3FF
660
 0CC
660
 099
CC3
 3FF
CC0
 0FF
00F
 F66
66F
 F99
33C
 C66
009
 966
66F
 FFF
66C
 CCC
669
 999
003
 366
336
 699
666
 6FF
666
 6CC
666
 699
330
 099
993
 3CC
CC6
 6FF
990
 0FF
00F
 F99
66F
 FCC
33C
 C99
33F
 FFF
33C
 CCC
339
 999
336
 666
006
 699
003
 399
333
 3FF
333
 3CC
333
 399
333
 366
663
 3CC
996
 6FF
660
 0FF
00F
 FCC
33F
 FCC
00F
 FFF
00C
 CCC
009
 999
006
 666
003
 333
339
 9CC
336
 6CC
000
 0FF
000
 0CC
000
 099
000
 066
000
 033
663
 3FF
330
 0FF
00C
 C99
009
 9CC
33C
 CFF
66C
 CFF
669
 9FF
336
 6FF
003
 3CC
330
 0CC
00C
 CFF
009
 9FF
006
 6FF
003
 3FF

- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)

DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master