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

CSS Positioning Properties

W3C/CSS 2006. 9. 11. 18:13
CSS positioning 속성은 요소의 위치를 상,하,좌,우로 지정한다.
요소의 모양(shape)을 지정하고, 다른 것들 뒤에 요소를 위치시키고, 요소의 내용이 지정된 영역에 비해 너무 클 때 지정한다.

CSS bottom Property
(CSS top Property, CSS left Property, CSS right Property)
bottom 속성은 요소의 아래 테두리를 지정한다.
"position" 속성이 "static"의 값을 가진다면, "bottom" 속성은 효과가 없다.
(상속불가)

/* window의 아래 테두리의 20px 위에 문장의 아래 테두리 지정 */
p
{
position: absolute;
bottom: 20px
}
/* window의 아래 테두리의 20px 밑에 문장의 아래 테두리 지정 */
p
{
position: absolute;
bottom: -20px
}

Values
auto : 브라우저가 아래 위치를 계산한다.
% : 윈도우의 아래 테두리로부터 %로 아래 위치를 지정한다.
length : 윈도우의 아래 테두리로부터 px, cm 등으로 아래 위치를 지정한다.(음수값 허용)


CSS clip Property
clip 속성은 요소의 모양(shape)을 지정한다.
이미지가 요소보다 더 크다면..
"clip" 속성은 보이는 요소의 치수를 지정하고, 요소는 이 모양(shape)으로 잘려진다.
이 속성은 "visible"로 지정된 "overflow"속성과 함께 사용될 수 없다.
(상속불가)

img
{
clip: rect(10px, 5px, 10px, 5px)
}

Values
shape : 요소의 모양을 지정한다. 올바른 모양(shape) 값은 rect (top, right, bottom, left)이다.
auto : 브라우저가 요소의 모양(shape)를 지정한다.

<!-- 이미지를 지정한 shape만큼만 출력 -->
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>

<body>
<p><img border="0" src="test_js.gif" width="120" height="150"></p>
</body>
</html>


CSS overflow Property
overflow 속성은 요소의 내용이 영역보다 클 때 지정한다.
(상속불가)

p
{
overflow: scroll
}

Values
visible : 내용은 잘려지지 않는다. 요소의 바깥쪽에 나타난다.
hidden : 내용이 잘리고, 브라우저가 내용의 나머지를 볼 수 있는 스크롤바를 나타내지 않는다.
scroll : 내용은 잘려지지만, 브라우저가 내용의 나머지를 볼 수 있는 스크롤바를 나타낸다.
auto : 내용이 잘려진다면, 브라우저가 내용의 나머지를 볼 수 있는 스크롤바를 보여줄 것이다.

<!-- 내용이 넘칠때 스크롤 설정 -->
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>

<body>
<div>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</div>
</body>
</html>


CSS position Property
position 속성은 static, relative, absolute, fixed로 요소를 위치한다.
(상속불가)

h1
{
position:absolute;
left:100px;
top:150px;
}
 
Values
static : 요소는 보통 위치에 위치한다. 이 값을 가지면 "left", "top" 속성을 사용하지 않는다.
relative : 보통 위치에서 상대적으로 요소를 이동힌다.
absolute : 이 값을 가지면 페이지의 어느곳에든 위치시킬 수 있다. 요소의 위치는 "left", "top", "right", "bottom" 속성으로 지정된다.


CSS vertical-align Property
vertical-align 속성은 요소의 세로 정렬을 지정한다.
(상속불가)

img
{
vertical-align: bottom
}
 
Values
baseline : 요소는 상위 요소의 아래 기준선에 위치된다.
sub : 아래첨자로 요소를 정렬한다.
super : 윗첨자로 요소를 정렬한다.
top : 요소의 상단은 그 줄의 가장 높은 요소의 상단에 정렬된다.
text-top : 요소의 상단은 상위 요소 폰트의 상단에 정렬된다.
middle : 요소는 상위 요소의 중앙에 위치된다.
bottom : 요소는 요소의 하단은 그 줄의 가장 낮은 요소에 정렬된다.
text-bottom : 요소의 하단은 상이ㅜ 요소 폰트의 하단에 정렬된다.
% : line-height 속성의 %값에 요소를 정렬시킨다.(음수값 허용)

<!-- 라인 세로 정렬 -->
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>
<p>
some
<img class="top" border="0" src="test_js.gif" width="50" height="100" />
text.
</p>
<p>
some
<img class="bottom" border="0" src="test_js.gif" width="50" height="100" />
text.
</p>
</body>
</html>


CSS z-index Property
z-index 속성은 요소의 순서를 지정한다.
가장 큰 순서를 가진 요소는 항상 낮은 순서를 가진 또 다른 요소의 앞에 존재한다.
요소의 순서는 음수값을 허용한다.
Z-index는 position 속성이 정해진 요소에만 작동한다.
(상속불가)

img
{
z-index: -1
}
 
Values
auto - 순서는 그 부모(parent)와 같다.
number - 요소의 순서를 지정한다.

<!-- 스택 순서 지정 -->
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>some text.</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>some text.</p>
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

CSS Classification Properties

W3C/CSS 2006. 9. 8. 19:05
CSS classification 속성은 요소를 어떻게 보여줄지 컨트롤하고 이미지를 또다른 요소와 나타내는 것을 지정하고, 일반 위치에서 상대적으로 요소를 위치시키고, 절대값을 사용하여 요소를 위치시키고, 보이는 요소를 컨트롤하게 한다.


CSS cursor Property
cursor 속성은 요소에 포인팅했을 때 나타나는 커서의 형태를 지정한다.
(상속가능)

h2
{
cursor: crosshair
}
p
{
cursor : url("first.cur"), url("second.cur"), pointer
}

Values
url - 사용될 사용자 커서의 주소
default - 기본 커서
auto - 브라우저가 커서를 지정
crosshair - 십자선 모양의 커서
pointer - 링크를 가리키는 손모양 커서
move - 동서남북 가리키는 커서
e-resize - 동쪽을 가리키는 커서
ne-resize - 북동쪽을 가리키는 커서
nw-resize - 북서쪽을 가리키는 커서
n-resize - 북쪽을 가리키는 커서
se-resize - 남동쪽을 가리키는 커서
sw-resize - 남서쪽을 가리키는 커서
s-resize - 남쪽을 가리키는 커서
w-resize - 서쪽을 가리키는 커서
text - 텍스트를 가리키는 커서
wait - 모래시계 커서
help - 물음표 커서

<!-- 마우스 커서 변경 -->
<html>
<body>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>
</html>


CSS float Property
float 속성은 Block 이나 이미지를 좌측이나 우측에 위치 시키고 Block 이나 이미지 주변으로 텍스트를 배열하는 속성이다.
(상속불가)

img
{
float: left
}

Values
left - 그림이나 Box가 왼쪽에 배치되고, 글씨는 Box의 오른쪽으로 흐르게 된다.
right - 그림이나 Box가 오른쪽에 배치되고, 글씨는 Box의 왼쪽으로 흐르게 된다.
none - 그림이나 Box가 왼쪽으로 배치되고, 글씨는 첫줄만 Box의 오른쪽으로 흐르게 된다. 

<!-- 이미지를 텍스트 우측에 지정 -->
<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>

<body>
<p><b>float:right</b></p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>


CSS position Property
position 속성은 static, relative, absolute(fixed)로서 요소를 위치시킨다.
(상속불가)

h1
{
position:absolute;
left:100px;
top:150px;
}
 
Values
static - Default 값으로 HTML 문서의 문단에서 처럼 일반적인 내용물들의 흐름을 말한다. 상단(top)과 좌측(left) 에서의 거리를 지정할 수 없다.
relative - HTML 문서에서의 일반적인 내용물들의 흐름을 말하지만 상단과 좌측에서의 거리를 지정할 수 있다.
absolute - 자신의 상위 Box 속에서의 top, left, right, bottom 등의 절대적인 위치, 즉 변하지 않는 위치를 지정할 수 있다.

<!-- 요소의 절대 위치 지정 -->
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">absolute position</h2>
<p>some text</p>
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

CSS Dimension Properties

W3C/CSS 2006. 9. 8. 18:38
CSS dimension 속성은 요소의 가로, 세로 길이를 컨트롤하게 한다.
또한 두 라인 사이의 공백을 증가하게 한다.

CSS height Property
height 속성은 요소의 높이를 지정한다.
(상속불가)

img
{
height: 230px
}

Values
auto - 브라우저가 실제 높이를 계산한다.
length - px, cm 등으로 높이를 정의한다.
% - 포함하는 블럭의 %로 높이를 정의한다.


CSS line-height Property
line-height 속성은 줄간격을 지정한다.
(음수값 허용안함) (상속가능)

p
{
line-height: 1.4
}
p
{
line-height: 14pt
}
p
{
line-height: 140%
}
 
Values
normal - 라인 사이의 적당한 간격을 지정한다.
number - 줄간격을 지정하기 위해 현재 글꼴 크기로 늘려질 숫자를 지정한다.
length - 줄간격을 지정한다.
% - 현재 글꼴 크기의 %로 줄간격을 지정한다.

<!-- 줄간격 지정 -->
<html>
<head>
<style type="text/css">
p.small {line-height: 0.4cm}
p.big {line-height: 0.9cm}
</style>
</head>

<body>
<p>
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
</p>
</body>
</html>


CSS max-height Property
(CSS max-width Property, CSS min-height Property, CSS min-width Property)
max-height 속성은 요소의 최대높이를 지정한다.
(상속불가)

p
{
max-height: 100px
}

Values
none - 요소에 허용된 최대 높이를 제한하지 않는다.
length - 요소의 최대 높이를 정의한다.
% - 포함된 블록의 %로 요소의 최대 높이를 지정한다.
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

CSS List Properties

W3C/CSS 2006. 9. 8. 18:22
CSS list 속성은 li(list-item) 마커를 지정하게 한고, 다른 li 마커 사이에서 변경하거나, li 마커를 이미지로 지정하게 한다.


CSS list-style Property
list-style 속성은 하나의 선언으로 목록의 모든 속성을 지정하는 단축 속성이다.
(상속가능)

ul
{
list-style: disc outside
}
ol
{
list-style: decimal inside
}

Values
list-style-type | list-style-position | list-style-image
목록의 속성 지정

<!-- list-style 속성으로 전체 리스트 마커 변경 -->
<html>
<head>
<style type="text/css">
ul
{
list-style: square outside url('arrow.gif')
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>


CSS list-style-image Property
list-style-image 속성은 이미지로 li 마커를 대신한다.
이미지가 가능하지 않은 경우에 "list-style-type"을 항상 사용한다.
(상속가능)

ol
{
list-style-image: url(blueball.gif);
list-style-type: circle
}

Values
url - 이미지 경로
none - 보여질 이미지가 없음

<!-- 리스트 마커 이미지로 변경 -->
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('arrow.gif')
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>


CSS list-style-position Property
list-style-position 속성은 목록의 li 마커 위치를 잡는다.
(상속가능)

ol
{
list-style-position: inside
}

Values
inside - 마커와 텍스트를 들여쓰기 한다.
outside - 텍스트의 좌측에 마커를 유지한다.

<!-- 리스트의 들여쓰기 내어쓰기 위치 지정 -->
<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>

<body>
<p>inside</p>
<ul class="inside">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
</ul>
<p>outside</p>
<ul class="outside">
<li>Earl Grey Tea - A fine black tea</li>
<li>Jasmine Tea - A fabulous "all purpose" tea</li>
</ul>
</body>
</html>


CSS list-style-type Property
list-style-type 속성은 li 마커의 형태를 지정한다.
(어떤 브라우저는 오직 'disc' 값만 제공한다.
(상속가능)

ul
{
list-style-type: disc
}

Values
none - 마커 없음
disc - 채워진 원
circle - 원
square - 사각형
decimal - 숫자
decimal-leading-zero - 초기값 0부터 숫자 (01, 02, 03, 등.)
lower-roman - 소문자 로마체 (i, ii, iii, iv, v, 등.)
upper-roman - 대문자 로마체 (I, II, III, IV, V, 등.)
lower-alpha - 소문자 알파벳 (a, b, c, d, e, 등.)
upper-alpha - 대문자 알파벳 (A, B, C, D, E, 등.) 
lower-greek - 소문자 그리스어 (알파, 베타, 감마, 등.)
lower-latin - 소문자 라틴어 (a, b, c, d, e, 등.)
upper-latin - 대문자 라틴어 (A, B, C, D, E, 등.)

<!-- 리스트 마커 형태 변경 -->
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

CSS Padding Properties

W3C/CSS 2006. 9. 8. 18:06
CSS padding 속성은 요소의 내용과 테두리 사이에 공백을 정의한다. (음수값 허용안됨)
상단, 우측, 하단, 좌측 여백은 구별된 속성을 사용하여 독립적으로 변경될 수 있다.
단축 padding 속성은 한번에 여러면(상,하,좌,우)을 제어하기 위해 생성된다.


CSS padding Property
padding 속성은 한번의 선언으로 모든 padding 속성을 지정하는 단축 속성이다.
(음수값 허용안됨) (상속불가)

h1 {padding: 10px}
/* 여백은 상,하,좌,우 모두 10px */
h1 {padding: 10px 2%}
/* 상단과 하단 여백은 10px, 좌측과 우측 여백은 가장 가까운 요소 가로길이의 2% */
h1 {padding: 10px 2% 15px}
/* 상단 여백은 10px, 좌,우측 여백은 가장 가까운 요소 가로길이의 2%, 하단 여백은 15px */
h1 {padding: 10px 2% 15px 20px}
/* 상단 여백은 10px, 우측 여백은 2%, 하단 여백은 15px, 좌측 여백은 20px */

Values
padding-top | padding-right | padding-bottom | padding-left

<!-- 전체 여백 지정 -->
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>

<body>
<table border="1">
<tr>
<td class="test1">
1.5cm
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
0.5cm 2.5cm
</td>
</tr>
</table>
</body>
</html>


CSS padding-bottom Property
padding-bottom 속성은 요소의 하단 여백을 지정한다. (음수값 허용안됨)
(상속불가)

h1
{
padding-bottom: 10px
}

Values
length - 고정된 아래 여백을 정의한다.
% - 가장 가까운 요소의 높이의 %로 아래 여백을 정의한다.

<!-- 아래 여백 지정 -->>
<html>
<head>
<style type="text/css">
td {padding-bottom: 2cm}
</style>
</head>

<body>
<table border="1">
<tr>
<td>
some text
</td>
</tr>
</table>
</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,