1. 텍스트 크기 변경 (font-size):
텍스트 크기를 변경하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.text-size {
font-size: 20px;
}
</style>
</head>
<body>
<p class="text-size">이 텍스트의 크기는 20px입니다.</p>
</body>
</html>
2. 텍스트 색상 변경 (color):
텍스트의 색상을 변경하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.text-color {
color: blue;
}
</style>
</head>
<body>
<p class="text-color">이 텍스트는 파란색으로 표시됩니다.</p>
</body>
</html>
3. 폰트 스타일 변경 (font-family):
폰트 스타일을 변경하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.font-style {
font-family: 'Arial', sans-serif;
}
</style>
</head>
<body>
<p class="font-style">이 텍스트는 Arial 또는 대체로 sans-serif 폰트 스타일을 사용합니다.</p>
</body>
</html>
4. 폰트 굵기 조절 (font-weight):
폰트의 굵기를 조절하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.font-weight {
font-weight: bold;
}
</style>
</head>
<body>
<p class="font-weight">이 텍스트는 굵게 표시됩니다.</p>
</body>
</html>
5. 폰트 스타일 변경 (font-style):
폰트 스타일을 변경하여 이탤릭체로 표시하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.italic-style {
font-style: italic;
}
</style>
</head>
<body>
<p class="italic-style">이 텍스트는 이탤릭체로 표시됩니다.</p>
</body>
</html>
6. 텍스트 밑줄 추가 (text-decoration):
텍스트에 밑줄을 추가하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline">이 텍스트에는 밑줄이 그어집니다.</p>
</body>
</html>
7. 텍스트 대문자 변환 (text-transform):
텍스트를 대문자로 변환하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.uppercase {
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="uppercase">이 텍스트는 대문자로 표시됩니다.</p>
</body>
</html>
8. 줄 간격 조절 (line-height):
텍스트의 줄 간격을 조절하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.line-spacing {
line-height: 1.5;
}
</style>
</head>
<body>
<p class="line-spacing">이 텍스트의 줄 간격은 텍스트 크기의 1.5배입니다.</p>
</body>
</html>
9. 글자 간격 조절 (letter-spacing):
글자 간격을 조절하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.letter-spacing {
letter-spacing: 2px;
}
</style>
</head>
<body>
<p class="letter-spacing">이 텍스트의 글자 간격은 2px입니다.</p>
</body>
</html>
10. 텍스트 정렬 (text-align):
텍스트를 가운데 정렬하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.text-align-center {
text-align: center;
}
</style>
</head>
<body>
<p class="text-align-center">이 텍스트는 가운데 정렬됩니다.</p>
</body>
</html>
11. 텍스트 그림자 추가 (text-shadow):
텍스트에 그림자를 추가하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<p class="text-shadow">이 텍스트에 그림자가 추가되었습니다.</p>
</body>
</html>
12. 공백 처리 (white-space):
텍스트 내의 공백 문자 처리 방법을 설정하는 CSS 스타일입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.no-wrap {
white-space: nowrap;
}
</style>
</head>
<body>
<p class="no-wrap">이 텍스트 내의 공백 문자는 자동 줄 바꿈되지 않습니다.</p>
</body>
</html>
'CSS' 카테고리의 다른 글
| 글자 가운데 정렬: 텍스트를 가로로 가운데 정렬. (0) | 2023.12.23 |
|---|---|
| 배경색 변경: 요소의 배경 색상 설정 (0) | 2023.12.22 |
| CSS 플러그인 사용: 외부 CSS 라이브러리 및 플러그인을 활용하기 (0) | 2023.12.22 |
| 웹 폼 디자인: 다양한 웹 폼 스타일을 구현하기 (0) | 2023.12.22 |
| 다크 모드 지원: 웹 페이지에 다크 모드를 추가하기 (0) | 2023.12.22 |