1. font-size
글자 크기
.text-size {
font-size: 24px;
}
2. color
글자 색
.text-color {
color: #ff6347;
}
3. font-weight
글자-두께: normal | bold
.text-thickness {
font-weight: bold;
}
4. text-decoration
글자-장식: none | underline | overline | line-through 등
.text-decoration {
text-decoration: underline;
}
5. text-align
글자-정렬: left | center | right | justify | start | end
.text-left {
text-align: left;
background-color: #f0f0f0;
}
6. line-height
줄 간격
.text-line-height {
line-height: 1.5;
}
7. letter-spacing
문자 간격
.text-spacing {
letter-spacing: 2px;
word-spacing: 4px;
}
8. text-transform
글자-변환: uppercase | lowercase | capitalize
.text-transform {
text-transform: uppercase;
}
▼ 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Styling with CSS</title>
<style>
/* 폰트 스타일 */
.font-style {
font-family: 'Arial', sans-serif; /* 폰트 패밀리 */
font-size: 20px; /* 폰트 크기 */
font-weight: bold; /* 폰트 굵기 */
font-style: italic; /* 폰트 스타일 */
}
/* 텍스트 색상 및 배경색 */
.text-color {
color: #ff5733; /* 텍스트 색상 */
background-color: #f0f0f0; /* 배경색 */
}
/* 텍스트 정렬 */
.text-align {
text-align: center; /* 중앙 정렬 */
}
/* 텍스트 데코레이션 */
.text-decoration {
text-decoration: underline; /* 밑줄 */
text-decoration-color: red; /* 밑줄 색상 */
text-decoration-style: wavy; /* 밑줄 스타일 */
}
/* 텍스트 변형 */
.text-transform {
text-transform: uppercase; /* 대문자로 변환 */
}
/* 텍스트 간격 */
.text-spacing {
letter-spacing: 2px; /* 글자 간격 */
word-spacing: 5px; /* 단어 간격 */
line-height: 1.5; /* 줄 간격 */
}
/* 텍스트 그림자 */
.text-shadow {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 텍스트 그림자 */
}
/* 여러 스타일 결합 */
.combined-style {
font-family: 'Georgia', serif;
font-size: 18px;
color: #333;
background-color: #e0e0e0;
text-align: justify;
text-decoration: line-through;
text-transform: capitalize;
letter-spacing: 1px;
word-spacing: 3px;
line-height: 1.8;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Text Styling with CSS</h1>
<p class="font-style">This text has custom font style, size, weight, and italic style.</p>
<p class="text-color">This text has a custom color and background color.</p>
<p class="text-align">This text is center aligned.</p>
<p class="text-decoration">This text has an underline with custom color and style.</p>
<p class="text-transform">This text is transformed to uppercase.</p>
<p class="text-spacing">This text has custom letter spacing, word spacing, and line height.</p>
<p class="text-shadow">This text has a shadow effect.</p>
<p class="combined-style">This text combines multiple styles for a unique appearance.</p>
</body>
</html>
▼ CSS 표준단위
| 단위 | 의미 | 예 |
| em | 배수 | font-size: 3em; /*현재 폰트의 3배*/ |
| % | 퍼센트 | font-size: 500%; /*현재 폰트의 500% 크기*/ |
| px | 픽셀 수 | font-size: 10px; /*10픽셀 크기*/ |
| cm | 센티미터 | margin-left: 5cm /*왼쪽여백 5cm*/ |
| mm | 밀리미터 | margin-left:10mm /*왼쪽여백 10mm*/ |
| in | 인치 1in = 2.54cm = 96px |
margin-left: 2in /*왼쪽여백 2인치*/ |
| pt | 포인터 1pt = 1in의 1/72 크기 |
margin-left: 20pt /*왼쪽여백 20포인트*/ |
| pc | 피카소 picas 1pc = 12pt |
font-size: 1pc /*1pc 크기의 폰트*/ |
| deg | 각도 | transfrom: rotate(20deg) /*시계방향으로 20도 회전*/ |
'FrontEnd > HTML CSS' 카테고리의 다른 글
| [Web] Web Workers (0) | 2023.09.08 |
|---|---|
| [Web] Browser : HTTP · Cookie · WebStorage (0) | 2023.09.08 |
| [Web] CSS : 색 표현 (0) | 2023.09.05 |
| [Web] CSS : Selector 선택자 (0) | 2023.09.05 |
| [Web] CSS : 상속 (0) | 2023.09.05 |
