- text-align:글자 수평 정렬
- text-decoration: 글자의 줄들
- text-indent: ; (영문)대소문자 변환
- text-overflow: ; 글자 들여쓰기
- text-shadow: ; 글자의 그림자
- text-transform: ; 영역밖의 글자 처리법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text</title>
<link href="text.css" rel="stylesheet">
</head>
<body>
<section>
<h2>text-로 시작하는 글자 속성들 </h2>
<ol>
<li>text-align: ; 글자 수평 정렬</li>
<li>text-decoration : ; 글자의 줄들</li>
<li>text-transform : ; (영문)대소문자 변환</li>
<li>text-indent : ; 글자 들여쓰기</li>
<li>text-shadow : ; 글자의 그림자</li>
<li>text-overflow : ; 영역밖의 글자 처리법</li>
</ol>
</section>
<section id="sec01">
<fieldset>
<legend class="h2" style="text-align: center;"> 1. text-align : ; 글자 수평 정렬</legend>
<p class="ta01">text-align : left; 글자 수평 정렬</p>
<p class="ta02">text-align : center; 글자 수평 정렬</p>
<p class="ta03">text-align : right; 글자 수평 정렬</p>
<p class="ta04">text-align : justify; 글자 수평 정렬<br>
text-align : justify; 글자 수평 정렬 text-align : justify; 글자 수평 정렬 text-align : justify; 글자 수평 정렬
text-align : justify; 글자 수평 정렬 text-align : justify; 글자 수평 정렬 text-align : justify; 글자 수평 정렬
text-align : justify; 글자 수평 정렬 text-align : justify; 글자 수평 정렬 text-align : justify; 글자 수평 정렬
text-align : justify; 글자 수평 정렬 text-align : justify; 글자 수평 정렬 text-align : justify; 글자 수평 정렬
</p>
</fieldset>
</section>
</body>
</html>
@charset "UTF-8";
section {border:4px solid #ccc;
margin : 3em 1em;
padding: 1em;
}
h2 { background-color: #ccc; color : #333; font-size: 32px; }
#sec01 {font-size: 20px;}
.h2 {
font-weight: bold; font-size: 24px;
background-color: #ccc;
color : #333;
}
/* 1. text-align : ; 글자 수평 정렬 */
.ta01 {text-align: left; color: #000080;}
.ta02 {text-align: center; color: #FF69B4;}
.ta03 {text-align: right; color: #20B2AA;}
.ta04 {text-align: justify;}
<p class="ta01">text-align:left; 글자 수평 정렬 기본 - 좌측</p>
<p class="ta02">text-align:center; 수평 중앙 정렬</p>
<p class="ta03">text-align:right; 수평 정렬 우측</p>
.ta01, .ta02, .ta03 {
border: 1px solid;
width: 300px;
}
그룹선택자 A, B, C, ...는 여러 요소를 불러 동시에 같은 스타일 지정 (선택자 종류가 서로 상이해도 됨)
<form action="test.jsp">
<input type="text" value="left" class="tl">
<input type="text" value="center" class="tc">
<input type="text" value="right" class="tr">
</form>
.tl {text-align:left;}
.tc {text-align:center;}
.tr {text-align:right;}
<form action="test.jsp">
<div id="in-box">
<input type="text" value="left" class="tl">
<input type="text" value="center" class="tc">
<input type="text" value="right" class="tr">
</div>
</form>
#in-box { text-align : center;}
2. text-decoration : 글자의 줄들
<h2> 2. text-decoration: ; 글자의 줄들</h2>
<p class="td01">text-decoration:
<span class=td01_1>overline; 글자의 윗줄</span></p>
<p class="td02">text-decoration:line-through; 글자의 취소선</p>
<p class="td03">text-decoration:underline 글자의 밑줄</p>
<p>
text-decoration: <a href="#" class="td04">none</a>; 밑줄 제거</p>
/* 2. text-decoration : 글자의 줄들 */
/* .td01 {text-decoration: overline;} */
.td01_1 {text-decoration: overline;}
.td02 {text-decoration: line-through;}
.td03 {text-decoration: underline;}
.td04 {text-decoration: none;
background-color:#0df;}
.td04:hover {text-decoration: underline;}
<p>예제<br>
<span class="s01">99,000원</span>
<span class="s02">sale</span>
<span class="s03">79,000원</span></p>
.s01 {text-decoration: line-through;}
.s02 {background-color:red; color:yellow;
/* 모서리 라운딩 50% : 타원*/
border-radius : 50%;
/* 안쪽 여백 */
padding:4px;
vertical-align: super;
font-size : 16px;
font-family: cursive;}
.s03 {font-size: 24px; font-weight: bold}
3. text-tranform: ; 대소문자 변경
<section id="sec03">
<h2> 3. text-tranform: ; 대소문자 변경</h2>
<p class="tt01">tEXt-tRanForm:lowercase; 전체 소문자변경
<p class="tt02">tEXt-tRanForm:uppercase; 전체 대문자변경
<p class="tt03">tEXt-tRanForm:capitalize; 첫글자만 대문자 변경
<!-- 첫글자만 대문자(카멜) -->
<p class="tt04">tEXt-tRanForm:none;대소문자변경
<p>예제<br>
<span class="s01">99,000원</span>
<span class="s02">sale</span>
<span class="s03">79,000원</span></p>
</section>
/* 3. text-tranform: ; 대소문자 변경 */
.tt01 {text-transform: lowercase;}
.tt02 {text-transform: uppercase;}
.tt03 {text-transform: capitalize;}
.tt04 {text-transform: none;}
.s02{text-transform: uppercase;}
4. text-indent: ; 글자 들여쓰기
Lorem Ipsum - All the facts - Lipsum generator
무의미한 텍스트 생성기
4. text-indent: ; 글자 들여쓰기
<section id="sec04">
<h2> 4. text-indent: ; 글자 들여쓰기 </h2>
<p class="ti01">text-indent:30px; 글자 들여쓰기</p>
<p class="ti02">text-indent:5%; 글자 들여쓰기</p>
<p class="ti03">text-indent:3em; 글자 들여쓰기</p>
<p class="ti03_">text-indent:-3em; 글자 들여쓰기</p>
<p class="ti04">text-indent:50px; 들여쓰기는 첫줄에만 적용됨 https://www.lipsum.com/feed/html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
fringilla dolor non libero tincidunt, sit amet ullamcorper metus
molestie. Vestibulum eu libero et ipsum pulvinar tempor nec non
lorem. Nunc quis ante in leo egestas finibus vel sed sem. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Pellentesque vel ligula felis. Cras vitae libero
vel arcu facilisis aliquam. Pellentesque lacus lorem, sollicitudin id
aliquet non, cursus in sapien. Praesent aliquam orci quis pretium
aliquam. In congue risus sit amet tortor molestie, at blandit mauris
ultrices. Nunc sit amet tortor et ipsum faucibus tincidunt.
Vestibulum iaculis vestibulum malesuada. Etiam augue tortor, pharetra
congue justo ac, imperdiet tristique ante.</p>
</section>/* 4. text-indent: ; 글자 들여쓰기 */
#sec04 >p { border: 1px solid;}
.ti01 {text-indent: 30px; }
.ti02 {text-indent: 5%; }
.ti03 {text-indent: 3em; }
.ti03_ {text-indent: -3em; }
.ti04 {text-indent: 50px; }
5. text-shadow: ; 글자 그림자
<section id="sec05">
<h2> 5. text-shadow: ; 글자 그림자 </h2>
<p class ="ts01"> text-shadow:(x)px (y)px (블러)px #색상코드; ; 글자 그림자</p>
<p class ="ts02"> text-shadow:2px 4px 4px #333; ; 글자 그림자</p>
<p class ="ts03"> text-shadow:-2px 0 4px #333; 글자 그림자</p>
<p class ="ts04"> text-shadow:0 -2px 4px #333; 글자 그림자<br></p>
<p class ="ts05"> text-shadow:0px 25px 0px #36a; 글자 그림자</p>
<p class ="ts06"> text-shadow:2px 2px 6px #333; 글자 그림자</p>
<p class ="ts07"> text-shadow:; 발광 그림자</p>
<p class ="ts08"> text-shadow:; 이중 그림자</p>
<p class ="ts09"> text - shadow</p>
</section>
/* 5. text-shadow: ; 글자 그림자 */
#sec05>p {
/*
** 자식선택자 A>B는 부모인 A요소의
바로 한단계 아래 자식 B만을 지정
** 자손선택자 A B는 조상인 A요소의
아래에 있는 모든 자손 B를 지정
*/
font-size:25px;
font-weight: bold;
text-align: center;
}
.ts01 {text-shadow: 2px 4px 4px #333;}
.ts02 {text-shadow: 2px 4px 4px #333;}
.ts03 {text-shadow: -2px 0 4px #333;}
.ts04 {text-shadow: 0 -2px 4px #333;}
.ts05 {text-shadow: 0px 25px 0px #36a;}
.ts06 {text-shadow: 2px 2px 6px #333;
color:#fff;}
/* 단순한 애니효과 */
.ts06:hover {text-shadow: 0 0 0 #fff;
transition:1.6s}
/* 발광 효과 */
.ts07, .ts08 {
background-color: #000;
padding : 1.5em;}
.ts07 {text-shadow: 0 0 12px #ffff00;}
.ts07:hover {text-shadow: 0 0 20px #ffff80;}
/* 이중그림자 */
.ts08 {
text-shadow: -3px -3px 8px #ffff00,
3px 3px 8px #ff80ff;}
.ts09 {
color:white;
background-color:black;
padding : 1.5em;
text-shadow: -3px -3px 8px #ffff00,
-5px 5px 8px #00ffff,
2px 2px 8px #8000ff,
3px 8px 8px #ff80ff;}
.ts09:hover{
color:black;
background-color: #fffcdf;
padding : 1.5em;
text-shadow: 0 0 20px #8000ff;
}
'Front End > CSS' 카테고리의 다른 글
| [CSS] Icons Reference 사용하여 html에 아이콘 추가하기 (0) | 2023.12.08 |
|---|---|
| [CSS] padding (0) | 2023.09.22 |
| [CSS] font -로 시작하는 글자 속성들 (0) | 2023.09.17 |
| [CSS] span 태그와 css 연결하기 (0) | 2023.09.17 |
| [CSS] HTML 레이아웃 요소 (0) | 2023.09.17 |
