[CSS] 텍스트 관련 스타일
컴퓨터/CSS<HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="resources/css/06.style.css" rel="stylesheet">
<title>텍스트 관련 스타일</title>
</head>
<body>
<h1>텍스트 관련 스타일</h1>
<h3>1. color : 텍스트의 색상 지정</h3>
<pre id="c">
선택자 {
color : 색상명 | 16진수 | rgb(x, x, x) | rgba(x, x, x, x(투명도)) | hsl(x, x, x) |hsla(x, x, x, x);
}
</pre>
<br>
<h3>2. text-decoration : 텍스트에 줄을 긋거나 줄을 없앨 때 사용</h3>
<pre>
선택자 {
text-decoration: none | underline | overline |line-through;
}
</pre>
<ul>
<li id="td1">텍스트 영역 위에 줄 긋기</li>
<li id="td2">텍스트 영역 중간에 줄 긋기</li>
<li id="td3">텍스트 영역 아래 줄 긋기</li>
</ul>
<a href="http://google.com" target="_blank" id="td4">구글로 이동</a>
<br><br>
<h3>3. text-transform : 영문 텍스트의 대소문자 변환 시 사용</h3>
<pre>
선택자 {
text-transform : uppercase | lowercase | capitalize;
}
</pre>
<ol>
<li id="tt1">uppercase : 모든 영문자를 대문자로</li>
<li id="tt2">LOWERCASE : 모든 영문자를 소문자로</li>
<li id="tt3">capitalize : 영문자의 first text 대문자로</li>
</ol>
<br><br>
<h3>4. text-shadow : 텍스트에 그림자 효과를 줄 때 사용</h3>
<pre>
선택자 {
text-shadow : 가로거리(x) 세로거리(y) [번짐정도] [색상];
}
</pre>
<div>
<span class="shadow" id="ts1">HTML</span><br>
<span class="shadow" id="ts2">HTML</span><br>
<span class="shadow" id="ts3">HTML</span>
</div>
<br><br>
<h3>5. text-align : 텍스트 정렬할 때 사용</h3>
<pre>
선택자 {
text-align : left(기본값) [right | justify | center];
}
</pre>
<h4>왼쪽정렬(기본값)</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio distinctio nihil labore quae consequuntur minima veritatis illum! Aliquam possimus exercitationem explicabo molestias dolores veniam rem optio sint, in vel quae.Vero iure delectus, ex ipsum distinctio voluptatem, laborum aut, adipisci nesciunt consequuntur possimus modi iste vitae. Beatae tempore voluptatem minus nobis enim, rerum quos repellat incidunt quasi magni excepturi ullam.</p>
<h4>양쪽정렬</h4>
<p id="justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam numquam in expedita iste dolorum quas, obcaecati veritatis minus delectus, amet similique explicabo aliquam architecto ex porro assumenda tempora nulla rem!Culpa, quibusdam, id ipsa non nihil pariatur ducimus accusamus natus doloribus quia corporis dignissimos obcaecati! Cum blanditiis, rem temporibus aliquid dolorum sint deserunt veritatis ut eius, maxime in obcaecati suscipit?</p>
<h4>오른쪽정렬</h4>
<p id="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quidem aliquid numquam dolores ad placeat voluptas mollitia doloremque architecto necessitatibus sequi porro nam, tenetur ea dolor! Ab eos officia quaerat.Accusantium aut cumque nobis omnis expedita iste porro saepe dicta? Quae numquam praesentium iste eos veniam eveniet quos cupiditate asperiores perspiciatis autem, enim provident minima aliquam illo, molestias quam accusamus!</p>
<h4>가운데정렬</h4>
<p id="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dignissimos amet molestiae iure hic recusandae tenetur quo! Delectus in suscipit tempora obcaecati cumque sit eveniet, dolore vitae incidunt ullam qui?Assumenda earum iure aliquid eveniet iste praesentium iusto architecto, eligendi perspiciatis dicta tempore, ad minus, delectus debitis. Officiis nesciunt sed possimus odit consectetur a eum maiores, explicabo, earum tempora est?</p>
<br><br>
<h3>6. line-height : 줄간격 조절할 때 사용</h3>
<pre>
선택자 {
line-height : nomal | px | em | %;
}
</pre>
<h4>px 고정 단위 간격</h4>
<p id="lineH1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores consequatur ipsam fugit dolore libero rem voluptates incidunt, atque dignissimos totam molestias porro quo adipisci quisquam commodi vero iure! Laboriosam, doloribus!</p>
<h4>em 가변 단위 간격</h4>
<p id="lineH2">Vero nam natus hic voluptates asperiores. Dolor dolore amet inventore maxime minima quis iure facilis architecto sequi cum ab quidem quas rerum qui esse animi at, porro recusandae, repellendus nisi!</p>
<h4>% 배율 단위 간격</h4>
<p id="lineH3">Fuga numquam magnam aliquam, inventore architecto ipsum, commodi et minima fugit suscipit accusantium provident pariatur ipsam enim omnis. Voluptates maxime ratione necessitatibus numquam doloribus aut repellat natus exercitationem nulla ullam!</p>
<div id="test">글자쓰기</div>
</body>
</html>
<CSS>
/* =================== 1. color ================= */
#c {
color: red;
color: #B5B2FF;
color: rgb(70, 65, 217);
color: rgba(70, 65, 217, 0.5); /* 0 ~ 1 사이값 : 기본값은 1(불투명) */
color: hsl(240, 50%, 50%); /* h: 색상값(0~360), s: 채도(%), l: 명도(%) */
color: hsla(240, 50%, 40%, 0.9);
}
/* =================== 2. text-decoration ================= */
#td1 {text-decoration: overline;}
#td2 {text-decoration: line-through;}
#td3 {text-decoration: underline;}
#td4 {text-decoration: none;}
/* =================== 3. text-transform ================= */
#tt1 {text-transform: uppercase;}
#tt2 {text-transform: lowercase;}
#tt3 {text-transform: capitalize;}
/* =================== 4. text-shadow ================= */
.shadow {
font-size: 50px;
font-weight: 900;
}
#ts1 {
color: red;
text-shadow: 5px 5px;
text-shadow: -5px -5px 10px rgb(243, 155, 155);
}
#ts2 {
color: white;
text-shadow: 0 0 10px yellowgreen;
text-shadow: 1px 1px 10px black;
}
#ts3 {
text-shadow: 0 0 4px gray,
0 -5px 4px yellow,
0 -10px 8px orange,
0 -15px 15px orangered,
0 -20px 20px red;
}
/* =================== 5. text-align ================= */
#justify {text-align: justify;}
#right {text-align: right;}
#center {text-align: center;}
/* =================== 6. line-height ================= */
#lineH1 {line-height: 30px;}
#lineH2 {line-height: 3em;}
#lineH3 {line-height: 200%;}
#test {
width: 200px;
height: 200px;
background-color: aquamarine;
text-align: center;
line-height: 200px; /* 세로의 글자를 가운데로 맞출 때 많이 쓴다. */
}
'컴퓨터 > CSS' 카테고리의 다른 글
| [CSS] 영역 관련 스타일 (0) | 2024.06.27 |
|---|---|
| [CSS] 목록 관련 스타일 (0) | 2024.06.27 |
| [CSS] 글꼴 관련 스타일 (0) | 2024.06.27 |
| [CSS] 선택자 우선순위 (0) | 2024.06.27 |
| [CSS] 기타 선택자 (2) | 2024.06.27 |