① 글자의 간격을 지정할 때(letter-spacing)
- {letter-spacing:글자간의 간격값}
- 상대적 길이 단위인 em으로 표기하면 적용하기 쉬움
- 속성값 : normal 또는 길이 단위의 수치 입력
- 예) <style type="text/css">
P {letter-spacing:0.5em ; font-size:12pt}
</style>
② 텍스트에 밑줄을 그어줄 때(text-decoration)
- {text-decoration:텍스트의 장식}
- 속성값 : none - 기본값
underline - 텍스트에 밑줄(=<u>~~~</u>)
overline - 텍스트에 윗줄
line-through - 텍스트를 관통하고 중앙에 줄(=<strike>~~~</strike>)
blink - 텍스트가 깜빡이게 설정(넷스케이프에서만 지원)
- 예) <body>
<P style="text-decoration:none">~~~</P>
<P style="text-decoration:underline">~~~</P>
<P style="text-decoration:overline">~~~</P>
<P style="text-decoration:line-through">~~~</P>
<P style="text-decoration:blink">~~~</P>
</body>
③ 텍스트를 수직정렬할 때(vertical-align)
- {vertical-align:글꼴의 수직정렬 값}
- 이미지나 글꼴의 수직정렬 설정
- 속성값 : baseline - 기본 줄에 맞춤
sup - 아래첨자
super - 윗첨자
middle - 이미지와 함께할 때 텍스트를 중앙에 맞춤
text-top - 텍스트와 함께할 때 텍스트를 맨위에 맞춤
top - 이미지와 함꼐할 때 텍스트를 맨위에 맞춤
text-bottom - 텍스트와 함께할 때 텍스트를 맨 아래에 맞춤
bottom - 이미지와 함께할 때 텍스트를 맨 밑부분에 맞춤
- 예) <style type="text/css">
P {font-size:12pt}
</style>
.....
<body>
<P>
<font style="vertical-align:sub ; color:red ; font-size:12pt">~~~</font>
</P>
</body>
④ 텍스트의 대소문자를 지정할 때(text-transform)
- {text-transform:문자열의 변환값}
- 대소문자를 변환해주는 기능(font-variant에서 확장된 속성을 가짐)
- 속성값 : capitalize - 영문자의 첫자만을 대문자로 바꾸어줌
none - 아무런 적용을 하지 않음
uppercase - 모든 영문자를 대문자로 바꾸어줌
lowercase - 모든 영문자를 소문자로 바꾸어줌
- 예) <body style="font-size:12pt">
<font style="text-transform:capitalize">~~~~~~~</font>
<font style="text-transform:none">~~~~~~~~~~</font>
<font style="text-transform:uppercase">~~~~~~</font>
<font style="text-transform:lowercase">~~~~~~~</font>
</body>
⑤ 텍스트나 이미지 옆 문자열을 정렬할 때(text-align)
- {text-align:문자열의 정렬}
- HTML의 align속성과 같은 기능. 글자나 이미지의 위치를 자유롭게 설정
- 속성값 : left
center
right
justify
- 예) <body>
<P style="text-align:left">~~~~~~~~~</P>
<P style="text-align:center">~~~~~~~</P>
<P style="text-align:right">~~~~~~~~</P>
<P style="text-align:justify">~~~~~~~</P>
</body>
⑥ 문자열의 들여쓰기를 할 때(text-indent)
- {text-indent:문자열들여쓰기}
- 속성값 : 길이의 단위 적용, %가능, 음의 값 사용 가능
- 예) <body>
<P style="text-indent:20pt">~~~~~~~~~~~~~~~~</P>
<P style="text-indent:3cm">~~~~~~~~~~~~~~~~</P>
<P style="text-indent:20%">~~~~~~~~~~~~~~~~</P>
</body>
⑦ 문서의 줄 간격을 지정할 때(line-height)
- {line-height:줄간격}
- 사용자들의 가독성을 높이기 위해 문장의 줄 간격을 설정할 때 사용
- 속성값 : normal, 길이단위, %
- 예) <body>
<P style="line-height:14pt">~~~~~~~~~~~~~~~~</P>
<P style="line-height:normal">~~~~~~~~~~~~~~~</P>
<P style="line-height:150%">~~~~~~~~~~~~~~~</P>
</body>
'Web(웹) Study > HTML & CSS' 카테고리의 다른 글
| css style 지정 순서 (0) | 2008.03.26 |
|---|---|
| 테이블의 셀내,셀간 여백 (cellPadding,cellSpacing) (0) | 2008.02.13 |
| input 박스안에 미리 지정글 넣어두고 클릭하면 사라지게하는 소스 (0) | 2008.02.13 |
| 텍스트상자에 한글로 입력이 되게 하는 자바스크립트 (0) | 2008.02.13 |
| IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기 (0) | 2008.01.11 |