여기서는 요약한 내용 만을 수록하였고 상세한 내용은 규격을 참조하라.
| 기본 개념 |
| 1.1 | HTML에의 포함 | |
| 1.2 | 구룹짓기(grouping) | 구룹짓기는 여러 엘레멘트들을 하나의 스타일 내용으로 동시에 지정한다.
h1, h2, h3, h5 {color: green;}
|
| 1.3 | 상속(inheritance) | 상속은 값을 모체(parent)로 부터 자식(child)에 전달한다. |
| 1.4 | 선택자(selector)로서의 클라스(class) | 클라스 선택자는 데이터의 타입을 지정하는데 사용 될 수 있다.
선택자는 한개의 점(.)으로 시작되는 스트링으로 구성되고 ,style= attribute로 호출되고 값에는 점이 나타나지 않는다.
.example {color: brown;}
<p class="example">이것은 하나의 예제이며 색상은 갈색이다.</p>
|
| 1.5 | 인식자(ID) 선택자 | 인식자 선택자는 데이터 타입을 정의하는데 사용 될 수 있으며, 앞에 (#)로 시작하는 스트링으로 구성되고, ID= attribute로 호출되며, 값에는 (#)가 나타나지 않는다.
#i5 {color: brown;} <p ID="i5"
<p>이는 ID가 'i5'인 텍스트이고 색상은 갈색이다.</p>
|
| 1.6 | 문맥(contextual) 선택자 | 문맥 선택자는 주어진 엘레멘트에 특정 상황에서 적용되는 스타일에 사용된다.
모체 자식의 순서로 표시하고 그 모체(parent)의 그 자식(child) 엘레멘트에 적용된다.
h1 em {color: red;}
<h1>이는 <em>적색</em>이다.</h1>
<p>이는 적색이 <em>아니다</em>.</p>
|
| 1.7 | 코멘트(comment) | 이는 제작자가 참고로 코멘트를 스타일쉬트 속에 기록 하는데 사용된다. 그 양식은 일반적인 C/C++에서와 같다.
/* 참고 주석(코멘트) */
|
| 가상 클리스(pseudo-class)와 가상 엘레멘트(pseudo-element) |
| 2.1 | 앤커(anchor) | 이름있는 것이 아닌 하이퍼링크(hyperlink)에 사용된다. |
| 2.3 | first-line | 주어진 엘레멘트의 텍스트에서 첫번째 줄에 적용된다.
이는 윈도우창이 조정되거나(resize) 텍스트가 다시 양식화(reformat) 되더라도 변동이 없다.
블럭레벨 엘레멘트에 만 적용되어야 한다.
p:first-line {color: red;}
<p>문단 텍스트의 첫 줄이 적색이다. 그 다음 줄부터는 아니다.</p>
|
| 2.4 | first-letter | 주어진 엘레멘트의 첫번째 글자에 적용되며, 무엇보다도 첫 글자를 유난히 크게하는데 사용된다.
블럭레벨 엘레멘트에 만 적용되어야 한다.
p:first-letter {color: blue;}
<p>문단의 첫번째 글자는 청색이다.</p>
|
| 카스케이드(cascade) |
| 3.1 | important | 스타일 장식을 중요하다고 표시하는 것이며, 이 표시로 그 전에 어떤 지정이 되어있건 관계없이 이것으로 덮어 씌워(override)진다.
h1 {color: blue ! important;}
|
| 3.2 | 카스케이드(cascading) 순서 | 코드가 결합되고 선택되는 방식으로 CSS1 규격의 상세 내용을 참조하라. |
| 글자 특성(font properties) |
| 5.2.2 | font-family | 폰트의 종류를 지정하는데 사용된다.
p {font-family: Helvetica,sans-serif;}
|
| 5.2.3 | font-style | 이태릭과 보통 글자 중에 어느 것인가를 지정한다.
em {font-style: oblique;}
|
| 5.2.4 | font-variant | 작은 대문자(small-caps)과 정상 글자 중에 어느 것인가를 지정한다.
h3 {font-variant: small-caps;}
|
| 5.2.5 | font-weight | 글자의 굵기(어둡기,무계)를 지정하여 어둡게(굵게, 무겁게)와 밝게(얇게, 가볍게)를 지정한다.
b {font-weight: 700;}
|
| 5.2.6 | font-size | 글자 크기를 지정한다. 그 값은 절대 크기, 상대 크기, 백분율이 될 수 있다.
h3 {font-size: 36pt;}
h4 {font-size: 1.5em}
h2 {font-size: 200%;}
|
| 5.2.7 | font | 폰트의 여려 특성을 한번에 지정하는 요약 명려이다.
그 값들의 순서는 중요하지 않다.
font {font-style font-variant font-weight font-size/line-height font-family;}.
여개에 명시되지 않은 값들은 생략된 것으로 디폴트가 적용된다.
p {font: bold 12pt/14pt Helvetica,sans-serif;}
|
| 글자색(color)과 배경색상(background) 특성 |
| 5.3.1 | color | 엘레멘트의 전면색(글자)를 지정한다.
글자에서는 글자색, hr등 다른 엘레멘트에서는 줄의 색상이다.
strong {color: teal;}
|
| 5.3.2 | background-color | 엘레멘트의 배경색상을 지정하며, 그 배경색상은 엘레멘트의 테두리(edge)까지 확장 적용된다.
h4 {background-color: white;}
|
| 5.3.3 | background-image | 배경의 이미지 패턴을 지정한다.
주어진 다른 배경의 특성에 따라 한 방향(좌우, 혹은 상하)으로 반복되거나 바둑판식으로 배열 될 수 있다.
body {background-image: url(bg41.gif);}
|
| 5.3.4 | background-repeat | 배경 이미지의 반복되는 스타일을 지정한다.
body {background-repeat: no-repeat;}
|
| 5.3.5 | background-attachment | 배경 이미지가 엘레멘트에 스트록(scroll)되는가 않되는가를 지정한다.
일반적으로 본체(body)에만 적용된다.
body {background-attachment: scroll;}
|
| 5.3.6 | background-position | 배경 이미지나 색상의 시작 좌표를 지정한다.
색상에서는 그 색이 그 위치에서부터 전부 채워지며, 이미지의 경우에는 첫 이미지의 좌측 상단 부분이 그 위치에 오고, background-repeat로 반복이 지정되었으면 반복된다.
body {background-position: top center;}
|
| 5.3.7 | background | 이는 배경의 여러 특성을 한번에 지정하는 약식 명령이며, 그 순서는 관계없다.
body {background: white url(bg41.gif) fixed center;}
|
| 텍스트(text) 특성 |
| 5.4.1 | word-spacing | 단어와 단어사이의 공간의 크기를 지정하며, 그 단위는 공간(white space) 사이의 스트링이다.
p {word-spacing: 0.5em;}
|
| 5.4.2 | letter-spacing | 디스플레이된 글자 하나 하나의 사이의 간격을 지정한다.
p {letter-spacing: 0.5em;}
|
| 5.4.3 | text-decoration | 텍스트에 밑줄치기, 삭제표시, 깜빡거림등 특수한 효과를 지정하며, 중복 지정은 틀린 것이다.
u {text-decoration: underline;}
.old {text-decoration: line-through;}
|
| 5.4.4 | vertical-align | 엘레멘트의 기초라인(basline)으로 부터의 수직 거리를 그 모체 엘레멘트의 줄높이(line-height)에 대해 지정한다.
인라인 엘레멘트에 만 적용 할 수도 있고, 음수가 허용된다.
sup {vertical-align: super;}
.fnote {vertical-align: 50%;}
|
| 5.4.5 | text-transform | 당초 텍스트에 관계없이 글자를 대문자로 혹은 소문자로 변경시킴을 지정한다.
h1 {text-transform: uppercase;}
.title {text-transform: capitalize;}
|
| 5.4.6 | text-align | 엘레멘트 속에서 텍스트의 수평 위치를 지정하며, 블럭레벨 엘레멘트에 만 적용하게 할 수 있다.
p {text-align: justify;}
h4 {text-align: center;}
|
| 5.4.7 | text-indent | 엘레멘트 속에서 첫째줄을 얼마나 들여쓰기를 할 것인가를 지정한다.
문단에서 탭(tab) 효과를 얻을 수 있다.
블럭레벨 엘레멘트에 만 적용되고, 음수값은 허용된다.
p {text-indent: 5em;}
h2 {text-indent: -25px;}
|
| 5.4.8 | line-height | 엘레멘트의 베이스라인 간의 높이를 지정하며 음수값은 허용되지 않는다.
p {line-height: 18pt;}
h2 {line-height: 200%;}
|
| 박스(box) 특성 |
| 5.5.01 | margin-top | 엘레멘트의 위쪽 마진(margin)의 크기를 지정하며, 음수가 허용되나 주의를 기울여야 한다.
ul {margin-top: 0.5in;}
|
| 5.5.02 | margin-right | 엘레멘트의 오른쪽 마진의 크기를 지정하며, 음수가 허용되나 주의를 기울여야 한다.
img {margin-right: 30px;}
|
| 5.5.03 | margin-bottom | 엘레멘트의 아래쪽 마진의 크기를 지정하며, 음수가 허용되나 주의를 기울여야 한다.
ul {margin-bottom: 0.5in;}
|
| 5.5.04 | margin-left | 엘레멘트의 왼쪽 마진의 크기를 지정하며, 음수가 허용되나 주의를 기울여야 한다.
p {margin-left: 3em;}
|
| 5.5.05 | margin | 엘레멘트의 모든쪽 마진의 크기를 지정하며, 음수가 허용되나 주의를 기울여야 한다.
h1 {margin: 2ex;}
|
| 5.5.06 | padding-top | 엘레멘트의 위쪽 패딩(padding)의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고 음수값은 허용되지 않는다.
which will inherit the element's background. 음수값은 허용되지 않는다.
ul {padding-top: 0.5in;}
|
| 5.5.07 | padding-right | 엘레멘트의 오른쪽 패딩의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고 음수값은 허용되지 않는다.
img {padding-right: 30px;}
|
| 5.5.08 | padding-bottom | 엘레멘트의 아래쪽 패딩의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고 음수값은 허용되지 않는다.
ul {padding-bottom: 0.5in;}
|
| 5.5.09 | padding-left | 엘레멘트의 왼쪽 패딩의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고 음수값은 허용되지 않는다.
p {padding-left: 3em;}
|
| 5.5.10 | padding | 엘레멘트의 모든쪽 패딩의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고 음수값은 허용되지 않는다.
h1 {padding: 2ex;}
|
| 5.5.11 | border-top-width | 엘레멘트의 위쪽 보더(border)의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고, 별도의 전면을 가질 수 있고, 음수값은 허용되지 않는다.
ul {border-top-width: 0.5in;}
|
| 5.5.12 | border-right-width | 엘레멘트의 오른쪽 보더의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고, 별도의 전면을 가질 수 있고, 음수값은 허용되지 않는다.
img {border-right-width: 30px;}
|
| 5.5.13 | border-bottom-width | 엘레멘트의 아래쪽 보더의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고, 별도의 전면을 가질 수 있고 음수값은 허용되지 않는다.
ul {border-bottom-width: 0.5in;}
|
| 5.5.14 | border-left-width | 엘레멘트의 왼쪽 보더의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고, 별도의 전면을 가질 수 있고, 음수값은 허용되지 않는다.
p {border-left-width: 3em;}
|
| 5.5.15 | border-width | 엘레멘트의 모든쪽 보더의 크기를 지정하며, 그 곳에는 엘레멘트의 배경이 상속되고, 별도의 전면을 가질 수 있고, 음수값은 허용되지 않는다.
h1 {border-width: 2ex;}
|
| 5.5.16 | border-color | 엘레멘트 전면 모든쪽의 보더 색상을 지정하며, 배경색은 상속(inherit)된다.
h1 {border-color: purple; border-style: solid;}
|
| 5.5.17 | border-style | 엘레멘트의 모든 보더의 스타일을 지정하며, 색상은 border-color에 의하여 지정된 것을 사용한다.
h1 {border-style: solid; border-color: purple;}
|
| 5.5.18 | border-top | 엘레멘트 위쪽 보더의 특성을 지정하는 약식 명령으로, 그 너비(width), 색상(color), 스타일(style)이 포함 될 수 있다.
ul {border-top: 0.5in solid black;}
|
| 5.5.19 | border-right | 엘레멘트 오른쪽 보더의 특성을 지정하는 약식 명령으로, 그 너비, 색상, 스타일이 포함 될 수 있다.
img {border-right: 30px dotted blue;}
|
| 5.5.20 | border-bottom | 엘레멘트 아래쪽 보더의 특성을 지정하는 약식 명령으로, 그 너비, 색상, 스타일이 포함 될 수 있다.
ul {border-bottom: 0.5in grooved green;}
|
| 5.5.21 | border-left | 엘레멘트 왼쪽 보더의 특성을 지정하는 약식 명령으로, 그 너비, 색상, 스타일이 포함 될 수 있다.
p {border-left: 3em solid gray;}
|
| 5.5.22 | border | 엘레멘트 모든쪽 보더의 특성을 지정하는 약식 명령으로, 그 너비, 색상, 스타일이 포함 될 수 있다.
h1 {border: 2px dashed tan;}
|
| 5.5.23 | width | 엘레멘트의 너비(width)를 지정하며, 많은 경우 이미지에 사용되나, 어떤 블럭레벨이나 대체(replaced) 엘레멘트에나 사용 될 수 있다. 음수값은 허용되지 않는다.
table {width: 80%;}
|
| 5.5.24 | height | 엘레멘트의 높이(height)를 지정하며, 많은 경우 이미지에 사용되나, 어떤 블럭레벨이나 대체(replaced) 엘레멘트에나 한도 내에서 사용 될 수 있다. 음수값은 허용되지 않는다.
img.icon {height: 50px;}
|
| 5.5.25 | float | 엘레멘트의 유동(float)을 지정한다.
일반적으로 이미지에 그 주위에 텍스트가 흐르도록 적용되나, 어떤 엘레멘트도 유동 될 수 있다.
img {float: left;}
|
| 5.5.26 | clear | 어떤 유동 엘레멘트가 엘레멘트 양쪽면에 허용되는가를 지정한다.
h1 {clear: both;}
|
| 분류(classification) 특성 |
| 5.6.1 | display | 제한이 있기는 하지만 넓은 카테고리들에 사용된다.
가장 많이 사용되는 값은 none 일 것이다.
.hide {display: none;}
|
| 5.6.2 | white-space | 엘레멘트 속의 공간을 어떻게 처리 할 것인가를 지정한다.
TD {white-space: nowrap;}
TT {white-space: pre;}
|
| 5.6.3 | list-style-type | 번호없는(unordered) 목록이나 번호있는(ordered) 목록(list)에서 불렛(bullet)의 타입이나 번호 붙이는 방식을 지정한다.
이는 list-item의 값을 가진 모든 엘레멘트에 적용된다
ul {list-style-type: square;}
ol {list-style-type: lower-roman;}
|
| 5.6.4 | list-style-image | 번호없는 목록(ul)이나 번호있는 목록(ol)에서 불렛으로 사용되는 이미지를 지정한다.
이는 list-item의 값을 가진 모든 엘레멘트에 적용된다
ul {list-style-image: url(bullet3.gif);}
|
| 5.6.5 | list-style-position | 번호없는 목록이나 번호있는 목록에서 목록항목(list item)에 대한 불렛이나 번호의 위치를 지정한다.
이는 list-item의 값을 가진 모든 엘레멘트에 적용된다
li {list-style-position: outer;}
|
| 5.6.6 | list-style | 여러 목록 스타일 특성을 한번에 지정하는 약식명령으로, 이는 list-item의 값을 가진 모든 엘레멘트에 적용된다
ul {list-style: square url(bullet3.gif) outer;}
|
| 단위 |
| 6.1 | 길이단위 | 여러가지 크기를 지정하기 위하여 사용되는 특성으로 크기의 절대값으로, 관련되는 내용에 관계없이 일정한다.
width: 50px; margin-left: 2em;
|
| 6.2 | 백분율 단위 | 여러가지 크기를 지정하기 위하여 사용되는 특성으로 크기의 상대값으로, 관련되는 내용에 대하여 계산된다.
width: 80%;
|
| 6.3 | 색상 단위 | 색상을 지장하기 위하여 사용되는 특성이다.
color: #ff00ff;
color: rgb(100%,0%,100%);
|
| 6.4 | URL | 이미지의 위치를 지정하기 위하여 사용되는 특성이다.
부분적인 URL이, 그 HTML 문서에 대하여서가 아니라, 그 스타일쉬트의 위치에 대하여 위치를 산출한다.
url(picture.gif)
url(http://www.pix.org/lib1/pic278.gif)
|
제공