CSS - text
2020. 7. 27. 17:25ㆍWeb(CSS)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-</title>
<link href="text.css" rel="stylesheet">
</head>
<body>
<h1>text-로 시작하는 글자 속성</h1>
<ul>
<li>text-align 글자의 수평정렬 지정</li>
<li>text-decoration 글자의 줄들</li>
<li>text-transform 영문글자의 대소문자 지정</li>
<li>text-indent 들여쓰기 지정</li>
<li>text-shadow 글자의 그림자</li>
</ul>
<section id="sec01">
<h2>text-align 글자의 수평정렬 지정
<span>자신의 영역 내에서 컨텐츠의 정렬 방향</span> </h2>
<p class="ta01">text-align: left;<br> 글자의 수평정렬 왼쪽</p>
<p class="ta02">text-align: center;<br> 글자의 수평정렬 중앙</p>
<p class="ta03">text-align: right;<br> 글자의 수평정렬 오른쪽</p>
<p class="ta04">text-align: justify;<br> 글자의 양끝정렬
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus elit, accumsan nec tristique vel, tempus sed tortor. Quisque ultrices lectus in tincidunt malesuada. Etiam eleifend dictum velit ut semper. Nam posuere venenatis erat nec tristique. Mauris non aliquet mauris, ut volutpat eros. Phasellus tincidunt magna ac nisi blandit sagittis. Nam lectus dolor, volutpat et malesuada vitae, egestas id libero. Mauris viverra pulvinar mollis. Sed auctor, libero gravida suscipit maximus, nisi odio maximus nisi, vitae consectetur tortor neque vitae nunc. Aliquam vitae eros nec lorem eleifend blandit lobortis non diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris sollicitudin ligula ut turpis pharetra, quis mollis est pharetra.
</p>
<input type="text" value="center" class="ta02">
<input type="text" value="right" class="ta03">
<h4>p의 영역 내에서 img의 정렬</h4>
<p class="ta02"><img alt="serif" src="img/serif.gif"></p>
</section>
<section id="sec02">
<h2>text-decoration 글자의 줄들</h2>
<p class="tde01">text-decoration: overline; 글자의 줄들</p>
<p class="tde02">text-decoration: line-through; 글자의 줄들</p>
<p class="tde03">text-decoration: underline; 글자의 줄들</p>
<p class="tde04">text-decoration: none; 글자의 줄들
<a href="#">링크 걸린 글자의 줄 없애기</a>
</p>
</section>
<section id="sec03">
<h2>text-transform 영문글자의 대소문자 지정</h2>
<div class="ttr01">tExT-trAnsfORm: none; 영문글자의 대소문자 변형없음</div>
<div class="ttr02">tExT-trAnsfORm: uppercase; 영문글자의 대문자로 변형</div>
<div class="ttr03">tExT-trAnsfORm: lowercase; 영문글자의 소문자로 변형</div>
<div class="ttr04">tExT-trAnsfORm: capitalize; 영문글자의 첫글자만(단어 단위)
대문자로 변형</div>
<fieldset>
<legend>log-in</legend>
<label for="id">아이디</label><input type="text" id="id">
<label for="pwd">비밀번호</label><input type="password" id="pwd">
<button>log-in</button>
</fieldset>
</section>
<section id="sec04">
<h2>text-indent 들여쓰기 <span>첫 줄에만 적용됨</span></h2>
<p class="tin01">text-indent: 10px; 들여쓰기</p>
<p class="tin02">text-indent: 20px; 들여쓰기</p>
<p class="tin03">text-indent: 10%; 들여쓰기</p>
<p class="tin04">text-indent: 1em(현재 16px);들여쓰기</p>
<p class="tin05">text-indent: 30%; 들여쓰기</p>
<p class="tin06">text-indent: -5em; 음수값도 가능</p>
</section>
<section id="sec05">
<h2>text-shadow 글자의 그림자</h2>
</section>
</body>
</html>
@charset "UTF-8";
/* 무의미한 텍스트 생성기
https://www.lipsum.com/
http://hangul.thefrom.me/
*/
section{
border: 4px solid #999;
margin: 5em 1em;
padding: 1em;
}
section>h2{
color: #999;
}
section>h2>span{
font-size: 0.6em;
color: #aad;
vertical-align: 0.5em;
}
/* text-align 글자의 수평 정렬 */
#sec01>p{
border: 1px solid #00f;
width: 40%;
}
.ta01{
text-align: left;
}
.ta02{
text-align: center;
}
.ta03{
text-align: right;
}
.ta04{
text-align: justify;
}
#sec01 img{
width: 50px;
}
p.ta02:hover{
text-align: right;
}
#sec02>p{
color: #060;
}
.tde01{
text-decoration: overline;
}
.tde02{
text-decoration: line-through;
}
.tde03{
text-decoration: underline;
}
.tde04>a{
text-decoration: none;
font-size: 1.5em;
color: #600;
}
.tde04>a:hover {
text-decoration: underline;
color: #ea0;
}
/* text-transform 영문글자의 대소문자 지정 */
#sec03>div{
border: 1px solid #ccc;
margin: 1em 0;
}
.ttr01{
text-transform: none;
}
.ttr02{
text-transform: uppercase;
}
.ttr03{
text-transform: lowercase;
}
.ttr04{
text-transform: capitalize;
}
/* 문제 */
#sec03:hover>div{
text-transform: none;
}
#sec03>fieldset>legend{
text-transform: capitalize;}
#sec03>fieldset>button {
text-transform: uppercase;
}
/* text-indent 들여쓰기 */
#sec04>p{
background-color: #33f;
color: #fff;
}
.tin01{
text-indent: 10px;}
.tin02{
text-indent: 20px;}
.tin03{
text-indent: 10%;}
.tin04{
text-indent: 1em;}
.tin05{
text-indent: 30%;}
.tin06{
text-indent: -5em;}
/* text-shadow 글자의 그림자 */
|
cs |
text에 변화를 주는 css를 해보았다. 크게 어려운 건 없는 것 같다. 모르면 찾아보며 하면 되니깐 가벼운 마음으로 해보자!
'Web(CSS)' 카테고리의 다른 글
| CSS - padding (0) | 2020.07.27 |
|---|---|
| CSS - margin (0) | 2020.07.27 |
| CSS - font (0) | 2020.07.27 |
| CSS - basic (0) | 2020.07.27 |
| HTML -6-2 (0) | 2020.06.09 |