Copyright: woolee 1999.7


머리말

links  Netscape와 Explorer가 지원하는 css속성

Style Sheet - Cascading Style Sheet Level1

 MicroSoft의 Internet Explorer는 이미 3.x판에서부터 css1을 지원하였고 5.0판에서는 css2까지 지원하고 있는 반면, Netscape는  Communicator4.0을 내놓으면서 비로소 css1을 지원하기 시작하였다. 이렇게 되면서 웹문서 작성하는 데에 비교적 선택의 폭이 넓어졌다고 할 수 있다.

 스타일 시트를 개발하게 된 목적이 HTML의 경직된 구조라는 단점을 보완하기 위한 것임에 비추어 보다 자유로운 구성의 웹문서를 만들 수 있게 된 것이다.

 그러나, 여기에도 제약이 있다. 두 브라우저, 특히 Communicator4.0은 css1을 제한적으로 지원하고 있다. 그 뿐 아니라 두 브라우저가 지원하는 형식에 차이가 있다.(더우기 4.5x판에서는 퇴보하고 있는 것으로 보인다.) 그러므로, HTML4.0에서처럼 그 차이와 공통점을 잘 파악해서 사용하지 않으면, 웹문서가 엉망이 되고 만다는 것을 잘 알아야 한다.

웹문서를 자유롭게 편집할 수 있는 Style Sheet.

 Style Sheet는 HTML을 확장하면서 동시에 그 안에 구속되는 이중성을 가지고 있다. 이는 그것이 다른 Script처럼 독립적으로 쓰일 수 없음을 의미한다. 그러나, 이러한 한계가 있다 해도 Style Sheet는 웹문서 작성에서 놀라울 정도로 다양한 확장을 가능케 해준다. 더우기 요즘 각광을 받고 있는 Dynamic HTML은 Style Seet를 그 구성의 일부로 사용하고 있을 뿐만 아니라 요즘 주목받고 있는 XML문서의 형태를 구성하는 데에 중요한 역할을 하고 있다. 이 도움말은 css1의 전체 형식에서부터 두 브라우저의 지원 여부를 각각 살펴보고 있다.

 참고에서는 여기에서 다루고 있는 주제와 관련한 URL 정보를 모았다.

테스트 버전 : Netscape Communicator4.05   Microsoft Explorer4.01

CSS 맛보기

CSS의 속성

This help file was created with HelpScribble.


CSS 맛보기

links   Netscape와 Explorer가 지원하는 css속성

HTML에 Style Sheet을 넣는 방법은 다양하다.(CSS와 HTML의연결) 여기서는 태그, <style> </style>를 가지고 CSS가 표현되는 형식을 간단하게 알아보기로 한다.

  간단한 (끼워넣기embeding)의 보기

<HEAD>

<TITLE>예문</TITLE>

<STYLE TYPE="text/css">

<!--

  BODY  { background: red; color: black }

-->

</STYLE>

</HEAD>

위에서 BODY라는 대상Selector은 다른 것, 예를 들면 P 등, 다른 HTML 태그로  대체될 수 있다. 그리고, {  }안에서는 바탕background이라는 속성property에 red라는 값value을, 색상color에는 black라는 값value을 지정하고 있다. 이렇게 하면,  BODY라는 태그의 영향권 안에 있는 바탕background과 문장은 붉고 검게 나타난다.

BODY  { background: red; color: black }

위에서 붉게 표시된 것은 절대적이다. 어떤 다른 것으로도 대체될 수 없다. 잘 못 사용할 경우, 선택한 내용은 나타나지 않는다. 다만, 한 칸 띄어쓰기는 형식과 무관하다. 즉,

BODY{background:red;color:black}

위처럼 하여도 정상적인 실행에는 문제가 전혀없다.

CSS의 속성

This help file was created with HelpScribble.


CSS의 속성
Css의 속성CSS Properties

links   Netscape와 Explorer가 지원하는 css속성

글꼴Font Properties

글꼴종류Font Family

글꼴체Font Style

글꼴변형Font Variant

글꼴굵기Font Weight

글꼴크기Font Size

글꼴Font

색상과 바탕Color and Background Properties

색상Color

바탕색Background Color

바탕그림Background Image

바탕그림의 연속Background Repeat

바탕의 성격Background Attachment

바탕그림의 위치Background Position

바탕Background

문장Text Properties

낱말간격Word Spacing

글자간격Letter Spacing

문자표시Text Decoration

수직정렬Vertical Alignment

문자변환Text Transformation

문장의 위치지정Text Alignment

둘여쓰기Text Indentation

줄간격Line Height

CSS와 HTML의연결Linking Style Sheets to HTML

.css 파일 불러들이기Linking to an External Style Sheet

<Style> </style> 사용하기Embedding a Style Sheet

@import로 불러오기Importing a Style Sheet

직접쓰기Inlining Style

CLASS(The CLASS Attribute)

ID(The ID Attribute)

SPAN(The SPAN Element)

DIV(The DIV Element)

윤곽Box Properties

윗 여백Top Margin

오른쪽 여백Right Margin

밑 여백Bottom Margin

왼쪽 여백Left Margin

여백Margin

윗 공백Top Padding

오른쪽 공백Right Padding

밑 공백Bottom Padding

왼쪽 공백Left Padding

공백Padding

윗 테두리의 굵기Top Border Width

오른쪽 테두리의 굵기Right Border Width

밑 테두리의 굵기Bottom Border Width

왼쪽 테두리의 굵기Left Border Width

테두리의 굵기Border Width

테두리의 색상Border Color

테두리의 형태Border Style

윗 테두리Top Border

오른쪽 테두리Right Border

밑 테두리Bottom Border

왼쪽 테두리Left Border

테두리Border

폭Width

높이Height

놓기Float

Clear

문단형식Classification Properties

Display

Whitespace

List Style Type

List Style Image

List Style Position

List Style

This help file was created with HelpScribble.


문장Text Properties

links   Netscape와 Explorer가 지원하는 css속성

낱말간격Word Spacing

형식 word-spacing: <value=normal | <length>>

보기

P { word-spacing: 1px }

B { word-spacing: -2px }

낱말 사이의 간격을 정한다. 음수도 사용할 수 있다.

문자간격Letter Spacing

형식 letter-spacing: <value=normal | <length>>

보기

H1 { letter-spacing: 1px }

P  { letter-spacing: -1px }

문자 사이의 간격을 정한다. 음수도 사용가능하다.

장식Text Decoration

형식 text-decoration: <value=none | underline | overline | line-through | blink>

보기 A { text-decoration: none } 링크Link에 자동으로 설정되는 밑줄을 없앤다.

문자에 밑줄Underline, 윗줄Overline, 중간줄Line-Through, 깜빡이Blink 등을 지정할 때에 사용한다.

수직정렬Vertical Alignment

형식

vertical-align: <value=baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>>

보기

IMG { vertical-align: super }

A { vertical-align: 50% }

HTML의 EM이나, A,  IMG처럼 줄바꿈Line Break하지 않는 요소Element(=Inline Element)에 적용되며, 줄간격Line-Height내에서의 상대적 위치를 지정한다. 음수도 사용가능하다.

baseline : 문자의 밑선에 맞추어 정렬.(초기값Initial Value)

middle : 문자의 중앙을 밑선으로 해서 정렬.

sub : 아래첨자Subscript

super : 윗첨자Superscript

text-top : 문자의 윗선을 밑선으로 해서 정렬.

text-bottom : 문자의 밑선을 윗선으로 해서 정렬.

top : 상단에 정렬

bottom : 하단에 정렬

문자변환Text Transformation

형식 text-transform: <value=none | capitalize | uppercase | lowercase>

보기 H1 { text-transform: uppercase }

영어의 대소문자를 변환한다.

capitalize : 각 낱말의 첫글자를 대문자로 바꾼다.

uppercase : 각 낱말의 모든 글자를 대문자로 바꾼다.

lowercase : 각 낱말의 모든 글자를 소문자로 바꾼다.

문장의 위치지정Text Alignment

형식 text-align: <value=left | right | center | justify>

보기 H1 { text-align: center } H1안의 문장이 중앙에 가도록 한다.

묶음요소Block-Level Elements(P, H1 등)에만 적용된다. HTML의 ALIGN과 비슷한 기능을 한다.

들여쓰기Text Indentation

형식 text-indent: <value=<length> | <percentage>>

보기 P { text-indent: 5px }

묶음요소Block-Level Elements(P, H1등)에만 적용되며, 문단의 첫줄을 들여쓰기하는 정도를 지정한다.

줄간격Line Height

형식 line-height: <value= normal | <number> | <length> | <percentage>

문단에서 줄과 줄 사이의 공간을 지정한다.

CSS의 속성

This help file was created with HelpScribble.


색상과 바탕Color and Background Properties

links   Netscape와 Explorer가 지원하는 css속성

색상Color

형식 color: <color>

보기  H1 {color: red }        H2 {color: #000000 }

색상은 키워드나 숫자로 구성된 RGB 값으로 임의의 태그안에 있는 문자Letter의 색을 지정한다.

바탕색Background Color

형식 background-color: <value>

보기 BODY { background-color: white }      H1   { background-color: #000080 }

background-color는 특정 태그의 바탕 색상을 지정한다.

바탕그림Background Image

형식  background-image: <value=url>

보기

BODY { background-image: url(sample.gif) }

P{ background-image: url(http://www.user.com/sample.gif) }

바탕Background 그림을 지정할 때 사용한다.

바탕그림의 연속Background Repeat

형식

background-repeat: <value=repeat|repeat-x|repeat-y|no-repeat>

보기

BODY {background : url(candybar.gif);background-repeat:repeat-x}

이것은 바탕그림Background Image을 어떤 식으로 반복시킬 것인지를 지정한다. repeat-x는 왼쪽에서 오른쪽으로 반복시키며, repeat-y는 위에서 아래로 반복시킨다. 위의 보기는 왼쪽에서 오른쪽으로만 그림Image이 연속적으로 나타날 것이다.

바탕의 성격Background Attachment

형식 background-attachment: <value=scroll | fixed>

보기 BODY {background:url(sam.gif);background-attachment:fixed}

지정된 바탕그림Background Image을 문서 내용에 따라 그림을 계속 연속시킬 것인지, 고정 시킬 것인지를 결정할 때 사용한다. 초기값Initial Value은 scroll이다.

바탕그림의 위치Background Position

형식

background-position:<value=<percentage>|<length>|{1,2}|top|center|bottom|left|center|                      right>

바탕그림Background Image의 초기위치를 지정한다. 이것은 블럭태그Block-Level Elements와 대치태그(HTML의 대치태그는 IMG, INPUT, TEXTAREA, SELECT와 OBJECT등이다.)에만 적용된다.

<percentage>나 <length>를 사용할 때에는 가로 위치를 먼저 지정한 다음 세로 위치를 지정해야 한다. 10% 70%로 지정할 경우, 바탕그림Background Image은 가로 10%, 세로 70%되는 지점에 놓인다. 길이Length를 10px 20px로 하면, 그림은 가로 5px 세로 10px되는 지점에 놓인다.

주의

가로 값만을 지정하면, 세로 값은 자동으로 50%가 된다. 또 길이Length와 백분율Percentage의 섞어쓰기가 허용되지만, 이때 길이는 10% -2cm처럼 음수만 가능하다. 한편, 백분율Percentage과 길이Length의 섞어쓰기는 허용되지 않는다.

바탕Background

형식

background: <value=<background-color> | <background-image> | <background-repeat> | <background-attachment>| <background-position>>

보기

BODY { background: red url(http://www.user.com/sam.gif) }

위의 보기는 BODY라는 대상에 대하여 바탕색Background Color는 'red', 바탕그림background-image은 위 url의 'sam.gif'를 지정하고 있다.

B { background: #ffffff }

위의 보기는 B에 대하여 바탕색Background-color을 '#ffffff'로 정한 것이다.

P { background: url(../dir/sam.gif) fixed }

위의 보기는 지정한 디렉토리의 'sam.gif'가 바탕그림Background Image이고 바탕의 성격Background Attachment은 'fixed'로 나타난다.

TABLE { background: #000000 url(sam.gif) no-repeat bottom right }

위의 보기는 TABLE에 대하여 바탕색은 '#000000'로, 바탕그림은 'sam.gif'이고, 바탕그림의 연속Background Repeat은 'no-repeat'이며, 바탕그림의 위치Background Position는 줄Line의 'bottom'이며, 가로위치는 'right'이다. 위의 모든 보기에서 지정되지 않은 사항은 초기값Initial Value이 사용된다.

css의 속성

This help file was created with HelpScribble.


윤곽Box Properties

links   Netscape와 Explorer가 지원하는 css속성

여백Margin

윗 여백Top Margin

오른쪽 여백Right Margin

밑 여백Bottom Margin

왼쪽 여백Left Margin

형식 margin-top(-right, -bottom, -left): <value=length> | <percentage> | auto>

보기 BODY { margin-top: 10px }

길이Length나 백분율Percentage을 지정함으로써 윗(오른쪽, 밑, 왼쪽) 여백을 설정한다. 음수도 허용한다.

여백Margin

형식

margin: <value=<length> | <percentage> | auto | {1,4}>

보기

BODY { margin: 10px }  사방의 여백이 10px.

P { margin: 3px 5px } 윗,밑 여백은 3px. 왼, 오른 여백은 5px.

DIV  { margin: 1px 2px 3px 4px } 윗1px, 오른 2px, 밑 3px, 왼 4px.

4가지 여백을 한꺼번에 지정할 때에 사용한다. 두개나 세개의 값을 정하면 생략된 값은 반대쪽 여백과 동일하게 나타난다.

공백Padding

윗 공백Top Padding

밑 공백Bottom Padding

오른쪽 공백Right Padding

왼쪽 공백Left Padding

형식 padding-top(-bottom, -right, -left): <value=<length> | <percentage>>

보기 DIV { padding-top: 10px } DIV안의 문자는 위로 10px만큼 공백을 가지고 나타난다.

공백Padding은 글자나 문자의 외곽에 빈 공간을 설정한다. 여백Margin이 전체 문서의 외곽에 빈 공간을 설정하는 것과 차이가 있음을 알아두자.

공백Padding

형식 padding: <value=<length> | <percentage> | {1,4}>

보기 P { padding: 2px 4px 5px } 윗 공백은 2px, 오른 4px, 밑 5px, 왼 4px.

사방의 공백을 한꺼번에 지정한다.(방법은 여백Margin과 동일) 음의 공백은 허용되지 않는다.

테두리Border

윗테두리의 굵기border-top-width

오른쪽 테두리의 굵기Right Border Width

밑 테두리의 굵기Bottom Border Width

왼쪽 테두리의 굵기Left Border Width

형식 border-top(right, bottom, left)-width: <value=thin | medium | thick | <length>>

보기 P {border-top-width: 2px } 윗 테두리선의 굵기가 2px(색은 글꼴Font에 지정된 색.)

사방의 테두리선의 굵기를 지정한다. 음수는 허용하지 않는다. 초기값Initial Value는 'medium'이다.

테두리의 굵기Border Width

형식 border-width: <value=thin | medium | thick | <length> | {1,4}>

보기 P { border-width: 2px 3px } 윗,밑 테두리선의 굵기는 2px. 오른,왼쪽 테두리선의 굵기는 3px.

사방 테두리선의 굵기를 지정한다.(방법은 여백Margin과 동일)

테두리의 색상Border Color

형식 border-color: <value=<color>{1,4}>

보기 P {border-color: red, white, black } 윗 테두리선의 색은 'red',오른과 왼 'white',밑 'black'.

테두리Border선의 색상을 지정한다.

테두리의 형태Border Style

형식 border-style: <value=none|dotted|dashed|solid|double|groove|ridge|inset|outset                          {1,4}>

보기 P {border-style: solid }

이것은 테두리Border선의 형태를 지정하는데 사용한다. 이 특성이 지정되지 않으면 테두리선은 볼 수 없다. 이 역시 사방을 각각 또는 동일하게 지정할 수 있다.

윗 테두리Top Border

오른쪽 테두리Right Border

밑 테두리Bottom Border

왼쪽 테두리Left Border

형식 border-top(right, bottom, left): <value=<border-top-width>|<border-style>|<color>>

보기 P { border-top: 10px solid #ffffff } 윗테두리의 굵기는 10px, 형태는 'solid', 색상은 흰색.

이것은 테두리선의  굵기Width와 스타일Style, 색상Color을 지정한다. border-style은 단 한가지만 지정되어야 한다.

테두리Border

형식 border: <value=<border-width> | <border-style> | <color>>

보기

P { border: groove 3px }

A:link { border: solid blue }

A:visited { border: thin dotted #800080 }

A:active { border: thick double red }

이것은 테두리의 굵기Width와 형태Style, 색상Color을 지정한다. 위의 모든 경우에서 border-style이 반드시 지정되어 있음에 유의하자. 그리고, Border에서는 사방의 굵기Length와 형태Style, 색상Color은 동일하게만 지정된다. 사방을 각각으로 표현하려면, border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width 또는 border-left-width 등에서 하나 또는 여러가지를 선택해서 사용해야 한다.

기타

폭Width

형식 width: <value=<length> | <percentage> | auto>

보기

INPUT.button { width: 10px } 단추의 길이가 10px로 지정된다.

P { width: 50px } P안의 문장은 가로 50px을 넘지 않는 폭Width을 가지게 된다.

HTML의 각 요소Element에는 묶음요소Block-Level Element(P, TABLE, OL 등)나 넣기 요소Replaced Element(IMG, INPUT, TEXTAREA, SELECT와 OBJECT 등)가 있다. 여기에 (가로의)길이Length를 지정하는 것이  폭Width의 역할이다. 초기값Initial Value는 'auto'이다.

높이Height

형식 height: <value=<length> | auto>

보기

P { width:200px; height: 200px } P안의 문장은 가로 200px, 세로 200px의 넓이 안에 나타난다.

IMG.foo { width: 40px; height: 40px } 그림은 원래의 크기와 관계없이 40px X 40px의 크기를                                                                   가진다.

묶음 요소Block-Level나 넣기 요소Replaced Element에 (세로의)길이Length를 지정한다. 폭Width과 높이Height를 함께 사용하여  묶음요소Block-Level Element의 넓이를 지정할 수 잇으며, 이것은 상당한 편집효과를 낼 수 있다. 그림Image의 크기를 적당히 조정하는데에도 유용할 것이다.

놓기Float

형식 float: <value=left | right | none>

보기 IMG.foo { float: right } 그림이 오른쪽에 나타난다.

이것은 HTML의 'ALIGN=left' 등과 동일한 기능을 한다. CSS1에서는 모든 태그에대해 'float'를 허용한다. HTML에서는 IMAGE와 TABLE에서만 허용한다. 초기값Initial Value은 'none'이다.(이 기능의 특징은 놓기float로 지정된 것 외의 문장들이 그 주위를 감싸며Wrap 나타난다는 것이다.

Clear

형식 clear: <value=none | left | right | both>

보기 H1 { clear: left } H1에 묶인 문자Letter는 'left'를 피해서 나타난다.

이것은 HTML의 <BR CLEAR=left|right|all|none>와 비슷한데, CSS1은 모든 요소Element에 적용되며,

놓기Float에 의해 결정된 자리를 다른 요소Element에 의한 내용이 침범하지 않게 하기 위한 것이다.

css의 속성

This help file was created with HelpScribble.


문단형식Classification Properties

links   Netscape와 Explorer가 지원하는 css속성

Display

형식 display: <value=block | inline | list-item | none>

block : 앞뒤의 요소Element에 대해 줄나누기를 한다.

inline : 앞뒤의 요소Element에 대해 줄나누기를 하지 않는다.

list-item : block과 동일한 기능에 목록표시가 추가된다.

none : 감춘다.

초기값Initial Value은 block이다.

Whitespace

형식 white-space: <value=normal | pre | nowrap>

묶음요소Block Level Element에 적용되며,  글자사이의 공백을 처리한다.

normal : 여러개의 공백을 하나로 만든다.

pre : 공백을 그대로 나타낸다.

nowrap : <BR> 요소Element  없이는 라인 랩Line Wrap을 허용하지 않는다.

List Style Type

형식

list-style-type: <value=disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none>

목록앞의 특수기호를 지정한다. display의 'list-item'에 연결된 요소에 적용된다.

List Style Image

형식 list-style-image: <value=<url> | none>

display의 'list-item'에 연결된 요소에 지정할 수 있으며, 목록 기호로 사용될 그림을 설정하며 list-style-type에서 지정된 기호를 대신한다.

List Style Position

형식 list-style-position: <value=inside | outside>

보기

Outside

* 목록 제목

 목록 내용

Inside

 * 목록 제목

목록내용

display의 list-item을 가지는 요소Element에 대해 목록 기호의 위치를 정한다.

List Style

형식 list-style: <value=<list-style-type> || <list-style-position> || <url>>

display의 list-item를 가지는 요소Element에 대하여 list-style-type, list-style-position, list-style-image 등을 한꺼번에 지정한다.

css의 속성

This help file was created with HelpScribble.


글꼴Font Properties

links   Netscape와 Explorer가 지원하는 css속성

글꼴종류Font Family

형식 font-family:<<family-name> | <generic-family>>

보기 P { font-family: 굴림, "Comic Sans MS", serif }

<family-name>에는 보기에서 한 것처럼 '굴림' 글꼴Font을 지정할 수 있으며, 사용 가능한 것이라면 어떤 글꼴Font도 가능하다. 다만, 만든 이Auther에게는 가능한 글꼴Font이지만, 사용자의 환경User Agent에는 없을 수도 있으므로, <generic-family>를 보기에서처럼 지정할 필요가 있다. ','를 이용하여 예비글꼴Generic Font을 얼마든지 지정할 수 있다.

주의

보기의 "Comic Sans MS"처럼 띄어쓰기가 있는 글꼴이름Font name은 반드시 큰 따옴표나 작은 따옴표로 묶어 주어야 한다. 그렇지 않으면, 해당 글꼴Font을 읽어들이지 못한다.

글꼴체Font Style

형식 font-style: <value=normal | italic | oblique>

보기 P { font-style: italic }

이것은 문자Letter를 뉘여쓸 때 사용한다. normal은 초기값Initial Value으로 별도의 지정이 없는 상태와 동일하다. italic 또는 oblique는 문자Letter를 뉘여 쓰게 된다.

글꼴변형Font Variant

형식 font-variant: <value=normal | small-cap>

보기 P { font-variant: small-cap }

font-variant는 문자Letter를 small-caps로 만들 때 사용하는데, 문장의 모든 문자를 소문자보다 약간 큰 대문자로 나타내는 기능을 한다.

글꼴굵기Font Weight

형식 font-weight: <value=normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |            700 | 800 | 900>

보기 P { font-weight: small-cap }

bolder와 lighter는 상대값Relative Value로 기존에 설정된 글꼴Font을 기준으로 그 굵기가 정해진다. 이에 반해 나머지들은 절대값Absolute Value으로 그 굵기를 나타낸다. 그런데, 여기서 주의할 것은 100~900까지의 굵기 정도는 사용되고 있는 글꼴Font의 속성에 의존한다는 것이다. 즉, 기존 글꼴Font이 9단계의 굵기를 가지고 있지 않으면, 지정한 굵기와는 다르게 표현될 수 있다는 것이다.

글꼴크기Font Size

형식 font-size: <absolute-size=xx-small | x-small | small | medium | lar ge | x-large | xx-              large> | <relative-size=larger | smaller> | <length='px'> | <percentage='%'>

보기

P  { font-size: large }

H1 { font-size: 12px }

LI  { font-size: 90% }

B { font-size: larger }

font-size 특성은 출력되는 글꼴의 크기를 변경하는데 사용된다. <absolute-size>는 문자Letter를 조건없이 키우거나 줄이는데에 사용하고, <relative-size>와 <percentage>는 기존에 설정된 골꼴Font을 기준으로 해서 크기를 조정할 때에 사용한다. 그리고, lenght는 그 단위를 다양하게 지원하고 있다.

글꼴Font

형식

font : <font-style> | <font-variant> | <font-weight> | <font-size> | <line-height> |

           <font-family>

보기

P { font: italic nomal bold 13pt/15pt 굴림, impact }

글꼴Font는 모든 속성을 종합적으로 한꺼번에 사용할 때에 사용한다. 위 보기는  글꼴체Font Style는 'italic'으로, 글꼴변형Font Variant은 'nomal'로, 글꼴굵기Font Weight는 'bold로, 글꼴크기Font Size는 '13pt'로 줄간격Line Height는 '15pt'로, 글꼴종류Font Family는 '굴림' 또는 'impact'로 정하고 있다.

css의 속성

This help file was created with HelpScribble.


길이의 단위Length

links   Netscape와 Explorer가 지원하는 css속성

길이Length의 단위는 크게 상대적 길이와 절대적 길이로 나눌 수 있는데, 매체에 대한 조정이 자유로운 상대적 길이가 더 편리하다.

상대적 길이의 단위들

em (ems, 태그 글꼴의 높이)

ex (x-height, 문자 "x"의 높이)

px (pixels, 캔바스 해상도에 상대적인)

절대적 길이의 단위들

in (inches; 1in=2.54cm)

cm (centimeters; 1cm=10mm)

mm (millimeters)

pt (points; 1pt=1/72in)

pc (picas; 1pc=12pt)

css의 속성

This help file was created with HelpScribble.


CSS와 HTML의연결Linking Style Sheets to HTML
CSS와 HTML의 연결Linking Style Sheet to HTML

links   Netscape와 Explorer가 지원하는 css속성

.css 파일 불러들이기Linking to an External Style Sheet

.css 파일은 HTML의 'LINK'를 이용해서 HTML 문서와 연결할 수 있다. <LINK>는 HTML 문서의 <HEAD>안에 두어야 한다. 'TYPE' 은 MIME 형식(CSS의 경우 text/css)을 지정하는데, Css를 지원하지 않는 브라우저에서는 이것을 무시할 수 있도록 해준다. 'MEDIA'는 Css가 적용될 매체를 지정하는데, 그 형식은 다음과 같다.

print 인쇄

screen 화면 출력

projection 프로젝터 출력

braille 점자출력

aural 음성 출력

all 모든 매체에 대한 출력

여러 매체를 지정할 때에는 쉼표를 사용하거나 'all'을 사용한다.

보기

<LINK REL=StyleSheet HREF="sam.css" TYPE="text/css" MEDIA=screen>

REL은 HTML문서와 연결된 파일 사이의 관계를 정의한다. 위의 보기는 현재문서가 'sam.css'파일에 의해 모든 Style Sheet가 설정되어 있음을 보여준다.

<LINK REL=StyleSheet HREF="sam1.css" TYPE="text/css" TITLE="sam1.css"      MEDIA="screen,print">

위의 보기에서는 'sam1.css' 파일이 현재문서에 자동 적용된다. REL=StyleSheet과 TITLE을 함께 사용한다.

<LINK REL="Alternate StyleSheet" HREF="sam3.css"

 TYPE="text/css" TITLE="sam3" MEDIA="screen, print">

위는 보조 스타일의 보기인데, REL="Alternate StyleSheet"를 이용해서 지정한다. 이것은 자동 적용된 스타일을 바꾸기 위해 사용한다.

<LINK REL=StyleSheet HREF="basics.css" TITLE="toge">

<LINK REL=StyleSheet HREF="tables.css" TITLE="toge">

<LINK REL=StyleSheet HREF="forms.css" TITLE="toge">

위의 보기는 세개의 css파일이 동시에 한 문서에 적용되는 예인데, 이를 위해서는 동일한 TITLE을 사용해야만 한다.

.css 파일 불러들이기Linking to an External Style Sheet는 여러 페이지에 동일한 css가 적용될 때 편리하다. 대부분의 브로우저는 css파일을 캐쉬Cash로 보관하므로 문서의 생성시간을 절약할 수 있다.

<Style></style>사용하기Embedding a Style Sheet

한 문서안에서 css를 지정할 때 사용한다.

보기

<STYLE TYPE="text/css">

<!--

BODY  { background: url(sam.gif) black; color: #ffffff }

P        { background: yellow; color: black }

.fir      { margin: 10px }

-->

</STYLE>

<STYLE>은 HTML의 <HEAD>안에 위치한다.

@import로 불러오기Importing a Style Sheet

@import는 css파일이나 <STYLE>에서 사용하는데, @import 는 css내용의 첫부분에 있어야만 한다.

보기

<STYLE TYPE="text/css" MEDIA="screen, projection">

<!--

  @import url(http://www.user.com/fir.css);

  @import url(sec.css);

  P { background: white }

-->

</STYLE>

위의 보기에서 같은 내용의 설정은 뒤에 것이 우선한다. 만일 P에 대해 fir.css에서는 바탕Background을 붉은 색으로, sec.css에서는 검은 색으로 지정했다면, 화면의 바탕은 흰색으로 나타난다. 즉, 세번째의 설정이 우선하는 것이다. 따라서, @import는 전반적으로 지정된 css내용을 불러들여 일부를 문서안에서 수정해가며 사용할 때 편리하다.

직접쓰기Inlining Style

임의의 요소Element안에서 css를 직접 지정할 때에 사용한다.

보기

<SPAN STYLE="color: yellow; font-family: 굴림, impact">글꼴은 '굴림'이며, 글꼴색은 '노랗게' 나타난다.</SPAN>

위의 보기는 반드시 아래와 같은

<SPAN STYLE="color: yellow; font-family: 굴림, 'Comic Sans MS'">글꼴은 '굴림'이며, 글꼴색은 '노랗게' 나타난다.</SPAN>

형식을 지켜야만 한다.

CLASS(The CLASS Attribute)

이것은 일정한 css형식이 지정되어 있는 문서에 전혀 다른 내용의 css를 문서 일부에 포함시킬 때에 사용한다.

보기

.esp    { color: #ffffff; background: red }

B.new { font-size: 16px; color: green }

위의 보기는 다음과 같이 사용한다.

<P CLASS="esp">   </P>

<B CLASS="new">  </B>

위에서 'new'라는 CLASS는 <B> 요소Element에만 적용된다.

ID(The ID Attribute)

이것은 CLASS와 거의 같은 기능을 가지는데, 다른 점은 ID는 문서안에서 단한번 적용된다는 것이다.

보기

#woolee { font-family: "Comic Sans MS" }

위의 보기는 다음과 같이 사용한다.

<P ID="woolee">   </P>

SPAN(The SPAN Element)

<SPAN>은 HTML 요소Element이지만, 아무런 기능도 가지고 있지 않다. 이는 순전히 css의 사용을 위해 고안된 것이다.

보기

<HTML>

<HEAD>

<TITLE>SPAN</TITLE>

<STYLE TYPE="text/css">

<!--

  .sam { color: red }

-->

</STYLE>

</HEAD>

<BODY>

<SPAN CLASS="sam">붉은 보기</SPAN>

<P>

<SPAN STYLE="color: yellow">노란 보기</SPAN>

DIV(The DIV Element)

SPAN과 바슷한 기능을 하는데, 차이점은 DIV는 묶음 요소Block-Level Element여서 문단을 다루는 데에 편리하다.

보기

<HTML>

<HEAD>

<TITLE>SPAN</TITLE>

<STYLE TYPE="text/css">

<!--

  .sam { color: red }

-->

</STYLE>

</HEAD>

<BODY>

<DIV CLASS="sam">붉은 보기</DIV>

<P>

<DIV STYLE="color: yellow">노란 보기</DIV>

위의 두 보기에서 <SPAN>과 <DIV>의 차이는 Netscape와 Explorer에서 상이하게 적용된다.

css의 속성

This help file was created with HelpScribble.


네스케이프와 익스플로러가 지원하는 css속성

links

Style Sheet를 효과적으로 활용하기 위해서는 Css와 브라우저간의 상호지원관계를 정확하게 알아야만 한다. 사용자User,Reader의 브라우저에 만든 이Auther의 의도와는 달리 알아볼 수 없는 문서가 나타난다면 모든 노력이 허사로 돌아갈 것이다. 우리는 대부분 웹검색을 위해 네스케이프 아니면, 익스플로러를 사용한다. 여기서는 이 두 브라우저가 지원하는 Css속성들을 비교해서 알아본다.

테스트 버전 : Netscape Communicator4.05   Microsoft Explorer4.01

1. 두 브라우저가 동시에 지원하는 Css형식

2. 두 브라우저가 전혀 지원하지 않는 Css형식

3. 전체 비교

css의 속성

This help file was created with HelpScribble.


Links

Netscape와 Explorer가 지원하는 css속성

W3C

http://www.w3.org/Style/

한글 사이트

http://commlab.soongsil.ac.kr/css/cssindex.htm

http://members.dzone.co.kr/~chris/d_ref2.htm

http://user.chollian.net/~bonami/index.htm

Css 관련 정보

http://www.cnet.com/Content/Builder/

http://webreview.com/wr/pub/Style_Sheets

http://jaring.nmhu.edu/notes/cascade.htm

http://www.htmlhelp.com/distribution/

Css를 사용한 사이트

http://www.webreview.com/universal/resources/CSS.htm

http://www.microsoft.com/typography/css/gallery/cssinf7.htm

CSSCheck

http://www.htmlhelp.com/tools/csscheck/

온라인으로 Css만들기

http://www.cnet.com/Content/Builder/Authoring/CSS/CssMaker/maker.html

MicroSoft

Css Index

http://www.microsoft.com/msdn/sdk/inetsdk/help/index.htm

Gallery

http://www.microsoft.com/truetype/css/gallery/entrance.htm

Netscape

http://www.best.com/~jocelyn/resume.html

http://developer.netscape.com/docs/manuals/communicator/dynhtml/jss34.htm

기타

WinHelp Tool

Helpscribble(.rtf나 .hpj파일을 따로 만들 수Export 없는 것을 빼고는 전 기능이 훌륭한 쉐어웨어)

http://www.ping.be/jg/hscrinfo.shtml

Help Authoring Software(다양한 소프트웨어 소개)

http://members.aol.com/LindaMoore/helpauth.html

HTML Editor

Arachnophilia(FreeWare)

http://www.archnoid.com

HTMLkit(Freeware)

http://www.chami.com/html-kit/

woolee

ykwoo3@soback.kornet.net

css의 속성

This help file was created with HelpScribble.


Font Family

글꼴종류Font Family

형식 font-family:<<family-name> | <generic-family>>

보기 P { font-family: 굴림, "Comic Sans MS", serif }

<family-name>에는 보기에서 한 것처럼 '굴림' 글꼴Font을 지정할 수 있으며, 사용 가능한 것이라면 어떤 글꼴Font도 가능하다. 다만, 만든 이Auther에게는 가능한 글꼴Font이지만, 사용자의 환경User Agent에는 없을 수도 있으므로, <generic-family>를 보기에서처럼 지정할 필요가 있다. ','를 이용하여 예비글꼴Generic Font을 얼마든지 지정할 수 있다.

주의

보기의 "Comic Sans MS"처럼 띄어쓰기가 있는 글꼴이름Font name은 반드시 큰 따옴표나 작은 따옴표로 묶어 주어야 한다. 그렇지 않으면, 해당 글꼴Font을 읽어들이지 못한다.

This help file was created with HelpScribble.


Font Style

글꼴체Font Style

형식 font-style: <value=normal | italic | oblique>

보기 P { font-style: italic }

이것은 문자Letter를 뉘여쓸 때 사용한다. normal은 초기값Initial Value으로 별도의 지정이 없는 상태와 동일하다. italic 또는 oblique는 문자Letter를 뉘여 쓰게 된다.

This help file was created with HelpScribble.


Font Variant

글꼴변형Font Variant

형식 font-variant: <value=normal | small-cap>

보기 P { font-variant: small-cap }

font-variant는 문자Letter를 small-caps로 만들 때 사용하는데, 문장의 모든 문자를 소문자보다 약간 큰 대문자로 나타내는 기능을 한다.

This help file was created with HelpScribble.


Font Weight

글꼴굵기Font Weight

형식 font-weight: <value=normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |            700 | 800 | 900>

보기 P { font-weight: small-cap }

bolder와 lighter는 상대값Relative Value로 기존에 설정된 글꼴Font을 기준으로 그 굵기가 정해진다. 이에 반해 나머지들은 절대값Absolute Value으로 그 굵기를 나타낸다. 그런데, 여기서 주의할 것은 100~900까지의 굵기 정도는 사용되고 있는 글꼴Font의 속성에 의존한다는 것이다. 즉, 기존 글꼴Font이 9단계의 굵기를 가지고 있지 않으면, 지정한 굵기와는 다르게 표현될 수 있다는 것이다.

This help file was created with HelpScribble.


Font Size

글꼴크기Font Size

형식 font-size: <absolute-size=xx-small | x-small | small | medium | lar ge | x-large | xx-large> | <relative-size=larger | smaller> | <length='px'> | <percentage='%'>

보기

P  { font-size: large }

H1 { font-size: 12px }

LI  { font-size: 90% }

B { font-size: larger }

font-size 특성은 출력되는 글꼴의 크기를 변경하는데 사용된다. <absolute-size>는 문자Letter를 조건없이 키우거나 줄이는데에 사용하고, <relative-size>와 <percentage>는 기존에 설정된 골꼴Font을 기준으로 해서 크기를 조정할 때에 사용한다. 그리고, lenght는 그 단위를 다양하게 지원하고 있다.

This help file was created with HelpScribble.


Font

글꼴Font

형식

font : <font-style> | <font-variant> | <font-weight> | <font-size> | <line-height> |

           <font-family>

보기

P { font: italic nomal bold 13pt/15pt 굴림, impact }

글꼴Font는 모든 속성을 종합적으로 한꺼번에 사용할 때에 사용한다. 위 보기는  글꼴체Font Style는 'italic'으로, 글꼴변형Font Variant은 'nomal'로, 글꼴굵기Font Weight는 'bold로, 글꼴크기Font Size는 '13pt'로 줄간격Line Height는 '15pt'로, 글꼴종류Font Family는 '굴림' 또는 'impact'로 정하고 있다.

This help file was created with HelpScribble.


Color

색상Color

형식 color: <color>

보기  H1 {color: red }        H2 {color: #000000 }

색상은 키워드나 숫자로 구성된 RGB 값으로 임의의 태그안에 있는 문자Letter의 색을 지정한다.

This help file was created with HelpScribble.


Background Color

바탕색Background Color

형식 background-color: <value>

보기

BODY { background-color: white }

H1   { background-color: #000080 }

background-color는 특정 태그의 바탕 색상을 지정한다.

This help file was created with HelpScribble.


Background Image

바탕그림Background Image

형식  background-image: <value=url>

보기

BODY { background-image: url(sample.gif) }

P{ background-image: url(http://www.user.com/sample.gif) }

바탕Background 그림을 지정할 때 사용한다.

This help file was created with HelpScribble.


Background Repeat

바탕그림의 연속Background Repeat

형식

background-repeat: <value=repeat|repeat-x|repeat-y|no-repeat>

보기

BODY {background : url(candybar.gif);background-repeat:repeat-x}

이것은 바탕그림Background Image을 어떤 식으로 반복시킬 것인지를 지정한다. repeat-x는 왼쪽에서 오른쪽으로 반복시키며, repeat-y는 위에서 아래로 반복시킨다. 위의 보기는 왼쪽에서 오른쪽으로만 그림Image이 연속적으로 나타날 것이다.

This help file was created with HelpScribble.


Background Position

바탕그림의 위치Background Position

형식

background-position:<value=<percentage>|<length>|{1,2}|top|center|bottom|left|center|                      right>

바탕그림Background Image의 초기위치를 지정한다. 이것은 블럭태그Block-Level Elements와 대치태그(HTML의 대치태그는 IMG, INPUT, TEXTAREA, SELECT와 OBJECT등이다.)에만 적용된다.

<percentage>나 <length>를 사용할 때에는 가로 위치를 먼저 지정한 다음 세로 위치를 지정해야 한다. 10% 70%로 지정할 경우, 바탕그림Background Image은 가로 10%, 세로 70%되는 지점에 놓인다. 길이Length를 10px 20px로 하면, 그림은 가로 5px 세로 10px되는 지점에 놓인다.

주의

가로 값만을 지정하면, 세로 값은 자동으로 50%가 된다. 또 길이Length와 백분율Percentage의 섞어쓰기가 허용되지만, 이때 길이는 10% -2cm처럼 음수만 가능하다. 한편, 백분율Percentage과 길이Length의 섞어쓰기는 허용되지 않는다.

This help file was created with HelpScribble.


Background

바탕Background

형식

background: <value=<background-color> | <background-image> | <background-repeat> | <background-attachment>| <background-position>>

보기

BODY { background: red url(http://www.user.com/sam.gif) }

위의 보기는 BODY라는 대상에 대하여 바탕색Background Color는 'red', 바탕그림background-image은 위 url의 'sam.gif'를 지정하고 있다.

B { background: #ffffff }

위의 보기는 B에 대하여 바탕색Background-color을 '#ffffff'로 정한 것이다.

P { background: url(../dir/sam.gif) fixed }

위의 보기는 지정한 디렉토리의 'sam.gif'가 바탕그림Background Image이고 바탕의 성격Background Attachment은 'fixed'로 나타난다.

TABLE { background: #000000 url(sam.gif) no-repeat bottom right }

위의 보기는 TABLE에 대하여 바탕색은 '#000000'로, 바탕그림은 'sam.gif'이고, 바탕그림의 연속Background Repeat은 'no-repeat'이며, 바탕그림의 위치Background Position는 줄Line의 'bottom'이며, 가로위치는 'right'이다. 위의 모든 보기에서 지정되지 않은 사항은 초기값Initial Value이 사용된다.

This help file was created with HelpScribble.


Word Spacing

낱말간격Word Spacing

형식 word-spacing: <value=normal | <length>>

보기

P { word-spacing: 1px }

B { word-spacing: -2px }

낱말 사이의 간격을 정한다. 음수도 사용할 수 있다.

This help file was created with HelpScribble.


Letter Spacing

문자간격Letter Spacing

형식 letter-spacing: <value=normal | <length>>

보기

H1 { letter-spacing: 1px }

P  { letter-spacing: -1px }

문자 사이의 간격을 정한다. 음수도 사용가능하다.

This help file was created with HelpScribble.


Text Decoration

장식Text Decoration

형식 text-decoration: <value=none | underline | overline | line-through | blink>

보기 A { text-decoration: none } 링크Link에 자동으로 설정되는 밑줄을 없앤다.

문자에 밑줄Underline, 윗줄Overline, 중간줄Line-Through, 깜빡이Blink 등을 지정할 때에 사용한다.

This help file was created with HelpScribble.


Vertical Alignment

수직정렬Vertical Alignment

형식

vertical-align: <value=baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>>

보기

IMG { vertical-align: super }

A { vertical-align: 50% }

HTML의 EM이나, A,  IMG처럼 줄바꿈Line Break하지 않는 요소Element(=Inline Element)에 적용되며, 줄간격Line-Height내에서의 상대적 위치를 지정한다. 음수도 사용가능하다.

baseline : 문자의 밑선에 맞추어 정렬.(초기값Initial Value)

middle : 문자의 중앙을 밑선으로 해서 정렬.

sub : 아래첨자Subscript

super : 윗첨자Superscript

text-top : 문자의 윗선을 밑선으로 해서 정렬.

text-bottom : 문자의 밑선을 윗선으로 해서 정렬.

top : 상단에 정렬

bottom : 하단에 정렬

This help file was created with HelpScribble.


Text Transformation

문자변환Text Transformation

형식 text-transform: <value=none | capitalize | uppercase | lowercase>

보기 H1 { text-transform: uppercase }

영어의 대소문자를 변환한다.

capitalize : 각 낱말의 첫글자를 대문자로 바꾼다.

uppercase : 각 낱말의 모든 글자를 대문자로 바꾼다.

lowercase : 각 낱말의 모든 글자를 소문자로 바꾼다.

This help file was created with HelpScribble.


Text Alignment

문장의 위치지정Text Alignment

형식 text-align: <value=left | right | center | justify>

보기 H1 { text-align: center } H1안의 문장이 중앙에 가도록 한다.

묶음요소Block-Level Elements(P, H1 등)에만 적용된다. HTML의 ALIGN과 비슷한 기능을 한다.

This help file was created with HelpScribble.


Text Indentation

들여쓰기Text Indentation

형식 text-indent: <value=<length> | <percentage>>

보기 P { text-indent: 5px }

묶음요소Block-Level Elements(P, H1등)에만 적용되며, 문단의 첫줄을 들여쓰기하는 정도를 지정한다.

This help file was created with HelpScribble.


Line Height

줄간격Line Height

형식 line-height: <value= normal | <number> | <length> | <percentage>

문단에서 줄과 줄 사이의 공간을 지정한다.

This help file was created with HelpScribble.


Linking to an External Style Sheet

.css 파일 불러들이기Linking to an External Style Sheet

.css 파일은 HTML의 'LINK'를 이용해서 HTML 문서와 연결할 수 있다. <LINK>는 HTML 문서의 <HEAD>안에 두어야 한다. 'TYPE' 은 MIME 형식(CSS의 경우 text/css)을 지정하는데, Css를 지원하지 않는 브라우저에서는 이것을 무시할 수 있도록 해준다. 'MEDIA'는 Css가 적용될 매체를 지정하는데, 그 형식은 다음과 같다.

print 인쇄

screen 화면 출력

projection 프로젝터 출력

braille 점자출력

aural 음성 출력

all 모든 매체에 대한 출력

여러 매체를 지정할 때에는 쉼표를 사용하거나 'all'을 사용한다.

보기

<LINK REL=StyleSheet HREF="sam.css" TYPE="text/css" MEDIA=screen>

REL은 HTML문서와 연결된 파일 사이의 관계를 정의한다. 위의 보기는 현재문서가 'sam.css'파일에 의해 모든 Style Sheet가 설정되어 있음을 보여준다.

<LINK REL=StyleSheet HREF="sam1.css" TYPE="text/css" TITLE="sam1.css"      MEDIA="screen,print">

위의 보기에서는 'sam1.css' 파일이 현재문서에 자동 적용된다. REL=StyleSheet과 TITLE을 함께 사용한다.

<LINK REL="Alternate StyleSheet" HREF="sam3.css"

 TYPE="text/css" TITLE="sam3" MEDIA="screen, print">

위는 보조 스타일의 보기인데, REL="Alternate StyleSheet"를 이용해서 지정한다. 이것은 자동 적용된 스타일을 바꾸기 위해 사용한다.

<LINK REL=StyleSheet HREF="basics.css" TITLE="toge">

<LINK REL=StyleSheet HREF="tables.css" TITLE="toge">

<LINK REL=StyleSheet HREF="forms.css" TITLE="toge">

위의 보기는 세개의 css파일이 동시에 한 문서에 적용되는 예인데, 이를 위해서는 동일한 TITLE을 사용해야만 한다.

.css 파일 불러들이기Linking to an External Style Sheet는 여러 페이지에 동일한 css가 적용될 때 편리하다. 대부분의 브로우저는 css파일을 캐쉬Cash로 보관하므로 문서의 생성시간을 절약할 수 있다.

This help file was created with HelpScribble.


Embedding a Style Sheet

<Style></style>사용하기Embedding a Style Sheet

한 문서안에서 css를 지정할 때 사용한다.

보기

<STYLE TYPE="text/css">

<!--

BODY  { background: url(sam.gif) black; color: #ffffff }

P        { background: yellow; color: black }

.fir      { margin: 10px }

-->

</STYLE>

<STYLE>은 HTML의 <HEAD>안에 위치한다.

This help file was created with HelpScribble.


Importing a Style Sheet

@import로 불러오기Importing a Style Sheet

@import는 css파일이나 <STYLE>에서 사용하는데, @import 는 css내용의 첫부분에 있어야만 한다.

보기

<STYLE TYPE="text/css" MEDIA="screen, projection">

<!--

  @import url(http://www.user.com/fir.css);

  @import url(sec.css);

  P { background: white }

-->

</STYLE>

위의 보기에서 같은 내용의 설정은 뒤에 것이 우선한다. 만일 P에 대해 fir.css에서는 바탕Background을 붉은 색으로, sec.css에서는 검은 색으로 지정했다면, 화면의 바탕은 흰색으로 나타난다. 즉, 세번째의 설정이 우선하는 것이다. 따라서, @import는 전반적으로 지정된 css내용을 불러들여 일부를 문서안에서 수정해가며 사용할 때 편리하다.

This help file was created with HelpScribble.


Inlining Style

직접쓰기Inlining Style

임의의 요소Element안에서 css를 직접 지정할 때에 사용한다.

보기

<SPAN STYLE="color: yellow; font-family: 굴림, impact">글꼴은 '굴림'이며, 글꼴색은 '노랗게' 나타난다.</SPAN>

위의 보기는 반드시 아래와 같은

<SPAN STYLE="color: yellow; font-family: 굴림, 'Comic Sans MS'">글꼴은 '굴림'이며, 글꼴색은 '노랗게' 나타난다.</SPAN>

형식을 지켜야만 한다.

This help file was created with HelpScribble.


The CLASS Attribute

CLASS(The CLASS Attribute)

이것은 일정한 css형식이 지정되어 있는 문서에 전혀 다른 내용의 css를 문서 일부에 포함시킬 때에 사용한다.

보기

.esp    { color: #ffffff; background: red }

B.new { font-size: 16px; color: green }

위의 보기는 다음과 같이 사용한다.

<P CLASS="esp">   </P>

<B CLASS="new">  </B>

위에서 'new'라는 CLASS는 <B> 요소Element에만 적용된다.

This help file was created with HelpScribble.


The ID Attribute

ID(The ID Attribute)

이것은 CLASS와 거의 같은 기능을 가지는데, 다른 점은 ID는 문서안에서 단한번 적용된다는 것이다.

보기

#woolee { font-family: "Comic Sans MS" }

위의 보기는 다음과 같이 사용한다.

<P ID="woolee">   </P>

This help file was created with HelpScribble.


The SPAN Element

SPAN(The SPAN Element)

<SPAN>은 HTML 요소Element이지만, 아무런 기능도 가지고 있지 않다. 이는 순전히 css의 사용을 위해 고안된 것이다.

보기

<HTML>

<HEAD>

<TITLE>SPAN</TITLE>

<STYLE TYPE="text/css">

<!--

  .sam { color: red }

-->

</STYLE>

</HEAD>

<BODY>

<SPAN CLASS="sam">붉은 보기</SPAN>

<P>

<SPAN STYLE="color: yellow">노란 보기</SPAN>

This help file was created with HelpScribble.


The DIV Element

DIV(The DIV Element)

SPAN과 바슷한 기능을 하는데, 차이점은 DIV는 묶음 요소Block-Level Element여서 문단을 다루는 데에 편리하다.

보기

<HTML>

<HEAD>

<TITLE>SPAN</TITLE>

<STYLE TYPE="text/css">

<!--

  .sam { color: red }

-->

</STYLE>

</HEAD>

<BODY>

<DIV CLASS="sam">붉은 보기</DIV>

<P>

<DIV STYLE="color: yellow">노란 보기</DIV>

위의 두 보기에서 <SPAN>과 <DIV>의 차이는 Netscape와 Explorer에서 상이하게 적용된다.

This help file was created with HelpScribble.


Top Margin

윗 여백Top Margin

오른쪽 여백Right Margin

밑 여백Bottom Margin

왼쪽 여백Left Margin

형식 margin-top(-right, -bottom, -left): <value=length> | <percentage> | auto>

보기 BODY { margin-top: 10px }

길이Length나 백분율Percentage을 지정함으로써 윗(오른쪽, 밑, 왼쪽) 여백을 설정한다. 음수도 허용한다.

This help file was created with HelpScribble.


Margin

여백Margin

형식

margin: <value=<length> | <percentage> | auto | {1,4}>

보기

BODY { margin: 10px }  사방의 여백이 10px.

P { margin: 3px 5px } 윗,밑 여백은 3px. 왼, 오른 여백은 5px.

DIV  { margin: 1px 2px 3px 4px } 윗1px, 오른 2px, 밑 3px, 왼 4px.

4가지 여백을 한꺼번에 지정할 때에 사용한다. 두개나 세개의 값을 정하면 생략된 값은 반대쪽 여백과 동일하게 나타난다.

This help file was created with HelpScribble.


Top Padding

윗 공백Top Padding

밑 공백Bottom Padding

오른쪽 공백Right Padding

왼쪽 공백Left Padding

형식 padding-top(-bottom, -right, -left): <value=<length> | <percentage>>

보기 DIV { padding-top: 10px } DIV안의 문자는 위로 10px만큼 공백을 가지고 나타난다.

공백Padding은 글자나 문자의 외곽에 빈 공간을 설정한다. 여백Margin이 전체 문서의 외곽에 빈 공간을 설정하는 것과 차이가 있음을 알아두자

This help file was created with HelpScribble.


Padding

공백Padding

형식 padding: <value=<length> | <percentage> | {1,4}>

보기 P { padding: 2px 4px 5px } 윗 공백은 2px, 오른 4px, 밑 5px, 왼 4px.

사방의 공백을 한꺼번에 지정한다.(방법은 여백Margin과 동일) 음의 공백은 허용되지 않는다.

This help file was created with HelpScribble.


border-top-width

윗테두리의 굵기border-top-width

오른쪽 테두리의 굵기Right Border Width

밑 테두리의 굵기Bottom Border Width

왼쪽 테두리의 굵기Left Border Width

형식

border-top(right, bottom, left)-width: <value=thin | medium | thick | <length>>

보기

P {border-top-width: 2px } 윗 테두리선의 굵기가 2px(색은 글꼴Font에 지정된 색.)

사방의 테두리선의 굵기를 지정한다. 음수는 허용하지 않는다. 초기값Initial Value는 'medium'이다.

This help file was created with HelpScribble.


Border Width

테두리의 굵기Border Width

형식 border-width: <value=thin | medium | thick | <length> | {1,4}>

보기 P { border-width: 2px 3px } 윗,밑 테두리선의 굵기는 2px. 오른,왼쪽 테두리선의 굵기는 3px.

사방 테두리선의 굵기를 지정한다.(방법은 여백Margin과 동일)

This help file was created with HelpScribble.


Border Color

테두리의 색상Border Color

형식 border-color: <value=<color>{1,4}>

보기 P {border-color: red, white, black } 윗 테두리선의 색은 'red',오른과 왼 'white',밑 'black'.

테두리Border선의 색상을 지정한다.

This help file was created with HelpScribble.


Border Style

테두리의 형태Border Style

형식 border-style: <value=none|dotted|dashed|solid|double|groove|ridge|inset|outset                          {1,4}>

보기 P {border-style: solid }

이것은 테두리Border선의 형태를 지정하는데 사용한다. 이 특성이 지정되지 않으면 테두리선은 볼 수 없다. 이 역시 사방을 각각 또는 동일하게 지정할 수 있다.

This help file was created with HelpScribble.


Top Border

윗 테두리Top Border

오른쪽 테두리Right Border

밑 테두리Bottom Border

왼쪽 테두리Left Border

형식 border-top(right, bottom, left): <value=<border-top-width>|<border-style>|<color>>

보기 P { border-top: 10px solid #ffffff } 윗테두리의 굵기는 10px, 형태는 'solid', 색상은 흰색.

이것은 테두리선의  굵기Width와 스타일Style, 색상Color을 지정한다. border-style은 단 한가지만 지정되어야 한다.

This help file was created with HelpScribble.


Border

테두리Border

형식 border: <value=<border-width> | <border-style> | <color>>

보기

P { border: groove 3px }

A:link { border: solid blue }

A:visited { border: thin dotted #800080 }

A:active { border: thick double red }

이것은 테두리의 굵기Width와 형태Style, 색상Color을 지정한다. 위의 모든 경우에서 border-style이 반드시 지정되어 있음에 유의하자. 그리고, Border에서는 사방의 굵기Length와 형태Style, 색상Color은 동일하게만 지정된다. 사방을 각각으로 표현하려면, border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width 또는 border-left-width 등에서 하나 또는 여러가지를 선택해서 사용해야 한다.

This help file was created with HelpScribble.


Width

폭Width

형식 width: <value=<length> | <percentage> | auto>

보기

INPUT.button { width: 10px } 단추의 길이가 10px로 지정된다.

P { width: 50px } P안의 문장은 가로 50px을 넘지 않는 폭Width을 가지게 된다.

HTML의 각 요소Element에는 묶음요소Block-Level Element(P, TABLE, OL 등)나 넣기 요소Replaced Element(IMG, INPUT, TEXTAREA, SELECT와 OBJECT 등)가 있다. 여기에 (가로의)길이Length를 지정하는 것이  폭Width의 역할이다. 초기값Initial Value는 'auto'이다.

This help file was created with HelpScribble.


Height

높이Height

형식 height: <value=<length> | auto>

보기

P { width:200px; height: 200px } P안의 문장은 가로 200px, 세로 200px의 넓이 안에 나타난다.

IMG.foo { width: 40px; height: 40px } 그림은 원래의 크기와 관계없이 40px X 40px의 크기를                                                                   가진다.

묶음 요소Block-Level나 넣기 요소Replaced Element에 (세로의)길이Length를 지정한다. 폭Width과 높이Height를 함께 사용하여  묶음요소Block-Level Element의 넓이를 지정할 수 잇으며, 이것은 상당한 편집효과를 낼 수 있다. 그림Image의 크기를 적당히 조정하는데에도 유용할 것이다.

This help file was created with HelpScribble.


Float

놓기Float

형식 float: <value=left | right | none>

보기 IMG.foo { float: right } 그림이 오른쪽에 나타난다.

이것은 HTML의 'ALIGN=left' 등과 동일한 기능을 한다. CSS1에서는 모든 태그에대해 'float'를 허용한다. HTML에서는 IMAGE와 TABLE에서만 허용한다. 초기값Initial Value은 'none'이다.(이 기능의 특징은 놓기float로 지정된 것 외의 문장들이 그 주위를 감싸며Wrap 나타난다는 것이다.

This help file was created with HelpScribble.


Clear

Clear

형식 clear: <value=none | left | right | both>

보기 H1 { clear: left } H1에 묶인 문자Letter는 'left'를 피해서 나타난다.

이것은 HTML의 <BR CLEAR=left|right|all|none>와 비슷한데, CSS1은 모든 요소Element에 적용되며,

놓기Float에 의해 결정된 자리를 다른 요소Element에 의한 내용이 침범하지 않게 하기 위한 것이다.

This help file was created with HelpScribble.


Display

Display

형식 display: <value=block | inline | list-item | none>

block : 앞뒤의 요소Element에 대해 줄나누기를 한다.

inline : 앞뒤의 요소Element에 대해 줄나누기를 하지 않는다.

list-item : block과 동일한 기능에 목록표시가 추가된다.

none : 감춘다.

초기값Initial Value은 block이다.

This help file was created with HelpScribble.


Whitespace

Whitespace

형식 white-space: <value=normal | pre | nowrap>

묶음요소Block Level Element에 적용되며,  글자사이의 공백을 처리한다.

normal : 여러개의 공백을 하나로 만든다.

pre : 공백을 그대로 나타낸다.

nowrap : <BR> 요소Element  없이는 라인 랩Line Wrap을 허용하지 않는다.

This help file was created with HelpScribble.


List Style Type

List Style Type

형식

list-style-type: <value=disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none>

목록앞의 특수기호를 지정한다. display의 'list-item'에 연결된 요소에 적용된다.

This help file was created with HelpScribble.


List Style Image

List Style Image

형식 list-style-image: <value=<url> | none>

display의 'list-item'에 연결된 요소에 지정할 수 있으며, 목록 기호로 사용될 그림을 설정하며 list-style-type에서 지정된 기호를 대신한다.

This help file was created with HelpScribble.


List Style Position

List Style Position

형식 list-style-position: <value=inside | outside>

보기

Outside

* 목록 제목

 목록 내용

Inside

 * 목록 제목

목록내용

display의 list-item을 가지는 요소Element에 대해 목록 기호의 위치를 정한다.

This help file was created with HelpScribble.


List Style

List Style

형식 list-style: <value=<list-style-type> || <list-style-position> || <url>>

display의 list-item를 가지는 요소Element에 대하여 list-style-type, list-style-position, list-style-image 등을 한꺼번에 지정한다.

This help file was created with HelpScribble.


Background Attachment

바탕의 성격Background Attachment

형식 background-attachment: <value=scroll | fixed>

보기 BODY {background:url(sam.gif);background-attachment:fixed}

지정된 바탕그림Background Image을 문서 내용에 따라 그림을 계속 연속시킬 것인지, 고정 시킬 것인지를 결정할 때 사용한다. 초기값Initial Value은 scroll이다.

This help file was created with HelpScribble.


두 브라우저가 동시에 지원하는 Css형식

CSS와 HTML의연결Linking Style Sheets to HTML

 <STYLE type="text/css">...</STYLE>

 <x STYLE="dec;">

Font Properties

font-family

 <family-name>

 <generic-family>

 ... serif

 ... monospace

font-weight

 bold

font-size

 <absolute-size>

 ... xx-small - xx-large

 <length>

 <percentage>

font

 <font-family>

 <font-style>

 <font-weight>

Color and Background Properties

color

 <color>

background

 <background-color>

 <background-image>

Text Properties

text-decoration

 underline

 line-through

text-align

 left

 right

 center

text-indent

 <length>

 <percentage>

line-height

 <length>

Box Properties

margin-right

 <length>

margin-left

 <length>

 <percentage>

clear

 none

Units Property

Length Units

 px

 in

 cm

 mm

 pt

 pc

Percentage Units

 <percentage>

Color Units

 #000

 #000000

 <keyword>

links

<url>

css의 속성

This help file was created with HelpScribble.


두 브라우저가 전혀 지원하지 않는 Css형식

Pseudo-Classes and Pseudo-Elements

 first-line

:first-line

 first-letter

:first-letter

Text Properties

vertical-align

 baseline

 top

 text-top

 middle

 bottom

 text-bottom

 <percentage>

Box Properties

margin

 auto

Classification Properties

white-space

 nowrap

css속성

This help file was created with HelpScribble.


전체 비교

Y : 지원  N : 지원하지 않음  B : 버그가 있어 오작동  Q : 모호함

보기 : Link     B(Netscape4.05)    Y(Explorer4.0)

Link to  HTML

LINK   B         Y

<STYLE type="text/css">...</STYLE>   Y          Y

@import       N          Y

<x STYLE="dec;">   Y          Y

Grouping

 x, y, z {dec;}   Y           Y

(보기: B, H1, P { color : red } 앞의 세 요소Element는 붉은 문자로 지정)

Inheritance(혼합 사용된 요소Element간의 영향력)

 (inherited values)   P           P

Class  사용

 .class   B         Y

ID 사용

 #ID   B          Y

Contextual selectors

 x y z {dec;}   B           Y

감추는 말

 /* comment */   Y         Y

Pseudo-Classes and Pseudo-Elements

A

 A:link   Y      Y

 A:active   B        Y

 A:visited   Y       Y

first-line

 :first-line   N         N

first-letter

 :first-letter   N        N

The Cascade Property or Value

important

 !important   P           Y

Cascading Order

 Weight sorting   Y       Y

 Origin sorting   Y       Y

 Specificity sorting   P        Y

 Order sorting   Y        Y

Font Properties

font-family

 <family-name>   Y        Y

 <generic-family>   Y    Y

 ... serif   Y      Y

 ... sans-serif   Y       Y

 ... cursive   Y        Y

 ... fantasy   Y      Y

 ... monospace   Y       Y

font-style

 normal   Y       Y

 italic   Y      Y

 oblique   N       Y

font-variant

 normal   N        Y

 small-caps   N         P

font-weight

 normal   Y        Y

 bold   Y        Y

 bolder   Y        Y

 lighter   Y       Y

 100 - 900   Y         Y

font-size

 <absolute-size>   Y       Y

 ... xx-small - xx-large   Y         Y

 <relative-size>   Y         Y

 ... larger   Y         Y

 ... smaller   Y         Y

 <length>   Y        Y

 <percentage>   Y         Y

font

 <font-family>   Y        Y

 <font-style>   P       Y

 <font-variant>   N        P

 <font-weight>   Y        Y

 <font-size>   Y        Y

 <line-height>   Y        Y

Color and Background Properties

color

 <color>   Y         Y

background-color

 <color>   Y      Y

 transparent   B       Y

background-image

 <url>   Y        Y

 none   N       N

background-repeat

 repeat   Y       Y

 repeat-x   Y       Y

 repeat-y   Y        Y

 no-repeat   B       Y

background-attachment

 scroll   N      Y

 fixed   N      Y

background-position

 <percentage>   N         Y

 <length>   N         Y

 top   N         Y

 center   N         Y

 bottom   N        Y

 left   N         Y

 right   N         Y

background

 <background-color>   P        Y

 <background-image>   P        Y

 <background-repeat>   P        Y

 <background-attachment>   P        Y

 <background-position>   N        Y

Text Properties

word-spacing

 normal   N        N

 <length>   N       N

letter-spacing

 normal   N          Y

 <length>   N        Y

text-decoration

 none   Y       Y

 underline   Y        Y

 overline   N        Y

 line-through   Y         Y

 blink   Y        N

vertical-align

 baseline   N         N

 sub   N          Y

 super   N          Y

 top   N          N

 text-top   N        N

 middle   N        N

 bottom   N        N

 text-bottom   N         N

 <percentage>   N         N

text-transform

 capitalize   Y        Y

 uppercase   Y        Y

 lowercase   Y         Y

 none   Y        Y

text-align

 left   Y        Y

 right   Y       Y

 center   Y        Y

 justify   Y        Y

text-indent

 <length>   Y        Y

 <percentage>   Y          Y

line-height

 normal   Y        Y

 <number>   Y        Y

 <length>   Y         Y

 <percentage>   Y           Y

Box Properties

margin-top

 <length>   Y       Y

 <percentage>   Y       Y

 auto   Y       Y

margin-right

 <length>   Y       Y

 <percentage>   Y       Y

 auto   N        N

margin-bottom

 <length>   Y        Y

 <percentage>   Y          Y

 auto   Y        Y

margin-left

 <length>   Y      Y

 <percentage>   Y        Y

 auto   N        N

margin

 <length>   Y      Y

 <percentage>   Y         Y

 auto   Y        Y

padding-top

 <length>   Y        Y

 <percentage>   Y         Y

padding-right

 <length>   Y         Y

 <percentage>   Y           Y

padding-bottom

 <length>   Y       Y

 <percentage>   Y       Y

padding-left

 <length>   Y        Y

 <percentage>   Y         Y

padding

 <length>   Y        Y

 <percentage>   Y         Y

border-top-width

 thin   Y        Y

 medium   Y        Y

 thick   Y         Y

 <length>   Y         Y

border-right-width

 thin   Y        Y

 medium   Y        Y

 thick   Y        Y

 <length>   Y         Y

border-bottom-width

 thin   B       Y

 medium   B        Y

 thick   B        Y

 <length>   B         Y

border-left-width

 thin   Y        Y

 medium   Y       Y

 thick   Y      Y

 <length>   Y        Y

border-width

 thin   Y      Y

 medium   Y      Y

 thick   Y       Y

 <length>   Y         Y

border-color

 <color>   Y        Y

border-style

 none   Y      Y

 dotted   N       N

 dashed   N       N

 solid   Y         Y

 double   Y       Y

 groove   Y       Y

 ridge   Y         Y

 inset   Y         Y

 outset   Y         Y

border-top

 <border-top-width>   N          Y

 <border-style>   N         Y

 <color>   N         Y

border-right

 <border-right-width>   N      Y

 <border-style>   N      Y

 <color>   N      Y

border-bottom

 <border-bottom-width>   N        Y

 <border-style>   N       Y

 <color>   N           Y

border-left

 <border-left-width>   N       Y

 <border-style>   N         Y

 <color>   N         Y

border

 <border-width>   Y        Y

 <border-style>   Y         Y

 <color>   Y        Y

width

 <length>   Y        Y

 <percentage>   Y        Y

 auto   Y          Y

height

 <length>   Y       Y

 auto   Y         Y

float

 left   Y        Y

 right   Y        Y

 none   Y         Y

clear

 none   Y        Y

 left   Y        Y

 right   Y         Y

 both   Y           Y

Classification Properties

display

 block   Y        N

 inline   Y         N

 list-item   Y        N

 none   Y        Y

white-space

 normal   Y        N

 pre   Y        N

 nowrap   N        N

list-style-type

 disc   Y       Y

 circle   Y        Y

 square   Y        Y

 decimal   Y       Y

 lower-roman   Y        Y

 upper-roman   Y        Y

 lower-alpha   Y         Y

 upper-alpha   Y        Y

 none   N         Y

list-style-image

 <url>   N        Y

 none   N         Y

list-style-position

 inside   N  Y

 outside   N  Y

list-style

 <keyword>   Y       Y

 <position>   N       Y

 <url>   N         Y

Units

Length Units

 em   Y        Y

 ex   Q       Q

 px   Y        Y

 in   Y         Y

 cm   Y        Y

 mm   Y        Y

 pt   Y         Y

 pc   Y         Y

Percentage Units

 <percentage>   Y        Y

Color Units

 #000   Y         Y

 #000000   Y         Y

 (RRR,GGG,BBB)   Y         Y

 (R%,G%,B%)   Y          Y

 <keyword>   Y         Y

URLs

<url>   Y          Y

css속성

This help file was created with HelpScribble.


HelpScribble

HelpScribble is a help authoring tool written by Jan Goyvaerts. This help file was created with the unregistered version of HelpScribble, which is why you can read this ad. Once the author of this help file is so honest to register the shareware he uses, you will not see this ad again in his help files.

Recompiling the help project with the registered version is all it takes to get rid of this ad.

HelpScribble is a stand-alone help authoring tool. It does not require an expensive word processor. (Only a help compiler as Microsoft likes keeping the .hlp format secret. Not my fault.)

Here are some of HelpScribble's features:

•	The Setup program will properly install and uninstall HelpScribble and all of its components, including registry keys.

•	Create, edit and navigate through topics right in the main window. No need to mess with heaps of dialog boxes.

•	All topics are listed in a grid in the main window so you won't lose track in big help projects. You can even set bookmarks.

•	Use the built-in Browse Sequence Editor to easily create browse sequences.

•	Use the built-in Window Editor to change the look of your help window and create secondary windows.

•	Use the built-in Contents Editor to create Windows 95-style contents files. Works a lot better than Microsoft's HCW.

•	No need to mess with Microsoft's SHED: use the built-in SHG Editor to create hotspot bitmaps. Draw your hotspots on the bitmap and pick the topic to link to from the list.

•	With the built-in Macro Editor you can easily compose WinHelp macros whenever needed. It will tell you what the correct parameters are and provide information on them.

•	If you have a problem, just consult the online help. The help file was completely created with HelpScribble, of course.

•	HelpScribble is shareware. However, the unregistered version is not crippled in any way. It will only add a small note to your help topics to encourage you to be honest and to register the shareware you use.

These options are very interesting for Delphi and C++Builder developers:

•	If you are a component writer, use the Delphi Parser to build an outline help file for your component. Just fill in the spaces and you are done. HelpScribble can also extract the comments from your source file and use them as the default descriptions.

•	If you are an application writer, HelpScribble provides you with a property editor for the HelpContext property. You can select the topic you need from a list of topic titles or simply instruct to create a new topic. No need to remember obscure numbers.

•	The property editor also provides a tree view of all the components on your form and their HelpContext properties. This works very intuitively. (Much nicer than those help tools that simply mess with your .dfm files.)

•	HelpScribble can perform syntax highlighting on any Delphi source code in your help file.

HelpScribble is shareware, so feel free to grab your copy today from my web site at http://www.tornado.be/~johnfg/