<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
text-decoration : overline; /* 윗줄 */
text-align: right; /*오른쪽 정렬*/
}
h2{
text-decoration :line-through; /* 취소선 */
text-align: center;
}
h3{
text-decoration: underline; /* 밑줄 */
text-align: left;
}
p.upper{
text-transform:uppercase; /* 대문자로 변환 */
letter-spacing: 10pt; /* 자간, 글자 사이의 간격 */
}
p.lower{
text-transform:lowercase; /* 소문자로 변환 */
line-height:30pt; /* 줄의 높이*/
}
p.capital{
text-transform:capitalize; /* 각 단어의 첫글자를 대문자로 변환 */
text-indent: 40px; /*들여쓰기*/
}
div.shadow{
font-size:30pt;
text-shadow: 15px 15px 30px red;
/*
text-shadow에 설정하는 값의 순서
x축 좌(-)우(+) y축 상(-)하(+) z축 번짐정도 그림자색깔
*/
}
p.text{
width:200px; border:1px solid black;
word-wrap:break-word; /* 긴 영어단어 자르기 */
}
</style>
</head>
<body>
<h1>text-decoration 예제입니다.</h1>
<h2>text-decoration 예제입니다.</h2>
<h3>text-decoration 예제입니다.</h3>
<br><hr color="red"><br>
<p class="upper">Text transForm is UpperCase</p>
<p class="lower">Text transForm is<br> lowerCase</p>
<p class="capital">Text transForm is capitalize</p>
<br><hr color="red"><br>
<div class="shadow">Text-shadow 연습</div>
<br><hr color="red"><br>
<p class="text">
영어의 경우 긴 단어가 출력될 영역을 벗어났을 때 단어를 자동으로
잘라서 줄바꿈 해주는 기능은 'word-wrap'속성에 'break-word'값을
설정하면 되고 자동 줄바꿈을 하지 않으려면 'normal'이라고 설정하
면 된다.<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
text-decoration
- overline : 윗줄
- line-through : 취소선
- underline : 아랫줄
text-transform
- uppercase : 대문자변환
- lowercase : 소문자변환
- capitalize : 각 단어의 첫글자를 대문자로 변환
text-align
- right : 오른쪽 정렬
- left : 왼쪽정렬
- center : 가운데
letter-spacing : 자간, 글자사이의 간격
line-height : 줄의 높이
text-indent : 들여쓰기
text-shadow : x축 좌(-)우(+) y축 상(-)하(+) z축 번짐정도
word-wrap : break-word ( 긴 영어단어 자르기 ) normal (자동 줄바꿈 취소)
'HtmlCss > CSS' 카테고리의 다른 글
| CSS - Overflow (영역) (0) | 2019.05.25 |
|---|---|
| Css 속성 선택자 사용 (0) | 2019.05.25 |
| CSS - text-decoration (0) | 2019.05.25 |
| CSS - list(기호) (0) | 2019.05.25 |
| CSS - opacity , visibility (0) | 2019.05.25 |