반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 스타일</title>
<style>
/*
텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성
none - 줄표시 없음
underline - 밑줄
overline - 윗줄
line-through - 취소선
*/
/*
텍스트의 대소 문자를 변환하는 text-transform 속성
- 한글에는 영향을 미치지 않고 영문자에만 적용
none - 변환하지 않음
capitalize - 첫번째 글자를 대문자로 변환
uppercase - 모든 글자를 대문자로 변환
lowercase - 모든 글자를 소문자로 변환
full-width - 가능한 한 모든 문자를 전각 문자(가로 세로 비율이 같은 글자)로 변환
*/
.trans1{
text-transform: capitalize;
}
.trans2{
text-transform: uppercase;
}
.trans3{
text-transform: lowercase;
}
/*
글자 간격 조절하는 letter-spacing, word-spacing 속성
letter-spacing - 글자와 글자 사이의 간격 조절
word-spacing - 단어와 단어 사이의 간격 조절
단위 - px, em 등이나 %로 크기값 조절
*/
.spacing {
letter-spacing: 0.2em;
}
.spacing2 {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<h1>text-decoration</h1>
<p style="text-decoration: none;">none</p>
<p style="text-decoration: underline;">underline</p>
<p style="text-decoration: overline;">overline</p>
<p style="text-decoration: line-through;">line-through</p>
<hr>
<p class="trans1">html</p>
<p class="trans2">css</p>
<p class="trans3">JAVASCRIPT</p>
<hr>
<p class="spacing1">CSS</p>
<p class="spacing2">CSS</p>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 2일차 position (0) | 2023.05.11 |
|---|---|
| CSS - 2일차 padding, margin (0) | 2023.05.11 |
| CSS - 1일차 list-style (0) | 2023.05.10 |
| CSS - 1일차 폰트(글자색, 텍스트정렬, 줄간격) (0) | 2023.05.10 |
| CSS 1일차 - 폰트(글꼴, 크기) (0) | 2023.05.10 |