반응형
text 속성
| 속성 | 설명 |
| color | 텍스트의 색상을 지정 |
| direction | 텍스트가 쓰이는 방향을 설정 |
| letter-spacing | 텍스트 내에서 문자 사이의 간격을 설정함 |
| word-spacing | 텍스트 내에서 단어 사이의 간격을 설정함 |
| text-indent | 단락의 첫 줄을 들여쓰기할지 안 할지를 설정 |
| text-align | 텍스트의 위치를 설정 |
| text-decoration | 텍스트에 효과를 설정 (밑줄, 윗줄, 가운데줄) |
| text-shadow | 텍스트에 그림자 효과를 설정 |
| text-transform | 글자를 대문자 또는 소문자로 바꾸는 설정 |
예제코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.p1{
color: fuchsia;
direction: rtl; /* 글자순서를 오른쪽부터출력되게함 */
text-transform: capitalize; /*첫 글자만 대문자로 변경 */
}
.p2{
color:green;
text-align: center; /* 가운데 정렬 */
letter-spacing: 5px; /*문자 사이 간격 조절*/
text-transform: uppercase; /* 모든 text 대문자로 변경 */
}
.p3{
color:lime;
word-spacing: 20px; /*단어 사이 간격 설정*/
text-transform: lowercase; /* 모든 text 소문자로 변경 */
}
.p4{
color:gray;
text-indent: 30px; /*들여쓰기 간격*/
text-decoration: underline; /* text 밑줄 */
}
.p5{
color: orange;
text-decoration: overline; /* tesxt 윗줄 */
}
.p6{
color: red;
text-align: center;
letter-spacing: 5px;
text-decoration: line-through;
}
</style>
</head>
<body>
<p class='p1'>[class=p1] Hello World1</p>
<p class='p2'>[class=p2] Hello World2</p>
<p class='p3'>[class=p3] Hello World3</p>
<p class='p4'>[class=p4] Hello World4</p>
<p class='p5'>[class=p5] Hello World5</p>
<p class='p6'>[class=p6] Hello World6</p>
</body>
</html>결과
[class=p1] Hello World1
[class=p2] Hello World2
[class=p3] Hello World3
[class=p4] Hello World4
[class=p5] Hello World5
[class=p6] Hello World6
반응형
'프로그래밍 언어 > CSS' 카테고리의 다른 글
| [CSS] header 영역 / main 영역 / footer 영역 (div 태그를 이용해서 나눠보기) (0) | 2021.06.10 |
|---|---|
| [CSS] div 태그를 이용해서 프레임 나누기 (0) | 2021.06.10 |
| [CSS] 링크 꾸미기 (link 속성/ a:link, a:visited, a:hover, a:active) (0) | 2021.06.10 |
| [CSS] CSS란? CCS기초, CSS적용하는 방법 (inline, internal, external) (0) | 2021.06.09 |