문단 관련 스타일

웹프로그래밍/css

zelkova 2011. 2. 13. 19:28

<목차로 돌아가기>

문자관련 스타일 정리

Property	Description
color	글자의 색상을 지정합니다.
background-color	문단 배경색상 지정하기
text-align	문장의 가로 맞춤을 설정합니다.
vertical-align	문장의 세로 맞춤을 설정합니다.
direction	텍스트 방향 / 쓰기방향을 지정합니다.
white-space	요소 내부의 공백을 처리하는 방법을 지정합니다.
text-transform	텍스트의 대문자 사용을 제어합니다.
letter-spacing	문자사이의 간격을 늘이거나 줄입니다.
word-spacing	텍스트에서 단어 사이의 간격을 늘리거나 줄입니다.
line-height	줄 높이를 설정합니다.
text-indent	텍스트 블록에서 첫 번째 줄의 들여 쓰기를 지정합니다.
text-decoration	장식을 텍스트에 추가하도록 지정합니다.
text-shadow	텍스트에 추가 된 그림자 효과를 지정합니다.
unicode-bidi	direction 속성과 함께 사용하여 동일한 문서에서 여러 언어를 지원하도록 텍스트를 재정의해야하는지 여부를 설정하거나 반환합니다.

속성	설명	값
문단 관련 스타일
text-align	수평 정렬	left,center,right,jusdtify
vertical-align	수직 정렬	baseline, top, middle, bottom, text-top, text-bottom,super,sub,실수 값+ 단위, %
line-height	행간	실수 값+단위,%
letter-spacing	자간	실수 값+단위,%
word-spacing	단어와 단어 사이의 간격	실수 값+단위,%
text-indent	들여쓰기	실수 값+단위,%
white-space	공백, 탭, 줄 바꾸기에 대한 처리	normal(자동개행),pre(pre태그효과),nowrap(자동 개행 안함)
테두리 관련 스타일
width	넓이	실수 값+단위,%,auto
height	높이	실수 값+단위,%,auto
margin	바깥쪽 여백	실수 값+단위
padding	안쪽 여백	실수 값+단위
border	테두리 두께	border:테두리두께 테두리스타일 테두리색)
위치 관련 스타일
position	표시 방법	static(기본값,지정 안 함), relative(상대 값 배치,absolute(절대값 배치,fixed(고정)
top	시작점의 수직(y)좌표	실수 값+단위,%
bottom	끝점의 수직(y)좌표	실수 값+단위,%
left	시작점의 수평(x)좌표	실수 값+단위,%
right	끝점의 수평(x)좌표	실수 값+단위,%
float	그림이나 문단 정렬	none,left,right

글자 색상 지정

H배경색을 지정하듯이 아래와 같은 형식으로 지정 가능 합니다.

결과)

문단 배경색 지정하기

결과

글자 가로 정렬하기

<!DOCTYPE html>
<html>
<head>
<style>
div.t1 { text-align: left;}
div.t2 { text-align: center;}
div.t3 { text-align: right;}
div.t4 { text-align: justify;}
</style>
</head>
<body>
<div class="t1">왼쪽정렬</div>
<div class="t2">가운데정렬</div>
<div class="t3">오른쪽정렬</div><p>
<div class="t4">
-------------아래의 글은 양쪽정렬이된 글입니다.------------<br>
아이들도 부모님들도 한자리에 모이게 되어 미니운동회를 진행했습니다. 풍선 터트리기, 밀가루 사탕 먹기, 2인 3각 등 다양한 프로그램을 통해 모두가 하나 되는 시간을 가졌습니다. 아이들은 한참을 웃고, 재잘대며 즐거운 한 때를 보냈습니다.<p>
</div>
<div>
-------------아래의 글은 양쪽정렬이 되지 않은 글입니다.------------<br>
아이들도 부모님들도 한자리에 모이게 되어 미니운동회를 진행했습니다. 풍선 터트리기, 밀가루 사탕 먹기, 2인 3각 등 다양한 프로그램을 통해 모두가 하나 되는 시간을 가졌습니다. 아이들은 한참을 웃고, 재잘대며 즐거운 한 때를 보냈습니다.
</div>
</body>
</html>

결과

글자 세로 정렬하기

text-align
top	요소의 상단은 선상에서 가장 높은 요소의 상단과 정렬됩니다.
middle	요소는 부모 요소의 중간에 배치됩니다.
bottom	요소의 아래쪽이 선상의 가장 낮은 요소와 정렬됩니다.
super	요소가 위 첨자 인 것처럼 정렬합니다.
sub	요소가 첨자 인 것처럼 정렬합니다.
baseline	요소의 기준선을 부모 요소의 기준선에 맞춥니다.
text-top	요소의 상단은 부모 요소의 글꼴의 상단과 정렬됩니다.
text-bottom	요소의 하단은 부모 요소의 글꼴의 하단과 정렬됩니다.
정수	지정된 길이만큼 요소를 올리거나 내립니다. 음수 값은 허용됩니다.
%	"line-height"속성의 백분율로 요소를 올리거나 내립니다. 음수 값은 허용됩니다.
initial	이 속성을 기본값으로 설정합니다.
inherit	이 속성을 부모 요소에서 상속받습니다. 상속에 대해 읽으십시오.

1. inline이나 inline-block 요소에만 적용됩니다.

2. 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않습니다.

3. table cell에 적용할 때는 내용에 영향을 미침니다.

4. vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬합니다.

<!DOCTYPE html>
<html>
<head>
<style>
p{
font-size:20px;
border:1px solid #ccc;
}
img.initial {
vertical-align: initial;
}
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
img.text_top {
vertical-align: text-top;
}
img.text_bottom{
vertical-align: text-bottom;
}
img.length{
vertical-align: -40px;
}
img.percent{
vertical-align: 40%;
}
</style>
</head>
<body>
<p>이건 <img class="initial" src="post_title_img.gif" width="120" height="60" />initial 속성입니다</p>
<p>이건 <img class="top" src="post_title_img.gif" width="120" height="60" />top 속성입니다</p>
<p>이건 <img class="middle" src="post_title_img.gif" width="120" height="60" />middle 속성입니다</p>
<p>이건 <img class="bottom" src="post_title_img.gif" width="120" height="60" />bottom 속성입니다</p>
<p>이건 <img class="text-top" src="post_title_img.gif" width="120" height="60" />text-top 속성입니다</p>
<p>이건 <img class="text_bottom" src="post_title_img.gif" width="120" height="60" />text_bottom 속성입니다</p>
<p>이건 <img class="length" src="post_title_img.gif" width="120" height="60" />length 속성입니다</p>
<p>이건 <img class="percent" src="post_title_img.gif" width="120" height="60" />percent 속성입니다</p>
</body>
</html>

Compile, 애터미-모바일-회원가입-후원번호-안내, onmouseover, onmouseout, 0, innerhtml, C, Java, HTML,

꿈꾸는느티나무