stlye
@charset "UTF-8";
/* style.css는 수업시간 공용*/
h1 {background-color: #4ad;
border-left:12px solid #18b;
padding:5px;
color: #fff; }
section {border: 4px solid #cce;
border-radius: 30px 0 0 0 ;
/* 좌측 상단에서 시작 시계방향으로 각각 */
margin: 4em 1em;
padding: 1em; }
section>h2 {
background-color:#cce;
border-left:10px solid #aac;
padding:0.5em 0.3em;
color: #337;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text</title>
<link href="text.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>text-로 시작하는 글자 속성들</h1>
<ul>
<li>text-align: ; 글자 수평 정렬</li>
<li>text-decoration: ; 글자의 줄들</li>
<li>text-tranform: ; (영문)대소문자 변경</li>
<li>text-indent: ; 글자 들여쓰기</li>
<li>text-shadow: ; 글자의 그림자</li>
<li>text-overflow: ; 영역 밖의 글자 처리법</li>
</ul>
<section id="sec01">
<h2 style="text-align: center; ">1. text-align: ; 글자 수평 정렬</h2>
<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; 글자 수평 정lign:justify; text-align:jus렬 text-align:justify; 글자 수평 정렬
text-align:justify; text-alilign:justify; text-align:jusgn:justify; 글자 수평 정렬 글자 수평 정 text-align:justify; 글자 수평 정렬렬 text-align:justify; 글자 수평 정렬 text-align:justify; 글자 수평 정렬
text-align:ju text-align:justllign:justify; text-align:jusign:justify; text-align:jusify; 글자 수평 정렬stify; text-align:justify; 글자 수평 정렬 글자 수평 정렬
text-align:justify; 글자 수평 정lign:justify; text-align:jus렬 text-align:justify; 글자 수평 정렬
text-align:justify; text-alilign:justify; text-align:jusgn:justify; 글자 수평 정렬 글자 수평 정 text-align:justify; 글자 수평 정렬렬 text-align:justify; 글자 수평 정렬 text-align:justify; 글자 수평 정렬
text-align:ju text-align:justllign:justify; text-align:jusign:justify; text-align:jusify; 글자 수평 정렬stify; text-align:justify; 글자 수평 정렬 글자 수평 정렬
</p>
<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>
</section>
<section id="sec02">
<h2>2. text-decoration: ; 글자의 줄들</h2>
<p>text-decoration:
<span class="td01"> 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>
<p> <span class="s01">99,000원</span>
<span class="s02">sale</span>
<span class="s03"> 79,000원</span></p>
</section>
<section id="sec03">
<h2>3. text-tranform: ; (영문)대소문자 변경 </h2>
<p class="tt01">tEXt-tRanForm:loWerCase; 전체 소문자로 변경</p>
<p class="tt02">tEXt-tRanForm:upPerCase ; 전체 대문자로 변경</p>
<p class="tt03">tEXt-tRanForm:caPitaLize; 첫글자만 대문자로 변경</p>
<p class="tt04">tEXt-tRanForm:noNe; 대소문자 변경 없음</p>
</section>
<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="ti04">text-indent:50px ; 들여쓰기는 첫줄에만 적용 됨. https://www.lipsum.com/ Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi neque justo,
imperdiet eu sagittis et, laoreet non enim. Morbi consectetur
pellentesque molestie. Curabitur convallis augue non dignissim
imperdiet. Nulla eget hendrerit dolor. Duis in bibendum ligula, quis
aliquam purus. Vivamus hendrerit blandit lorem, vitae finibus tellus.
Aliquam et risus fringilla, molestie nibh non, commodo nulla. Nunc
tortor nunc, facilisis sit amet pulvinar vitae, iaculis eu lorem.
Vivamus felis nunc, consequat et odio non, consequat placerat lorem.
Mauris finibus eros a risus vestibulum imperdiet.</p>
</section>
<section id="sec05">
<h2>5. text-shadow:Xn Yn Blur color; 글자의 그림자 </h2>
<p class="ts01">text-shadow:2px 2px 4px #333; 글자의 그림자</p>
<p class="ts02">text-shadow:-2px 0 4px #333; 글자의 그림자</p>
<p class="ts03">text-shadow: 0 -2px 4px #333; 글자의 그림자</p>
<p class="ts04">text-shadow: 0 50px 0 #36a; 글자의 그림자</p>
<p class="ts05">text-shadow: 2px 2px 6px #333; 글자의 그림자</p>
<p class="ts06">text-shadow: 0 0 12px #f226b0; 글자의 그림자</p>
<p class="ts07">text-shadow: -3px -3px 8px #f226b0, 3px 3px 8px #26b0f2 ; 글자의 그림자</p>
<p class="ts08">text-shadow: ; 글자의 그림자</p>
</section>
</body>
</html>
@charset "UTF-8";
/* 1. text-align: ; 글자 수평 정렬 */
.ta01, .ta02, .ta03 {
/* 그룹선택자 A, B, C, ... 는
여러 요소를 불러 동시에 같은 스타일
지정(선택자 종류가 서로 상이해도 됨)
*/
border: 1px solid;
width: 30%;}
.ta01 {text-align: left;
color: #008;}
.ta02 {text-align: center;}
.ta03 {text-align: right;}
.ta04 {text-align: justify;}
#in-box {border: 1px solid #ccc;
text-align: center;
}
.tl {text-align: left;}
.tc {text-align: center;}
.tr {text-align: right;}
/* 2. text-decoration 글자의 줄들 */
.td01 {text-decoration: overline;}
.td02 {
text-decoration: line-through;}
.td03 {text-decoration: underline;}
.td04 {text-decoration: none;}
.td04:hover {
text-decoration: underline;
}
.s01 {font-size:14px;
text-decoration: line-through;
color: #333;}
.s02 {background-color: #f00;
border-radius:50%
/* 모서리 라운딩 */;
padding: 4px;
vertical-align:super;
font-family: cursive;
text-transform: capitalize;
color: #ff0;
}
.s03 {font-size: 24px;
font-weight: bold;
color: #f90;}
/* 3. text-tranform 대소문자 변경 */
.tt01 {text-transform: lowercase;}
.tt02 {text-transform: uppercase;}
.tt03 {text-transform: capitalize; }
.tt04 {text-transform: none;}
/* 4. text-indent 글자 들여쓰기 */
#sec04>p {border: 1px solid;}
.ti01 {text-indent: 30px;}
.ti02 {text-indent: 5%;}
.ti03 {text-indent: -3em;}
.ti04 {text-indent: 50px; }
/* 5. text-shadow 글자의 그림자 */
#sec05>p {
/*
- 자식선택자 A>B는
부모인 A요소의 바로 한단계 아래 자식 B만을 지정.
- 자손선택자 A B는
조상인 A요소의 아래에 있는 모든 자손 B를 지정.
*/
font-size: 50px;
font-weight: bold;
text-align: center; }
.ts01 {text-shadow: 2px 2px 4px #333;}
.ts02 {text-shadow: -2px 0 4px #333;}
.ts03 {text-shadow: 0 -2px 4px #333;}
.ts04 {text-shadow: 0 50px 0 #36a;}
.ts05 {text-shadow:2px 2px 6px #333;
color: #fff; }
.ts05:hover {
text-shadow:0 0 0 #fff;
transition:1.6s /* 단순한 애니효과 */; }
.ts06, .ts07 {
background-color: #000;
padding: 1.5em;}
.ts06 {text-shadow: 0 0 12px #f226b0; }
.ts06:hover {color:#f226b0;
text-shadow: 0 0 18px #f995d8;
transition:1.6s; }
.ts07 {
text-shadow:
-3px -3px 8px #f226b0, 3px 3px 8px #26b0f2;}
'⛏️ > HTML | CSS' 카테고리의 다른 글
| [CSS] 5. margin (0) | 2023.10.24 |
|---|---|
| [CSS] 4. padding (0) | 2023.10.24 |
| [CSS] 2. 폰트 (0) | 2023.09.22 |
| [CSS] 1. 기본 문법 (0) | 2023.09.22 |
| [HTML] 6. Form 태그 (0) | 2023.08.25 |
