텍스트 강조 효과를 추가한 6개의 예제를 제공하겠습니다. 각 예제는 다양한 텍스트 강조 효과를 나타내며, 주석과 함께 상세히 설명하겠습니다. 또한, HTML과 CSS를 통합하여 제공하겠습니다.
예제 1: 텍스트 그림자
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 그림자 */
.text-shadow {
font-size: 24px;
color: #3498db;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<p class="text-shadow">텍스트 그림자 효과</p>
</body>
</html>
예제 2: 텍스트 강조 선
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 강조 선 */
.text-underline {
font-size: 24px;
text-decoration: underline;
}
</style>
</head>
<body>
<p class="text-underline">텍스트 강조 선 효과</p>
</body>
</html>
예제 3: 텍스트 강조 취소선
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 강조 취소선 */
.text-line-through {
font-size: 24px;
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="text-line-through">텍스트 강조 취소선 효과</p>
</body>
</html>
예제 4: 텍스트 굵게
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 굵게 */
.text-bold {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="text-bold">텍스트 굵게 효과</p>
</body>
</html>
예제 5: 텍스트 기울임
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 기울임 */
.text-italic {
font-size: 24px;
font-style: italic;
}
</style>
</head>
<body>
<p class="text-italic">텍스트 기울임 효과</p>
</body>
</html>
예제 6: 텍스트 대문자
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트 대문자 */
.text-uppercase {
font-size: 24px;
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="text-uppercase">텍스트 대문자 변환 효과</p>
</body>
</html>
'CSS' 카테고리의 다른 글
| 그라데이션 배경: 그라데이션 배경 적용. (0) | 2023.12.23 |
|---|---|
| 라운드 코너: 요소의 모서리를 둥글게 처리. (0) | 2023.12.23 |
| 박스 그림자 효과: 박스에 그림자 효과 추가. (0) | 2023.12.23 |
| 투명도 조절: 요소의 투명도 설정. (0) | 2023.12.23 |
| 링크 스타일링: 하이퍼링크 스타일 변경. (0) | 2023.12.23 |