 |
CSS 매뉴얼 색상 특성 |  |
| 소개 | 일반 | 텍스트 | 폰트 | 박스 | 색상 | 목록 | 색인 | 예제 |
| 색상 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;
}
| ||||||||
 | |||||||||
<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>
| |||||||||
| |||||||||
결과를 보여 줄 새 창 열기 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>
|
|||||||||
|
