Trio 홈페이지 CSS 매뉴얼 색상 특성 예제 메뉴로
CSS2 규격 색상 참조 HTML 규격 색상 참조
색상
color
CSS1 규격
색상 설명
element의 색상을 지정 할 수 있으며 텍스트의 경우는 텍스트 색상, hr등 다른 경우는 foreground 색상이 지정 된다.
strong {color: blue;}
(색상표)
배경색
background-color
CSS1 규격
배경색 설명
배경색상을 지정 하는데 경계선 까지 이 색상이 적용 된다.
h4 {background-color: white;}
배경 이미지
background-image
CSS1 규격
이미지 설명
background 이미지를 지정한다.
다른 background 특성과 함께 바둑판식 배열(tile) 혹은 한 방향으로 만 반복 시킬 수 있다.
body {background-image: url(bgimage.gif);}
배경 이미지 반복
background-repeat
repeat/tile, repeat-x, repeat-y, no-repeat


CSS1 규격
이미지 반복 설명
background 이미지의 반복 특성 지정.
  repeat    : 수직, 수평 반복
  tile      : 수직, 수평 반복
  repeat-x  : 수평 반복
  repeat-y  : 수직 반복
  no-repeat : 반목 않함
body {background-repeat: no-repeat;}
배경이미지 이동
background-attachment
scroll, fixed

CSS1 규격
이미지 이동 설명
background 이미지가 이동(scroll)하는가 아닌가를 지정 할 수 있다.
다른 엘레멘트에는 별로 의미가 없으므로 일반적으로 body에 적용한다.
body {background-attachment: scroll;}
body {background:url(path/image.gif);
    background-attachment:fixed;}
배경이미지 시작위치
background-position
percentage, length, {1,2},
top, center, bottom,
left, center, right


CSS1 규격
시작 위치 설명
배경색과 이미지(위치)의 시작 상태를 지정한다.
반복 특성은 background-repeat 에서 지정 한다.
수치로 위치를 지정(백분율/길이) 할 때는 수평, 수직 순으로 한다.
가로 값 만을 지정하면, 세로 값은 자동으로 50%가 된다. 길이와 백분율의 섞어쓰기는 허용되지 만, 이때 길이는 10% -2cm처럼 음수 만 가능하다.
그러나 백분율과 길이의 섞어쓰기는 허용되지 않는다.
body {background-position: top center;}
배경 복합 명령
background

CSS1 규격
배경 복합 명령 설명
간략하게 여러 특성을 지정 할 수 있는데 순서는 바뀌어도 관계 없다.
가능 한 요소는
background-color, background-image,
background-repeat, background-attachment,
background-position
body {
  background: white url(bgimage.gif) fixed center;
}
space
예제
<STYLE type="text/css">
/* 아래 테이블을 표현하는 예제를 위하여(Explorer용)*/
.line{line-height:1pt;	background-color:8fbc8f;}
.color1 { color:0000ff;
  background-color:#ffefef;
  line-height:18pt;
  font-family: 궁서;  font-size: 14pt;  font-weight: 400;  font-style: normal;
  margin-left: 30pt;
  padding:8;
  border-color: #aaffee #006600 #ff6600 #ffffaa; border-style:solid;
  border-width:20pt; 
}
.color2{background-image: url(../../gif/ball.gif);background-repeat: tile;}
</STYLE>이상은 <HEAD></HEAD> 안에 있슴

<TABLE border=1 width=90% class=color1>
<TR><TD>텍스트 실험</TD><TD>그리고 박스</TD></TR>
<TR><TD>밖(테두리와 해당 화면 끝과의 거리)은 border</TD>
  <TD>안(테두리와 내용 글자 거리)은 padding</TD></TR>
<TR><TD colspan="2">테두리 색상: 위쪽, 오른쪽, 
	아래쪽, 왼쪽 순서로 명시(시계방향)</TD></TR>
<TR><TD class=color2>배경 이미지</TD>
  <TD style="background:88ffff;">배경색</TD></TR>
</TABLE>
결과
텍스트 실험그리고 박스
밖(테두리와 해당 화면 끝과의 거리)은 border안(테두리와 내용 글자 거리)은 padding
테두리 색상: 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 명시(시계방향)
배경 이미지배경색

space
예제
결과를 보여 줄 새 창 열기 Javascript(head 에 위치 함)
<script language=Javascript>
function openwin() {
   newwin=window.open('cxchild.html','childWin',
      'toolbar=no,location=no,scrollbars=no,width=450,height=250')
}
function closewin() {
  newwin.close()
}
</script>

열기(open)  새 창 열기 <a href="Javascript:openwin()">열기</a>
새 창 닫기 <a href="Javascript:newwin.close()">닫기</a> 새창이 열린 상태에서 또 열거나, 안 열린 상태에서 닫으면 에러가 남. 새 창 내용 code 새 창 내용 보기

소개 일반 텍스트 폰트 박스 색상 목록 색인 예제
번역문 소유자 - Trio 홈페이지 제공
이 문서(http://trio.co.kr/webrefer/css/csscolor.html)는
자유로이 연결 사용이 가능함.
예제 메뉴로