'W3C/CSS'에 해당하는 글 20건

CSS Margin Properties

W3C/CSS 2006. 9. 7. 19:57

share this post

CSS margin 속성은 요소 둘레에 여백을 정의한다.
중복된 내용에 음수 값을 사용할 수 있다.
상단, 우측, 하단, 좌측 여백은 분리된 속성을 사용하여 독립적으로 변경할 수 있다.
margin 단축 속성은 한번에 모든 여백을 변경할 수도 있다.
(넷스케이프와 인터넷익스플로러는 8px의 기본 margin을 가진 <body> 태그를 제공한고 오페라는 8px의 기본 padding을 제공한다.

CSS margin Property
margin 속성은 하나의 선언으로 네 여백에 모든 속성을 지정하는 단축 속성이다.(음수값 허용)
(상속불가)

h1 {margin: 10px}
/* 네 여백은 10px */
h1 {margin: 10px 2%}
/* 상단과 하단 여백은 10px, 좌측과 우측 여백은 문서의 총 가로길이의 2% */
h1 {margin: 10px 2% -10px}
/* 상단 여백은 10px, 좌측과 우측 여백은 문서의 총 가로길이의 2%, 하단 여백은 -10px */
h1 {margin: 10px 2% -10px auto}
/* 상단 여백은 10px, 우측 여백은 문서의 총 가로길이의 2%, 하단 여백은 -10px, 좌측 여백은 브라우저로부터 자동 지정 */

Values
margin-top | margin-right | margin-bottom | margin-left
: 여백의 속성을 지정한다.

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>

<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>

CSS margin-bottom Property
(CSS margin-top Property, CSS margin-left Property, CSS margin-right Property)
margin-bottom 속성은 요소의 하단 여백을 지정한다.(음수값 허용)
(상속불가)

h1
{
margin-bottom: 10px
}
h2
{
margin-bottom: -20px
}

Values
auto - 브라우저가 하단 여백을 정의한다.
length - 고정된 하단 여백을 정의한다.
% - 문서의 총 가로/세로의 퍼센트(%)로 하단 여백을 정의한다.

<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>no margin</p>
<p class="bottommargin">a specified bottom margin</p>
<p>no margin</p>
</body>
</html>

WRITTEN BY

: 손가락귀신
정신 못차리면, 벌 받는다.

CSS Border Properties

W3C/CSS 2006. 9. 7. 19:34

share this post

CSS Border 속성들은 요소 둘레에 테두리를 정의한다.
CSS border 속성들은 요소의 테두리의 색상과 스타일을 지정하게 한다.
HTML에서 텍스트 둘레에 테두리를 생성하기 위해 테이블을 사용하지만, CSS border 속성으로 좋은 효과의 테두리를 생성할 수 있고, 어떤 요소에도 적용시킬 수 있다.

CSS border Property
border 속성은 하나의 선언으로 테두리의 모든 속성을 지정하는 단축 속성이다.
이 속성은 "margin"과 "padding"처럼 테두리의 각 부분에 다른 값을 지정할 수 없다.
(상속불가)

p
{
border: thin dotted #00FF00
}
span
{
border: solid #0000FF
}

Values
border-width | border-style | border-color
: 테두리의 속성을 지정한다.

<html>
<head>
<style type="text/css">
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>

<body>
<p>Some text</p>
</body>
</html>

CSS border-color Property
border-color 속성은 네 테두리의 색상을 지정한다.
border-color 속성 전에 border-style 속성을 항상 선언하라.
요소는 색상이 바뀌기 전에 테두리를 가져야 한다.
(상속불가)

table {border-color: red}
/* 네 테두리가 모두 red가 될 것이다. */
table {border-color: red green}
/* 상단, 하단 테두리는 red, 왼쪽과 오른쪽 테두리는 green이될 것이다. */
table {border-color: red green blue}
/* 상단 테두리는 red, 왼쪽과 오른쪽 테두리는 geen가하단 테두리는 blue가될 것이다. */
table {border-color: red green blue yellow}
/* 상단 테두리는 red, 오른쪽 테두리는 green, 아래 테두리는 blue, 왼쪽 테두리는 yellow가 될 것이다. */

Values
color : 색상값은 색상이름(red), RGB값(rgb(255,0,0)), 16진수(#FF0000)가 될 수 있다.
transparent : 테두리를 투명하게 한다.

CSS border-width Property
border-width 속성은 하나의 선언으로 네 테두리의 길이를 지정하는 단축 속성이다.
(상속불가)

table {border-width: thin}
/* 네 테두리가 모두 thin이 될 것이다. */
table {border-width: thin medium}
/* 상단과 하단 테두리는 thin, 왼쪽과 오른쪽 테두리는 medium이 될 것이다. */
table {border-width: thin medium thick}
/* 상단의 테두리는 thin, 왼쪽과 오른쪽 테두리는 medium, 하단 테두리는 thick이 될 것이다. */
table {border-width: thin medium thick none}
/* 상단 테두리는 thin, 오른쪽 테두리는 medium, 하단 테두리는 thick 왼쪽 테두리는 none이 될 것이다. */

Values
thin - 얇은 아래 테두리를 정의한다.
medium - 보통 아래 테두리를 정의한다.
thick - 두꺼운 아래 테두리를 정의한다.
length- 아래 테두리의 두께를 정의한다.

CSS border-style Property
border-style 속성은 네 테두리의 스타일을 지정한다.
(상속불가)

table {border-style: dotted}
/* 네 테두리가 모두 dotted 될 것이다. */
table {border-style: dotted dashed}
/* 상단과 하단 테두리는 dotted, 왼쪽과 오른쪽 테두리는 dashed 될 것이다. */
table {border-style: dotted dashed solid}
/* 상단의 테두리는 dotted, 왼쪽과 오른쪽 테두리는 dashed, 하단 테두리는 solid 될 것이다. */
table {border-style: dotted dashed solid double}
/* 상단 테두리는 dotted, 오른쪽 테두리는 dashed, 하단 테두리는 solid 왼쪽 테두리는 double 될 것이다. */

Values
none - 테두리 없음을 정의한다.
hidden - "none" 처럼 테이블 요소의 테두리 해상도 충돌을 제외한다.
dotted - 점선 테두리를 정의한다. 대부분의 브라우저에 실선으로 보인다.
dashed - 긴점선 테두리를 정의한다. 대부분의 브라우저에 실선으로 보인다.
solid - 실선 테두리를 정의한다.
double - 두선의 테두리를 정의한다. 두 테두리의 가로는 border-width 값이다.
groove - 3D grooved 테두리를 정의한다. 효과는 border-color 값에 의존한다.
ridge - 3D ridged 테두리를 정의한다. 효과는 border-color 값에 의존한다.
inset - inset 테두리를 정의한다. 효과는 border-color 값에 의존한다.
outset - 3D outset 테두리를 정의한다. 효과는 border-color 값에 의존한다.

<html>
<head>
<style type="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>

<body>
<p class="soliddouble">Some text</p>
<p class="doublesolid">Some text</p>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>
</html>

CSS border-bottom Property
(CSS border-left Property, CSS border-right Property, CSS border-top Property)
border-bottom 속성은 하나의 선언으로 아래 테두리의 모든 속성을 지정하는 단축 속성이다.
(상속불가)

table
{
border-bottom: thin dotted #00FF00
}
span
{
border-bottom: solid #0000FF
}

Values
border-bottom-width | border-style | border-color
: 아래 테두리의 속성을 지정한다.

<html>
<head>
<style type="text/css">
p
{
border-bottom: medium solid #ff0000
}
</style>
</head>

<body>
<p>Some text.</p>
</body>
</html>

CSS border-bottom-color Property
요소의 아래 테두리의 색상을 지정한다.
(상속안됨)

table
{
border-bottom-color: #ff3366
}
table
{
border-bottom-color: rgb(255,0,0)
}

Values
color : 색상값은 색상이름(red), RGB값(rgb(255,0,0)), 16진수(#FF0000)가 될 수 있다.

CSS border-bottom-style Property
border-bottom-style 속성은 요소의 아래 테두리 스타일을 지정한다.
(상속불가)

table
{
border-bottom-style: solid
}

table
{
border-bottom-width: thin
}
table
{
border-bottom-width: 0.5px
}

Values
thin - 얇은 아래 테두리를 정의한다.
medium - 보통 아래 테두리를 정의한다.
thick - 두꺼운 아래 테두리를 정의한다.
length- 아래 테두리의 두께를 정의한다.

<html>
<head>
<style type="text/css">
p
{
border-style: solid;
border-bottom-width: 15px
}
</style>
</head>

<body>
<p><b>Note:</b> The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

WRITTEN BY

: 손가락귀신
정신 못차리면, 벌 받는다.

CSS font Property

W3C/CSS 2006. 9. 7. 18:59

share this post

CSS font Property
font 속성은 하나의 선언으로 모든 속성들을 지정하는 단축 속성이다.
이 속성은 6개의 값을 가진다.
(상속가능)

p
{
font: 12px arial
}
p
{
font: italic small-caps bold 12px arial
}
p
{
font: oblique small-caps 900 12px/14px arial
}
p
{
font: menu
}

Values
font-style | font-variant | font-weight | font-size/line-height | font-family
: 폰트의 속성을 지정한다. line-height 값은 줄간격을 지정한다. 값은 숫자나 퍼센트, 폰트 크기가 될 수 있다.
caption - 버튼, 드롭다운 등의 설명된 컨트롤로부터 사용된 폰트를 정의한다.
icon - 아이콘 이름으로부터 사용된 폰트를 정의한다.
menu - 드롭다운 메뉴로부터 사용된 폰트를 정의한다.
message-box - 대화상자로부터 사용된 폰트를 정의한다.
status-bar - 상태바로부터 사용된 폰트를 정의한다.

<html>
<head>
<style type="text/css">
p
{
font: italic small-caps 900 12px arial
}
</style>
</head>

<body>
<p>This is a paragraph</p>
</body>
</html>

WRITTEN BY

: 손가락귀신
정신 못차리면, 벌 받는다.

CSS Font Properties

W3C/CSS 2006. 9. 7. 18:41

share this post

CSS font 속성들은 텍스트의 스타일과 글꼴, 굵기, 크기를 변경할 수 있게 한다.

CSS font-family Property
font-family 속성은 요소의 글꼴 리스트이다.
브라우저는 첫번째 값을 인식하고 사용할 것이다.
font-family 값에는 두가지 형태가 있다.
family-name: 글꼴 이름이 "times", "courier", "arial"... 같은 것
generic-family: 공통 이름이"serif", "sans-serif", "cursive", "fantasy"... 같은 것
각 값은 콤마로 구분하고, 마지막 대안으로 항상 generic-family를 제공해라.
글꼴 이름이 여백을 포함한다면, 따옴표로 표시해라.
작은따옴표는 HTML의 style 속성을 사용할 때 쓰여져야 한다.
(상속가능)

body
{
font-family: courier, serif
}
p
{
font-family: arial, "lucida console", sans-serif
}
<p style="font-family: arial, 'lucida console', sans-serif">

Values
family-name - 글꼴이름을 지정한다.
generic-family - 글꼴 가족(font family name) 그리고/또는 일반 글꼴(generic family name)의 적용 우선순위를 열거한 목록이다.

<html>
<head>
<style type="text/css">
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>

<body>
<h3>This is header 3</h3>
<p>This is a paragraph</p>
<p class="sansserif">This is a paragraph</p>
</body>
</html>

CSS font-size Property
font-size 속성은 폰트의 크기를 지정한다.
(상속가능)

body
{
font-size: x-large
}
p
{
font-size: 10px
}

<html>
<head>
<style type="text/css">
h1 {font-size: x-large}
h2 {font-size: 130%}
p {font-size: 100%}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

CSS font-stretch Property
font-stretch 속성은 현재 글꼴을 늘리거나 줄인다.
글꼴은 오직 가로로만 늘려지거나 줄여진다.
(상속가능)

h2
{
font-stretch: ultra-condensed
}

Values
normal - 보통으로 늘리거나 줄이는 크기를 지정한다.
wider - 다음 늘려진 값으로 늘리는 크기를 지정한다.
narrower - 다음 늘려진 값으로 줄이는 크기를 지정한다.
ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
: 글꼴을 늘리거나 줄이는 크기를 지정, "ultra-condensed"는 가장 얇은 값이고, "ultra-expanded"는 가장 넓은 값이다.

CSS font-style Property
font-style 속성은 글꼴의 스타일을 지정한다.
(상속가능)

body
{
font-style: italic
}

Values
normal - 브라우저는 보통 글꼴로 나타난다.
italic - 브라우저는 이태릭 글꼴로 나타난다.
oblique - 브라우저는 기울어진 글꼴로 나타난다.

<html>
<head>
<style type="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

CSS font-variant property
font-variant 속성은 소형 대문자로 텍스트를 나타내는데 사용한다.
모든 소문자는 대문자로 변경되지만, 소형 대문자는 다른 텍스트에 비해 작은 크기를 가진다.
(상속가능)

p
{
font-variant: small-caps
}

Values
normal - 브라우저는 일반 폰트를 나타낸다.
small-caps - 브라우저는 소형 대문자를 나타낸다.

<html>
<head>
<style type="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</style>
</head>

<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>

CSS font-weight Property
font-weight 속성은 출력된 텍스트를 가늘거나 굵게 지정한다.
(상속가능)

p
{
font-weight: bold
}

Values
normal - 일반 문자를 정의한다.
bold - 굵은 문자를 정의한다.
bolder - 더 굵은 문자를 정의한다.
lighter - 더 가늘은 문자를 정의한다.
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
: 가늘은 문자부터 두꺼운 문자를 정의한다. 400 이 보통이고, 700이 굵다.

<html>
<head>
<style type="text/css">
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>
</head>

<body>
<p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p>
<p class="thicker">This is a paragraph</p>
</body>
</html>

WRITTEN BY

: 손가락귀신
정신 못차리면, 벌 받는다.

CSS Text Properties

W3C/CSS 2006. 9. 7. 18:28

share this post

CSS text 속성들은 텍스트의 모양을 컨트롤할 수 있게 한다.
텍스트의 색상을 바꾸고, 텍스트에서 문자사이의 공백을 늘이거나 줄이고, 텍스트 정렬, 텍스트 꾸밈, 텍스트의 첫번째 라인 들여쓰기 등이 가능하다.

CSS color Property
color 속성은 텍스트의 색상을 지정한다.
(상속가능)

body
{
color: rgb(255,255,0)
}

Values
color : 색상값은 컬러이름(red), RGB값(rgb(255,255,255), 16진수(#ffff00)가 될 수 있다.

CSS direction Property
direction 속성은 텍스트 방향을 지정한다.
(상속가능)

div
{
direction: rtl
}

Values
ltr : 텍스트 방향은 왼쪽에서 오른쪽이다. (left-to-right)
rtl : 텍스트 방향은 오른쪽에서 왼쪽이다. (right-to-left)

CSS letter-spacing Property
letter-spacing 속성은 문자사이의 공백을 늘이거나 줄이고, 음수값도 허용된다.
(상속가능)

p
{
letter-spacing: 12px
}
p
{
letter-spacing: -0.5px
}

Values
normal - 문자 사이의 보통 여백을 정의한다.
length - 분자 사이의 고정 여백을 정의한다.

<html>
<head>
<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>

CSS text-align Property
text-align 속성은 요소의 텍스트를 정렬한다.
(상속가능)

p
{
text-align: center
}

Values
left - 텍스트를 왼쪽으로 정렬한다.
right - 텍스트를 오른쪽으로 정렬한다.
center - 텍스트를 중앙 정렬한다.
justify - 텍스트를 양쪽 정렬한다.

<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
</body>
</html>

CSS text-decoration Property
text-decoration 속성은 텍스트를 꾸민다.
장식의 색상은 color 속성으로부터 지정되어야 한다.
(상속불가)

p
{
text-decoration: underline
}

Values
none - 일반적인 텍스트를 정의한다.
underline - 텍스트에 밑줄을 정의한다.
overline - 텍스트에 윗줄을 정의한다.
line-through - 텍스트 중간줄을 정의한다.
blink - 깜빡이는 텍스트를 정의한다.

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<p><a href="http://www.google.co.kr">This is a link</a></p>
</body>
</html>

CSS text-indent Property
text-indent 속성은 요소의 첫번째 줄 텍스트를 들여쓰기 한다.
음수가 허용되고, 음수값일 경우, 첫번째 줄이 왼쪽으로 들여쓰기 될 것이다.
(상속가능)

p
{
text-indent: 20px
}
p
{
text-indent: -12px
}

Values
length - 고정된 길이의 들여쓰기를 정의한다.
% - 부모요소 가로길이의 퍼센트(%)만큼 들여쓰기를 정의한다.

<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>

<body>
<p>
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
This is some text in a paragraph
</p>
</body>
</html>

CSS text-transform Property
text-transform 속성은 요소의 문자를 컨트롤한다.
(상속가능)

p
{
text-transform: uppercase
}

Values
none - 소문자나 대문자를 가진 일반적인 텍스트를 정의한다.
capitalize - 텍스트의 각 단어를 대문자로 시작한다.
uppercase - 대문자로 정의한다.
lowercase - 소문자로 정의한다.

<html>
<head>
<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>

<body>
<p class="uppercase">This is some text in a paragraph</p>
<p class="lowercase">This is some text in a paragraph</p>
<p class="capitalize">This is some text in a paragraph</p>
</body>
</html>

CSS white-space Property
white-space 속성은 요소가 다뤄질때 공백처리를 지정한다.
(상속가능)

p
{
white-space: normal
}

Values
normal - 공백은 브라우저로부터 무시된다.
pre - 공백은 브라우저로부터 유지된다. (HTML 태그인 <pre>와 같다.)
nowrap - 텍스트는 <br> 태그를 만날때까지 자동줄바꿈 되지 않을 것이다.

CSS word-spacing Property
word-spacing 속성은 단어 사이의 공간을 늘이거나 줄인다.
음수값을 허용한다.
(상속가능)

p
{
word-spacing: 30px
}
p
{
word-spacing: -0.5px
}

Values
normal - 단어 사이에 일반적인 공간을 정의한다.
length - 단어 사이에 고정 공간을 정의한다.

<html>
<head>
<style type="text/css">
h1 {word-spacing: -3px}
h4 {word-spacing: 0.5cm}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>
</html>

WRITTEN BY

: 손가락귀신
정신 못차리면, 벌 받는다.

'W3C/CSS'에 해당하는 글 20건

CSS Margin Properties

CSS Border Properties

CSS font Property

CSS Font Properties

CSS Text Properties

티스토리툴바