고정 헤더 영역
상세 컨텐츠
본문
■ 블록 단계 형식 속성
스타일 시트는 블록 단계의 각 요소가 사각 영역에 둘러쌓인 것처럼
처리한다. 블록 단계 요소는 새 줄에서 시작한다. 예를 들어, <H1>과
<P>는 블록 단계 요소이지만, <EM>은 블록 단계 요소가 아니다.
각 상자에는 안여백과 테두리, 그리고 여백이 있고, 사용자는 위, 아래,
좌, 우의 안여백과 테두리 폭, 그리고 여백을 설정할 수 있다.
1) 여백
CSS 구문 이름 : margin-left, margin-right, margin-top,
margin-bottom, margin
자바스크립트 구문 이름 : marginLeft, marginRight, marginTop,
marginBottom, margins()
사용가능값 : 길이(length), 백분율(percentage), auto
초기값 : 0
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : 부모 요소의 폭 참조
이 속성은 요소의 여백을 설정한다. 여백은 인접한 두가지 요소의 테두리
사이의 최소 거리를 나타낸다.
margin-left/marginLeft와 margin-right/marginRight, margin-top/marginTop,
및 margin-bottom/marginBottom에 특정 값을 지정하면 각 여백을 따로
지정할 수 있다.
CSS 구문에서는, margin 속성을 설정하여 한꺼번에 같은 값으로 모든 여백을
설정할 수도 있다.(주의: 속성 이름은 단독으로 쓰인다.) 자바스크립트
구문에서는 네 가지 여백을 한꺼번에 설정하기 위해 margin() 메쏘드를 사용
한다. (주의: 함수 이름에는 추가 요소가 같이 사용된다.)
margin 프로퍼티와 margins() 메쏘드의 매개변수는 차례로, 위 여백, 오른쪽
여백, 아래 여백, 그리고 왼쪽 여백이다.
예제:
========
CSS 구문
========
/* 위 여백=10pt, 오른쪽 여백=20pt, 아래 여백=30pt, 왼쪽 여백=40pt */
P {margin:10pt 20pt 30pt 40pt;}
/* P의 모든 여백을 40pt로 설정*/
P {margin:40pt;}
=================
자바스크립트 구문=================
/* 위 여백=10pt, 오른쪽 여백=20pt, 아래 여백=30pt, 왼쪽 여백=40pt */
tags.BODY.margins{"10pt", "20pt", "30pt", "40pt";};
/* P의 모든 여백을 40pt로 설정*/
tags.P.margins{"40pt"};
인접한 요소들의 인접한 여백(예를 들어, 왼쪽 요소의 오른쪽 여백과
오른쪽 요소의 왼쪽 여백)은 함께 더해진다. 그러나, 한 쪽 요소에
컨텐트가 없을 경우, 그 여백은 무시된다. 예를 들어, <H1> 요소의
아래 여백이 40포인트이고, 그 하위 <P> 요소의 위 여백이 30포인트라면,두 요소 사이의 간격은 70포인트가 된다. 그러나, <H1> 요소에는
컨텐트가 있지만, <P> 요소가 비어 있다면 둘 사이의 여백은 40포인
트가 된다.
(<IMG> 태그 같은) 대체 요소에 여백 속성이 적용되면 대체되는 요소에서
부모 요소의 다른 컨텐트 사이의 최소 거리를 나타내게 된다.
여백값을 음수로 사용하면 원치않는 결과가 나타날 수도 있으므로피하도록 한다.
2) 안여백
CSS 구문 이름 : padding-top, padding-right, padding-bottom,
padding-left, paddings
자바스크립트 구문 이름 : paddingTop, paddingRight, paddingBottom,
paddingLeft, paddings()
사용가능값 : 길이(length), 백분율(percentage)
초기값 : 0
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : 부모 요소의 폭 참조
이들 속성은 요소의 테두리와 컨텐트(텍스트나 이미지) 사이에 얼마나 많은
여백을 삽입해야 하는지를 설명한다. padding-top/paddinTop,
padding-right/paddingRight, padding-left/paddingLeft, padding-bottom/
paddingBottom에 값을 지정하면 각 모서리의 여백을 설정할 수 있다.
CSS 구문에서는 padding 프로퍼티를 사용하여 네 모서리의 안여백을 한꺼번에
설정할 수 있다. 자바스크립트 구문에서는 paddings() 메쏘드를 사용하여 네
모서리의 안여백을 한꺼번에 설정할 수 있다.
padding 프로퍼티(CSS 구문)와 paddings() 메쏘드(자바스크립트 구문)의
매개변수는 차례로 위 여백, 오른쪽 여백, 아래 여백, 왼쪽 여백이다.
========
CSS 구문
========
/*위 여백=10pt, 오른쪽 여백=20pt, 아래 여백=30pt, 왼쪽 여백=40pt */
P {padding:10pt 20pt 30pt 40pt;}
/* P의 모든 안여백을 40pt로 설정*/
P {padiding:40pt;}
=================
자바스크립트 구문
=================
/* 위 여백=10pt, 오른쪽 여백=20pt, 아래 여백=30pt, 왼쪽 여백=40pt */
tags.BODY.padding{"10pt", "20pt", "30pt", "40pt";};
/* P의 모든 안여백을 40pt로 설정*/
tags.P.paddings{"40pt"};
안여백 값은 음수를 사용할 수 없다.
요소의 배경색이나 배경 이미지를 설정하면 안여백 영역에 나타날
색상이나 이미지를 지정할 수 있다.
■ 블록 단계 형식 속성
3) 테두리 폭
CSS 구문 이름 : border-top-width, border-bottom-width, border-left-width, border-right-width,
border-width
자바스크립트 구문 이름 : borderTopWidth, borderBottomWidth,
borderLeftWidth, borderRightWidth,
borderWidths()
사용가능값 : 길이(length)
초기값 : 없음
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소 주위의 테두리 폭을 설정한다.
border-top-width/borderTopWidth에 값을 지정하면 상단 테두리의 폭을
설정할 수 있고, border-right-width/borderRightWidth에 값을 지정하면
오른쪽 테두리의 폭을 지정할 수 있다. 나머지 속성도 마찬가지 방법
으로 사용된다.
CSS 구문에서는 border-width 프로퍼티를 설정하면 네 군데 테두리
폭을한꺼번에 설정할 수 있고, 자바스크립트 구문에서는 borderWidths()
함수를 사용하여 네 군데 테두리 폭을 한꺼버에 설정할 수 있다.
border-width 프로퍼티(CSS 구문)와 borderWidths(자바스크립트 구문)
함수의 매개변수는 차례로 상단, 오른쪽, 하단, 왼쪽의 테두리 폭이다.
/* 상단=1pt, 오른쪽=2pt, 하단=3pt, 왼쪽=4pt */
P {border-width:1pt 2pt 3pt 4pt;} /* CSS */
tags.P.borderWidths("1pt", "2pt", "3pt", "4pt"); /* 자바스크립트 구문 */
/* 모든 테두리의 폭을 2pt로 설정할 경우 */
P {border-width:40pt; } /* CSS */
tags.P.borderWidhts("40pt"); /* 자바스크립트 구문 */
4) 테두리 스타일
CSS 구문 이름 : border-style
자바스크립트 구문 이름 : borderStyle
사용가능값 : none,solid, double, inset, outset, groov, ridth
초기값 : none
적용 대상 : 모든 요소
상속 여부 : 상속안됨
백분율값 : N/A
이 속성은 블록 단계 요소 주위의 테두리 스타일을 설정한다.
그러나 테두리가 눈에 보이게 하려면 테두리 폭을 지정해야 한다.
5) 테두리 색상
CSS 구문 이름 : border-color
자바스크립트 구문 이름 : borderColor
사용가능값 : none, 색상값(colorvalue)
초기값 : none
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 테두리의 색상을 설정한다. 색상은 색상 이름이나, 색상을
가리키는 6자리의 16진수값, 또는 RGB 색상 값을 사용한다.
예제
========
CSS 구문
========
P {border-color:blue;}
BLOCKQUOTE {border-color:#0000FF;}
H1 {border-color:rgb(0%, 0%, 100%);}
=================
자바스크립트 구문=================
tags.P.borderColor="blue";
tags.BLOCKQUOTE.borderColor="#0000FF";
tags.H1.borderColor="rgb(0%, 0%, 100%);
6) 폭
CSS 구문 이름 : width
자바스크립트 구문 이름 : width
사용가능값 : 길이(length), 백분율(percentage), auto
초기값 : auto
적용 대상 : 블록 단계와 대체 요소
상속 여부 : 상속 안됨
백분율값 : 부모 요소의 폭 참조
이 속성은 요소의 폭을 결정한다.
왼쪽 여백과 오른쪽 여백을 설정하고 다시 폭을 설정했을 경우,
여백 설정값은 폭 설정값을 무시하게 된다는 점을 명심해야 한다.
예를 들어, 왼쪽 여백을 25%로, 오른쪽 여백을 10%로 설정하고,
폭 설정을 100%로 살 경우, 폭 설정값은 무시된다.(폭 설정값은
최대 65%이기 때문이다)
========
CSS 구문
========
all.NARROW {width:50%;}
all.INDENTEDNARROW {margin-left:20%; width:60%;}
=================
자바스크립트 구문
=================
classes.NARROW.all.width="50%";
classes.INDENTEDARROW.all.width="60%";
classes.INDENTEDARROW.all.marginLeft="20%";
■ 블록 단계 형식 속성
7) 정렬
CSS 구문 이름 : float
자바스크립트 구문 이름 : align
사용가능값 : left, right, none
초기값 : none 적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
float 속성(CSS 구문)과 align 속성(자바스크립트 구문)은 해당 부모 내의
모든 요소들의 정렬 방법을 결정한다.(주의 : text-align/textAlign 속성은
텍스트 요소의 내용 정렬을 결정한다.)
자바스크립트에서 float라는 단어는 키워드이기 때문에, 자바스크립트
구문에서는 float라는 이름 대신 align라는 이름을 사용한다.
float/align 속성을 사용하면 요소를 왼쪽이나 오른쪽에 배치할
수 있고, 그 주위에 다른 컨텐트를 배치하는 방법도 정의할 수 있다.
값이 지정되어 있지 않으면 초기값은 none이다. 값이 none이라면 요소는
텍스트 내의 위치에 그대로 디스플레이된다.
값이 left나 right라면 요소는 (여백 설정값이 적용된 후에) 왼쪽이나
오른쪽에 나타난다. floating 요소의 왼쪽과 오른쪽에는 다른 컨텐트가
나타난다. 값이 left나 right라면 요소는 블록 단계 요소로 처리된다.
float/align 속성을 사용하면 요소들의 일반적인 흐름과 별도로 요소를
선언할 수 있다. 예를 들어, 요소의 float/align 속성이 left일 경우,
오른쪽에 일반 컨텐트가 나열된다.
요소의 float/align 속성을 설정할 경우, 해당 요소의 여백을 다시 지정
하지 않도록 한다. 여백을 지정하면 나머지 요소가 정확하게 나열되지
않는다. 그러나, floating 요소에 왼쪽 여백이나 오른쪽 여백을 두고싶다면, 원하는 여백을 가지고 있는 <DIV> 블록 같은 다른 요소의
내부에 둘 수 있다.
========
CSS 구문
========
<STYLE TYPE="text/css">
H4 {
width:70%;
border-styles:outset;
border-width:2pt;
border-color:green;
backgroud-color:rgb(70%,90%,80%);
padding:5%;
font-weight:bold;
}
H4.TEXTRIGHT {text-align:right; margin-right:30%;}
H4.TEXTRIGHT_FLOATLEFT {text-align:right; float:left;}
H4.FLOATRIGHT {float:right;}
H4.FIXED_RIGHT_MARGIN {float:right; margin-right:30%;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascirpt">
with(tags.H4) {
widht="70%";
borderStyle="outset";
borderWidth="2pt";
borderColor="green";
backgroundColor="rgb(70%, 90%, 80%)";
paddings("5%");
fontWeight="bold";
}
classes.TEXTRIGHT.H4.textAlign="right";
classes.TEXTRIGHT.H4.marginRight="30%";
classes.TEXTRIGHT_FLOATLEFT.H4.textRight="right";
classes.TEXTRIGHT_FLOATLEFT.H4.align="left";
classes.FLOATRIGHT.H4.align="right";
classes.FIXED_RIGHT_MARGIN.H4.aligh="right";
classes.FIXED_RIGTH_MARGIN.H4.marginRight="30%";
</STYLE>
=================
스타일시트 사용례
=================
<BODY>
<H4>Level-Four Heading</H4>
<P>I am an plain paragraph, positioned below a non-floating
level-four heading.
</P>
<H4 CLASS=TEXTRIGHT>H4 - My Text On Right, No Float</H4>
<P>I am also a plain paragraph, positioned below a non-floating
level-four heading. It just happens that the heading above me has
its text alignment set to right.
</P>
<H4 CLASS=FLOATRIGHT>H4 - Float = Right</H4>
<P>I am a regular paragraph. There's not much more you can say about me.
I am positioned after a level-four heading that is floating to the right,
so I come out positioned to the left of it.</P>
<BR CLEAR>
<H4 CLASS=TEXTRIGHT_FLOATLEFT>H4 - My Text on Right, Float = Left </H4>
<P>I'm also just a plain old paragrph going wherever the flow takes me.
</P>
<BR CLEAR>
<H4 CLASS=FIXED_RIGHT_MARGIN>H4 - Float=Right, Fixed Right Margin</H4>
<P>Hello? Hello! I am wrapping round an H4 that is floating to the right
and has a fixed right margin. When I try to satisfy all these requirements,
you see what happens! For best results, do not set the left and/or right
margin when you set the float (CSS syntax) or align (JavaScript syntax)
property. Use an enclosing element with margins instead.
</P>
<BR CLEAR>
<DIV STYLE="margin-left:30%;">
<H4 CLASS=FLOATRIGHT>H4 - Float = Right</H4>
<P>Notice how the heading next to me seems to have a right margin.
That's because we are both inside a DIV block that has a right margin.</P>
<BR CLEAR>
</DIV>
</BODY>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
*
8) Clear
CSS 구문 이름 : clear
자바스크립트 구문 이름 : clear
사용가능값 : none, left, right, both
초기값 : none
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소에서 floating 요소를 허용할지의 여부를 지정한다.특히, 이 속성의 값은 floating 요소가 허용되지 않는 부분을 나열한다.
clear를 left로 설정하면 요소는 왼쪽에 있는 floating 요소 아래로
옮겨질 것이다. clear를 none으로 설정하면 floating 요소는
어느 쪽에든 올 수 있다.
예제:
P {clear:left;}
tags.H1.clear = "left";
■ 색상 속성과 배경 속성
문서 전체에 색상과 배경 속성을 설정하는 것처럼 블록 단계 요소에도
색상과 배경 속성을 설정할 수 있다. 이들 속성은 해당 요소를 둘러싸는
"상자"에 적용된다.
1) 색상
CSS 구문 이름 : color
자바스크립트 구문 이름 : color
사용가능값 : 색상
초기값 : black
적용 대상 : 모든 요소
상속 여부 : 상속됨
백분율값 : N/A
이 속성은 요소의 텍스트 색상, 즉, 전면(foreground) 색상을 결정한다.
다음 예제는 빨간색(red)으로 설정하는 방법을 설명한다.
========
CSS 구문
========
<STYLE TYPE="text/css">
EM {color:red;}
B {color:rgb(255,0,0);}
I {color:rgb(100%, 0%, 0%);}
CODE {color:#FF0000;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
tags.EM.color="red";
tags.B.color="rgb(255,0,0)";
tags.I.color="rgb(100%, 0%, 0%);
tags.CODE.color="#FF0000";
</STYLE>
2) 배경 이미지
CSS 구문 이름 : backgroud-image
자바스크립트 구문 이름 : backgroudImage
사용가능값 : URL
초기값 : empty
적용대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소의 배경 이미지를 지정한다. 특정 URL은 스타일 시트 원본
주소에 대해 상대적으로 해석된다. (문서에 대한 상대 주소가 아니다)
========
CSS 구문
========
<STYLE TYPE="text/css">
H1.SPECIAL {
background-image:url(images/glass2.gif);
padding:20pt;
color:yellow;
}
H2.SPECIAL {
padding:20pt;
background-color:#FFFF33;
border-style:solid;
border-width:1pt;
border-color:black;
}
P.SPECIAL B {background-image:url(images/tile1a.gif);}
P.SPECIAL I {background-color:cyan;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
classes.SPECIAL.H1.backgroundImage = "images/glass2.gif";
classes.SPECIAL.H1.paddings("20pt");
classes.SPECIAL.H1.color="yellow";
classes.SPECIAL.H2.paddings("20pt);
classes.SPECIAL.H2.backgroundColor="FFFF33";
classes.SPECIAL.H2.borderStyle="solid";
classes.SPECIAL.H2.borderWidth="1pt";
classes.SPECIAL.H2.borderColor="black";
contextual(classes.SPECIAL.P, tags.B).backgroundImage=
"images/tile1a.gif";
contextual(classes.SPECIAL.P, tags.I).backgroundColor="cyan";
</STYLE>
==================
스타일 시트 사용례
==================
<H1 CLASS=SPECIAL>Heading One with Image Background</H1>
<P CLASS=SPECIAL>
Hello. Notice how the position of this paragraph that has an <B>image
background</B> is prompted to being a block-level element on its own
line.</P>
<H2 CLASS=SPECIAL>Heading Two with Solid Color Background</H2>
<P CLASS=SPECIAL>Hello, hereis some <I>very interesting</I>
information. Notice that each <I>colored portion</I> of this paragraph
just continues right along in its normal place.
</P>
3) 배경색
CSS 구문 이름 : background-color
자바스크립트 구문 이름 : backgrounColor
사용가능값 : 색상(color)
초기값 : empty
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소에 대한 배경 색상을 지정한다.
■ 분류 속성
이 속성은 요소들을 특정한 비주얼 매개변수로 설정하는 것이 아니라
좀더 큰 범주로 묶어주는 것이다.
1) 디스플레이
CSS 구문 이름 : display
자바스크립트 구문 이름 : display
사용가능값 : block, inline, list-item, none
초기값 : HTML에 따름
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소가 인라인(예, <EM>)인지, 블록 단계 요소(예, <H1>)인지,
혹은 블록 단계 목록 항목(예, <LI>)인지를 나타낸다. HTML 문서에서
초기값은 HTML 스펙(specifications)을 따른다.
값이 none이면 요소 뿐만 아니라 자식 요소와 주변 상자까지 디스플레이
하지 않는다.
블록 단계 요소는 inline 디스플레이 옵션에는 응답하지 않는다.
===========
CSS 구문 예
===========
EM.LISTEM {display:list-item;}
====================
자바스크립트 구문 예
====================
classes.LISTEM.EM.display="list-item";
2) 리스트 스타일 유형
CSS 구문 이름 : list-style-type
자바스크립트 구문 이름 : listStyleType
사용가능값 : disc, circle, square, decimal, lower-roam,
upper-roman,lower-alpha, upper-alpha, none
초기값 : disc
적용 대상 : display 속성값이 list-item인 요소 상속 여부 : 상속
백분율값 : N/A
이 속성은 리스트 항목(즉, display 속성값이 list-item인 요소)이
어떤 형식을 지니고 있는지를 설명한다.
이 속성은 어떤 요소에서도 설정할 수 있고, 자식은 그 값을
상속하게 된다. 그러나, 리스트 스타일은 display 속성값이 list-item인
요소에만 디스플레이된다.
===========
CSS 구문 예
===========
<STYLE TYPE="text/css">
UL.BLUELIST {color:blue;}
UL.BLUELIST LI {color:aqua; list-style-type:square;}
OL.REDLIST {color:red;}
OL.REDLIST LI {color:magenta; list-style-type:upper-roman;}
</STYLE>
====================
자바스크립트 구문 예
====================
<STYLE TYPE="text/javascript">
classes.BLUELIST.UL.color="blue";
contextual (classes.BLUELIST.UL, tags.LI).color="aqua";
contextual (classes.BLUELIST.UL, tags.LI).listStyleType="squalre";
classes.REDLIST.OL.color="red";
contextual (classes.REDLIST.OL, tags.LI).color="magenta";
contextual (classes.REDLIST.OL, tags.LI).listStyleType="upper-roman";
</STYLE>
==================
스타일 시트 사용례
==================
<UL CLASS=BLUELIST> <!-- LI 요소가 UL에서 상속됨 -->
<LI>Consulting
<LI>Development
<LI>Technology integration
</UL>
<OL CLASS=REDLIST< <--! LI 요소가 OL에서 상속됨 -->
<LI>Start the program
<LI>Enter your user name and password
<LI>From the File menu, choose the Magic command.
</OL>
3) 여백
CSS 구문 이름 : white-space
자바스크립트 구문 이름 : whiteSpace
사용가능값 : normal, pre 초기값 : HTML에 따름
적용 대상 : 블록 단계 요소
상속 여부: 상속
백분율값 : N/A
이 속성은 요소 내에 있는 여백의 처리 방법을 설명한다. 선택가능한
값은 다음과 같다:
* normal : 여백 무시
* pre : HTML의 <PRE> 요소와 똑같이 동작함
예:
P.KEEPSPACES (white-space:pre;) /* CSS 구문 */
classes.KEEPSPACE.whiteSpace = "pre"; /* 자바스크립트 구문 */
5.4 단위
■ 길이 단위
길이값의 형식은 부호 문자('+'와 '-')를 붙일 수도 있고 붙이지 않을 수도 있다.
(기본값은 '+')
길이 단위에는 상대 단위와 픽셀 단위, 절대 단위 등 세 가지 유형이 있다.
상대 단위는 다른 길이 속성에 대해 상대적인 길이이다. 상대 단위를
사용하는 스타일 시트는 한 매체에서 다른 매체로 쉽게 크기를 조절할 수있다.(예를 들어, 컴퓨터 디스플레이에서 레이저 프린터로 쉽게 전환이
가능하다) 백분율 단위와 키워드 값(예: x-large)도 비슷한 장점을 가진다.
자식 요소는 상대 값이 아닌 계산된 값을 상속한다.
예:
BODY {font-size:12pt; text-indent:3em;}
H1 {font-size:15pt;}
위의 예에서, H1 요소의 텍스트 들여쓰기 값은 45pt가 아닌 36pt가 된다.
지원되는 상대 단위는 다음과 같다:
em : 요소 폰트의 높이. 일반적으로 대문자 M의 폭이나 높이가 된다.
ex : 요소 폰트 높이의 ½, 일반적으로 글자 'x'의 높이가 된다.
px : 픽셀
지원되는 절대 단위는 다음과 같다:
pt : 포인트
pc : picas
px : 픽셀
in : 인치
mm : 밀리미터
cm : 센티미터
■ 색상 단위
색상값은 색상 이름이나 RGB 수치 중의 하나를 사용한다.
사용하는 색상 이름은 다음과 같다:
aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, yellow
이들 16가지 색상은 윈도우 VGA 색상표를 따른 것으로, HMTL 3.2에서도
사용된다.
tags.BODY.color = "black";
tags.backgroundColor = "white";
tags.H1.color = "maroon";
tags.H2.color = "olive";
RGB 색상을 6자리의 6진수로 지정할 수 있다. 이 때, 첫번째 두 자리는
red 값이고, 다음의 두 자리는 green 값, 마지막 두 자리는 blue 값이
된다.
예 :
BODY {background-color:#333333";} /* 회색(gray) */
rgb() 함수를 사용해서 RGB 색상을 지정할 수도 있다. rgb() 함수는세 가지 매개 변수를 가지는데, 각각 red와 green, blue 값에 해당한다.
각 색상 값은 다음 예에서 보는 것처럼 0에서 255까지의 정수값이거나
백분율값으로 나타낸다:
P {color: rgb(200, 20, 240);} /* 밝은 보라(bright purple) */
BLOCKQUOTE {background-color: rgb(100%, 100%, 20%);}
/* 밝은 노랑(bright yellow) */
스타일 시트는 블록 단계의 각 요소가 사각 영역에 둘러쌓인 것처럼
처리한다. 블록 단계 요소는 새 줄에서 시작한다. 예를 들어, <H1>과
<P>는 블록 단계 요소이지만, <EM>은 블록 단계 요소가 아니다.
각 상자에는 안여백과 테두리, 그리고 여백이 있고, 사용자는 위, 아래,
좌, 우의 안여백과 테두리 폭, 그리고 여백을 설정할 수 있다.
1) 여백
CSS 구문 이름 : margin-left, margin-right, margin-top,
margin-bottom, margin
자바스크립트 구문 이름 : marginLeft, marginRight, marginTop,
marginBottom, margins()
사용가능값 : 길이(length), 백분율(percentage), auto
초기값 : 0
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : 부모 요소의 폭 참조
이 속성은 요소의 여백을 설정한다. 여백은 인접한 두가지 요소의 테두리
사이의 최소 거리를 나타낸다.
margin-left/marginLeft와 margin-right/marginRight, margin-top/marginTop,
및 margin-bottom/marginBottom에 특정 값을 지정하면 각 여백을 따로
지정할 수 있다.
CSS 구문에서는, margin 속성을 설정하여 한꺼번에 같은 값으로 모든 여백을
설정할 수도 있다.(주의: 속성 이름은 단독으로 쓰인다.) 자바스크립트
구문에서는 네 가지 여백을 한꺼번에 설정하기 위해 margin() 메쏘드를 사용
한다. (주의: 함수 이름에는 추가 요소가 같이 사용된다.)
margin 프로퍼티와 margins() 메쏘드의 매개변수는 차례로, 위 여백, 오른쪽
여백, 아래 여백, 그리고 왼쪽 여백이다.
예제:
========
CSS 구문
========
/* 위 여백=10pt, 오른쪽 여백=20pt, 아래 여백=30pt, 왼쪽 여백=40pt */
P {margin:10pt 20pt 30pt 40pt;}
/* P의 모든 여백을 40pt로 설정*/
P {margin:40pt;}
=================
자바스크립트 구문=================
/* 위 여백=10pt, 오른쪽 여백=20pt, 아래 여백=30pt, 왼쪽 여백=40pt */
tags.BODY.margins{"10pt", "20pt", "30pt", "40pt";};
/* P의 모든 여백을 40pt로 설정*/
tags.P.margins{"40pt"};
인접한 요소들의 인접한 여백(예를 들어, 왼쪽 요소의 오른쪽 여백과
오른쪽 요소의 왼쪽 여백)은 함께 더해진다. 그러나, 한 쪽 요소에
컨텐트가 없을 경우, 그 여백은 무시된다. 예를 들어, <H1> 요소의
아래 여백이 40포인트이고, 그 하위 <P> 요소의 위 여백이 30포인트라면,두 요소 사이의 간격은 70포인트가 된다. 그러나, <H1> 요소에는
컨텐트가 있지만, <P> 요소가 비어 있다면 둘 사이의 여백은 40포인
트가 된다.
(<IMG> 태그 같은) 대체 요소에 여백 속성이 적용되면 대체되는 요소에서
부모 요소의 다른 컨텐트 사이의 최소 거리를 나타내게 된다.
여백값을 음수로 사용하면 원치않는 결과가 나타날 수도 있으므로피하도록 한다.
2) 안여백
CSS 구문 이름 : padding-top, padding-right, padding-bottom,
padding-left, paddings
자바스크립트 구문 이름 : paddingTop, paddingRight, paddingBottom,
paddingLeft, paddings()
사용가능값 : 길이(length), 백분율(percentage)
초기값 : 0
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : 부모 요소의 폭 참조
이들 속성은 요소의 테두리와 컨텐트(텍스트나 이미지) 사이에 얼마나 많은
여백을 삽입해야 하는지를 설명한다. padding-top/paddinTop,
padding-right/paddingRight, padding-left/paddingLeft, padding-bottom/
paddingBottom에 값을 지정하면 각 모서리의 여백을 설정할 수 있다.
CSS 구문에서는 padding 프로퍼티를 사용하여 네 모서리의 안여백을 한꺼번에
설정할 수 있다. 자바스크립트 구문에서는 paddings() 메쏘드를 사용하여 네
모서리의 안여백을 한꺼번에 설정할 수 있다.
padding 프로퍼티(CSS 구문)와 paddings() 메쏘드(자바스크립트 구문)의
매개변수는 차례로 위 여백, 오른쪽 여백, 아래 여백, 왼쪽 여백이다.
========
CSS 구문
========
/*위 여백=10pt, 오른쪽 여백=20pt, 아래 여백=30pt, 왼쪽 여백=40pt */
P {padding:10pt 20pt 30pt 40pt;}
/* P의 모든 안여백을 40pt로 설정*/
P {padiding:40pt;}
=================
자바스크립트 구문
=================
/* 위 여백=10pt, 오른쪽 여백=20pt, 아래 여백=30pt, 왼쪽 여백=40pt */
tags.BODY.padding{"10pt", "20pt", "30pt", "40pt";};
/* P의 모든 안여백을 40pt로 설정*/
tags.P.paddings{"40pt"};
안여백 값은 음수를 사용할 수 없다.
요소의 배경색이나 배경 이미지를 설정하면 안여백 영역에 나타날
색상이나 이미지를 지정할 수 있다.
■ 블록 단계 형식 속성
3) 테두리 폭
CSS 구문 이름 : border-top-width, border-bottom-width, border-left-width, border-right-width,
border-width
자바스크립트 구문 이름 : borderTopWidth, borderBottomWidth,
borderLeftWidth, borderRightWidth,
borderWidths()
사용가능값 : 길이(length)
초기값 : 없음
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소 주위의 테두리 폭을 설정한다.
border-top-width/borderTopWidth에 값을 지정하면 상단 테두리의 폭을
설정할 수 있고, border-right-width/borderRightWidth에 값을 지정하면
오른쪽 테두리의 폭을 지정할 수 있다. 나머지 속성도 마찬가지 방법
으로 사용된다.
CSS 구문에서는 border-width 프로퍼티를 설정하면 네 군데 테두리
폭을한꺼번에 설정할 수 있고, 자바스크립트 구문에서는 borderWidths()
함수를 사용하여 네 군데 테두리 폭을 한꺼버에 설정할 수 있다.
border-width 프로퍼티(CSS 구문)와 borderWidths(자바스크립트 구문)
함수의 매개변수는 차례로 상단, 오른쪽, 하단, 왼쪽의 테두리 폭이다.
/* 상단=1pt, 오른쪽=2pt, 하단=3pt, 왼쪽=4pt */
P {border-width:1pt 2pt 3pt 4pt;} /* CSS */
tags.P.borderWidths("1pt", "2pt", "3pt", "4pt"); /* 자바스크립트 구문 */
/* 모든 테두리의 폭을 2pt로 설정할 경우 */
P {border-width:40pt; } /* CSS */
tags.P.borderWidhts("40pt"); /* 자바스크립트 구문 */
4) 테두리 스타일
CSS 구문 이름 : border-style
자바스크립트 구문 이름 : borderStyle
사용가능값 : none,solid, double, inset, outset, groov, ridth
초기값 : none
적용 대상 : 모든 요소
상속 여부 : 상속안됨
백분율값 : N/A
이 속성은 블록 단계 요소 주위의 테두리 스타일을 설정한다.
그러나 테두리가 눈에 보이게 하려면 테두리 폭을 지정해야 한다.
5) 테두리 색상
CSS 구문 이름 : border-color
자바스크립트 구문 이름 : borderColor
사용가능값 : none, 색상값(colorvalue)
초기값 : none
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 테두리의 색상을 설정한다. 색상은 색상 이름이나, 색상을
가리키는 6자리의 16진수값, 또는 RGB 색상 값을 사용한다.
예제
========
CSS 구문
========
P {border-color:blue;}
BLOCKQUOTE {border-color:#0000FF;}
H1 {border-color:rgb(0%, 0%, 100%);}
=================
자바스크립트 구문=================
tags.P.borderColor="blue";
tags.BLOCKQUOTE.borderColor="#0000FF";
tags.H1.borderColor="rgb(0%, 0%, 100%);
6) 폭
CSS 구문 이름 : width
자바스크립트 구문 이름 : width
사용가능값 : 길이(length), 백분율(percentage), auto
초기값 : auto
적용 대상 : 블록 단계와 대체 요소
상속 여부 : 상속 안됨
백분율값 : 부모 요소의 폭 참조
이 속성은 요소의 폭을 결정한다.
왼쪽 여백과 오른쪽 여백을 설정하고 다시 폭을 설정했을 경우,
여백 설정값은 폭 설정값을 무시하게 된다는 점을 명심해야 한다.
예를 들어, 왼쪽 여백을 25%로, 오른쪽 여백을 10%로 설정하고,
폭 설정을 100%로 살 경우, 폭 설정값은 무시된다.(폭 설정값은
최대 65%이기 때문이다)
========
CSS 구문
========
all.NARROW {width:50%;}
all.INDENTEDNARROW {margin-left:20%; width:60%;}
=================
자바스크립트 구문
=================
classes.NARROW.all.width="50%";
classes.INDENTEDARROW.all.width="60%";
classes.INDENTEDARROW.all.marginLeft="20%";
■ 블록 단계 형식 속성
7) 정렬
CSS 구문 이름 : float
자바스크립트 구문 이름 : align
사용가능값 : left, right, none
초기값 : none 적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
float 속성(CSS 구문)과 align 속성(자바스크립트 구문)은 해당 부모 내의
모든 요소들의 정렬 방법을 결정한다.(주의 : text-align/textAlign 속성은
텍스트 요소의 내용 정렬을 결정한다.)
자바스크립트에서 float라는 단어는 키워드이기 때문에, 자바스크립트
구문에서는 float라는 이름 대신 align라는 이름을 사용한다.
float/align 속성을 사용하면 요소를 왼쪽이나 오른쪽에 배치할
수 있고, 그 주위에 다른 컨텐트를 배치하는 방법도 정의할 수 있다.
값이 지정되어 있지 않으면 초기값은 none이다. 값이 none이라면 요소는
텍스트 내의 위치에 그대로 디스플레이된다.
값이 left나 right라면 요소는 (여백 설정값이 적용된 후에) 왼쪽이나
오른쪽에 나타난다. floating 요소의 왼쪽과 오른쪽에는 다른 컨텐트가
나타난다. 값이 left나 right라면 요소는 블록 단계 요소로 처리된다.
float/align 속성을 사용하면 요소들의 일반적인 흐름과 별도로 요소를
선언할 수 있다. 예를 들어, 요소의 float/align 속성이 left일 경우,
오른쪽에 일반 컨텐트가 나열된다.
요소의 float/align 속성을 설정할 경우, 해당 요소의 여백을 다시 지정
하지 않도록 한다. 여백을 지정하면 나머지 요소가 정확하게 나열되지
않는다. 그러나, floating 요소에 왼쪽 여백이나 오른쪽 여백을 두고싶다면, 원하는 여백을 가지고 있는 <DIV> 블록 같은 다른 요소의
내부에 둘 수 있다.
========
CSS 구문
========
<STYLE TYPE="text/css">
H4 {
width:70%;
border-styles:outset;
border-width:2pt;
border-color:green;
backgroud-color:rgb(70%,90%,80%);
padding:5%;
font-weight:bold;
}
H4.TEXTRIGHT {text-align:right; margin-right:30%;}
H4.TEXTRIGHT_FLOATLEFT {text-align:right; float:left;}
H4.FLOATRIGHT {float:right;}
H4.FIXED_RIGHT_MARGIN {float:right; margin-right:30%;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascirpt">
with(tags.H4) {
widht="70%";
borderStyle="outset";
borderWidth="2pt";
borderColor="green";
backgroundColor="rgb(70%, 90%, 80%)";
paddings("5%");
fontWeight="bold";
}
classes.TEXTRIGHT.H4.textAlign="right";
classes.TEXTRIGHT.H4.marginRight="30%";
classes.TEXTRIGHT_FLOATLEFT.H4.textRight="right";
classes.TEXTRIGHT_FLOATLEFT.H4.align="left";
classes.FLOATRIGHT.H4.align="right";
classes.FIXED_RIGHT_MARGIN.H4.aligh="right";
classes.FIXED_RIGTH_MARGIN.H4.marginRight="30%";
</STYLE>
=================
스타일시트 사용례
=================
<BODY>
<H4>Level-Four Heading</H4>
<P>I am an plain paragraph, positioned below a non-floating
level-four heading.
</P>
<H4 CLASS=TEXTRIGHT>H4 - My Text On Right, No Float</H4>
<P>I am also a plain paragraph, positioned below a non-floating
level-four heading. It just happens that the heading above me has
its text alignment set to right.
</P>
<H4 CLASS=FLOATRIGHT>H4 - Float = Right</H4>
<P>I am a regular paragraph. There's not much more you can say about me.
I am positioned after a level-four heading that is floating to the right,
so I come out positioned to the left of it.</P>
<BR CLEAR>
<H4 CLASS=TEXTRIGHT_FLOATLEFT>H4 - My Text on Right, Float = Left </H4>
<P>I'm also just a plain old paragrph going wherever the flow takes me.
</P>
<BR CLEAR>
<H4 CLASS=FIXED_RIGHT_MARGIN>H4 - Float=Right, Fixed Right Margin</H4>
<P>Hello? Hello! I am wrapping round an H4 that is floating to the right
and has a fixed right margin. When I try to satisfy all these requirements,
you see what happens! For best results, do not set the left and/or right
margin when you set the float (CSS syntax) or align (JavaScript syntax)
property. Use an enclosing element with margins instead.
</P>
<BR CLEAR>
<DIV STYLE="margin-left:30%;">
<H4 CLASS=FLOATRIGHT>H4 - Float = Right</H4>
<P>Notice how the heading next to me seems to have a right margin.
That's because we are both inside a DIV block that has a right margin.</P>
<BR CLEAR>
</DIV>
</BODY>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
*
8) Clear
CSS 구문 이름 : clear
자바스크립트 구문 이름 : clear
사용가능값 : none, left, right, both
초기값 : none
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소에서 floating 요소를 허용할지의 여부를 지정한다.특히, 이 속성의 값은 floating 요소가 허용되지 않는 부분을 나열한다.
clear를 left로 설정하면 요소는 왼쪽에 있는 floating 요소 아래로
옮겨질 것이다. clear를 none으로 설정하면 floating 요소는
어느 쪽에든 올 수 있다.
예제:
P {clear:left;}
tags.H1.clear = "left";
■ 색상 속성과 배경 속성
문서 전체에 색상과 배경 속성을 설정하는 것처럼 블록 단계 요소에도
색상과 배경 속성을 설정할 수 있다. 이들 속성은 해당 요소를 둘러싸는
"상자"에 적용된다.
1) 색상
CSS 구문 이름 : color
자바스크립트 구문 이름 : color
사용가능값 : 색상
초기값 : black
적용 대상 : 모든 요소
상속 여부 : 상속됨
백분율값 : N/A
이 속성은 요소의 텍스트 색상, 즉, 전면(foreground) 색상을 결정한다.
다음 예제는 빨간색(red)으로 설정하는 방법을 설명한다.
========
CSS 구문
========
<STYLE TYPE="text/css">
EM {color:red;}
B {color:rgb(255,0,0);}
I {color:rgb(100%, 0%, 0%);}
CODE {color:#FF0000;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
tags.EM.color="red";
tags.B.color="rgb(255,0,0)";
tags.I.color="rgb(100%, 0%, 0%);
tags.CODE.color="#FF0000";
</STYLE>
2) 배경 이미지
CSS 구문 이름 : backgroud-image
자바스크립트 구문 이름 : backgroudImage
사용가능값 : URL
초기값 : empty
적용대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소의 배경 이미지를 지정한다. 특정 URL은 스타일 시트 원본
주소에 대해 상대적으로 해석된다. (문서에 대한 상대 주소가 아니다)
========
CSS 구문
========
<STYLE TYPE="text/css">
H1.SPECIAL {
background-image:url(images/glass2.gif);
padding:20pt;
color:yellow;
}
H2.SPECIAL {
padding:20pt;
background-color:#FFFF33;
border-style:solid;
border-width:1pt;
border-color:black;
}
P.SPECIAL B {background-image:url(images/tile1a.gif);}
P.SPECIAL I {background-color:cyan;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
classes.SPECIAL.H1.backgroundImage = "images/glass2.gif";
classes.SPECIAL.H1.paddings("20pt");
classes.SPECIAL.H1.color="yellow";
classes.SPECIAL.H2.paddings("20pt);
classes.SPECIAL.H2.backgroundColor="FFFF33";
classes.SPECIAL.H2.borderStyle="solid";
classes.SPECIAL.H2.borderWidth="1pt";
classes.SPECIAL.H2.borderColor="black";
contextual(classes.SPECIAL.P, tags.B).backgroundImage=
"images/tile1a.gif";
contextual(classes.SPECIAL.P, tags.I).backgroundColor="cyan";
</STYLE>
==================
스타일 시트 사용례
==================
<H1 CLASS=SPECIAL>Heading One with Image Background</H1>
<P CLASS=SPECIAL>
Hello. Notice how the position of this paragraph that has an <B>image
background</B> is prompted to being a block-level element on its own
line.</P>
<H2 CLASS=SPECIAL>Heading Two with Solid Color Background</H2>
<P CLASS=SPECIAL>Hello, hereis some <I>very interesting</I>
information. Notice that each <I>colored portion</I> of this paragraph
just continues right along in its normal place.
</P>
3) 배경색
CSS 구문 이름 : background-color
자바스크립트 구문 이름 : backgrounColor
사용가능값 : 색상(color)
초기값 : empty
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소에 대한 배경 색상을 지정한다.
■ 분류 속성
이 속성은 요소들을 특정한 비주얼 매개변수로 설정하는 것이 아니라
좀더 큰 범주로 묶어주는 것이다.
1) 디스플레이
CSS 구문 이름 : display
자바스크립트 구문 이름 : display
사용가능값 : block, inline, list-item, none
초기값 : HTML에 따름
적용 대상 : 모든 요소
상속 여부 : 상속 안됨
백분율값 : N/A
이 속성은 요소가 인라인(예, <EM>)인지, 블록 단계 요소(예, <H1>)인지,
혹은 블록 단계 목록 항목(예, <LI>)인지를 나타낸다. HTML 문서에서
초기값은 HTML 스펙(specifications)을 따른다.
값이 none이면 요소 뿐만 아니라 자식 요소와 주변 상자까지 디스플레이
하지 않는다.
블록 단계 요소는 inline 디스플레이 옵션에는 응답하지 않는다.
===========
CSS 구문 예
===========
EM.LISTEM {display:list-item;}
====================
자바스크립트 구문 예
====================
classes.LISTEM.EM.display="list-item";
2) 리스트 스타일 유형
CSS 구문 이름 : list-style-type
자바스크립트 구문 이름 : listStyleType
사용가능값 : disc, circle, square, decimal, lower-roam,
upper-roman,lower-alpha, upper-alpha, none
초기값 : disc
적용 대상 : display 속성값이 list-item인 요소 상속 여부 : 상속
백분율값 : N/A
이 속성은 리스트 항목(즉, display 속성값이 list-item인 요소)이
어떤 형식을 지니고 있는지를 설명한다.
이 속성은 어떤 요소에서도 설정할 수 있고, 자식은 그 값을
상속하게 된다. 그러나, 리스트 스타일은 display 속성값이 list-item인
요소에만 디스플레이된다.
===========
CSS 구문 예
===========
<STYLE TYPE="text/css">
UL.BLUELIST {color:blue;}
UL.BLUELIST LI {color:aqua; list-style-type:square;}
OL.REDLIST {color:red;}
OL.REDLIST LI {color:magenta; list-style-type:upper-roman;}
</STYLE>
====================
자바스크립트 구문 예
====================
<STYLE TYPE="text/javascript">
classes.BLUELIST.UL.color="blue";
contextual (classes.BLUELIST.UL, tags.LI).color="aqua";
contextual (classes.BLUELIST.UL, tags.LI).listStyleType="squalre";
classes.REDLIST.OL.color="red";
contextual (classes.REDLIST.OL, tags.LI).color="magenta";
contextual (classes.REDLIST.OL, tags.LI).listStyleType="upper-roman";
</STYLE>
==================
스타일 시트 사용례
==================
<UL CLASS=BLUELIST> <!-- LI 요소가 UL에서 상속됨 -->
<LI>Consulting
<LI>Development
<LI>Technology integration
</UL>
<OL CLASS=REDLIST< <--! LI 요소가 OL에서 상속됨 -->
<LI>Start the program
<LI>Enter your user name and password
<LI>From the File menu, choose the Magic command.
</OL>
3) 여백
CSS 구문 이름 : white-space
자바스크립트 구문 이름 : whiteSpace
사용가능값 : normal, pre 초기값 : HTML에 따름
적용 대상 : 블록 단계 요소
상속 여부: 상속
백분율값 : N/A
이 속성은 요소 내에 있는 여백의 처리 방법을 설명한다. 선택가능한
값은 다음과 같다:
* normal : 여백 무시
* pre : HTML의 <PRE> 요소와 똑같이 동작함
예:
P.KEEPSPACES (white-space:pre;) /* CSS 구문 */
classes.KEEPSPACE.whiteSpace = "pre"; /* 자바스크립트 구문 */
5.4 단위
■ 길이 단위
길이값의 형식은 부호 문자('+'와 '-')를 붙일 수도 있고 붙이지 않을 수도 있다.
(기본값은 '+')
길이 단위에는 상대 단위와 픽셀 단위, 절대 단위 등 세 가지 유형이 있다.
상대 단위는 다른 길이 속성에 대해 상대적인 길이이다. 상대 단위를
사용하는 스타일 시트는 한 매체에서 다른 매체로 쉽게 크기를 조절할 수있다.(예를 들어, 컴퓨터 디스플레이에서 레이저 프린터로 쉽게 전환이
가능하다) 백분율 단위와 키워드 값(예: x-large)도 비슷한 장점을 가진다.
자식 요소는 상대 값이 아닌 계산된 값을 상속한다.
예:
BODY {font-size:12pt; text-indent:3em;}
H1 {font-size:15pt;}
위의 예에서, H1 요소의 텍스트 들여쓰기 값은 45pt가 아닌 36pt가 된다.
지원되는 상대 단위는 다음과 같다:
em : 요소 폰트의 높이. 일반적으로 대문자 M의 폭이나 높이가 된다.
ex : 요소 폰트 높이의 ½, 일반적으로 글자 'x'의 높이가 된다.
px : 픽셀
지원되는 절대 단위는 다음과 같다:
pt : 포인트
pc : picas
px : 픽셀
in : 인치
mm : 밀리미터
cm : 센티미터
■ 색상 단위
색상값은 색상 이름이나 RGB 수치 중의 하나를 사용한다.
사용하는 색상 이름은 다음과 같다:
aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, yellow
이들 16가지 색상은 윈도우 VGA 색상표를 따른 것으로, HMTL 3.2에서도
사용된다.
tags.BODY.color = "black";
tags.backgroundColor = "white";
tags.H1.color = "maroon";
tags.H2.color = "olive";
RGB 색상을 6자리의 6진수로 지정할 수 있다. 이 때, 첫번째 두 자리는
red 값이고, 다음의 두 자리는 green 값, 마지막 두 자리는 blue 값이
된다.
예 :
BODY {background-color:#333333";} /* 회색(gray) */
rgb() 함수를 사용해서 RGB 색상을 지정할 수도 있다. rgb() 함수는세 가지 매개 변수를 가지는데, 각각 red와 green, blue 값에 해당한다.
각 색상 값은 다음 예에서 보는 것처럼 0에서 255까지의 정수값이거나
백분율값으로 나타낸다:
P {color: rgb(200, 20, 240);} /* 밝은 보라(bright purple) */
BLOCKQUOTE {background-color: rgb(100%, 100%, 20%);}
/* 밝은 노랑(bright yellow) */
