텍스트 음영(글자 그림자)를 설정하는 6가지 예제를 아래에서 설명하겠습니다. 텍스트 음영은 텍스트에 그림자 효과를 추가하여 텍스트를 돋보이게 만드는 데 사용됩니다.
예제 1: 기본 텍스트 음영
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 텍스트 음영 스타일 */
.text-shadow {
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
<title>기본 텍스트 음영</title>
</head>
<body>
<p class="text-shadow">텍스트 음영 예제</p>
</body>
</html>
이 예제는 기본적인 텍스트 음영을 설정합니다. text-shadow 속성을 사용하여 텍스트에 그림자 효과를 추가합니다.
예제 2: 텍스트 음영 색상 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 텍스트 음영 스타일 */
.text-shadow {
font-size: 24px;
text-shadow: 2px 2px 4px red; /* 음영 색상 변경 */
}
</style>
<title>텍스트 음영 색상 변경</title>
</head>
<body>
<p class="text-shadow">텍스트 음영 예제</p>
</body>
</html>
이 예제는 텍스트 음영의 색상을 변경합니다. text-shadow 속성 값으로 색상을 지정할 수 있습니다.
예제 3: 다중 텍스트 음영
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 텍스트 음영 스타일 */
.text-shadow {
font-size: 24px;
text-shadow: 2px 2px 4px red, -2px -2px 4px blue; /* 다중 음영 설정 */
}
</style>
<title>다중 텍스트 음영</title>
</head>
<body>
<p class="text-shadow">텍스트 음영 예제</p>
</body>
</html>
이 예제는 다중 텍스트 음영을 설정합니다. text-shadow 속성을 여러 번 사용하여 다른 그림자 효과를 추가할 수 있습니다.
예제 4: 음영 위치 조절
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 텍스트 음영 스타일 */
.text-shadow {
font-size: 24px;
text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5); /* 음영 위치 조절 */
}
</style>
<title>음영 위치 조절</title>
</head>
<body>
<p class="text-shadow">텍스트 음영 예제</p>
</body>
</html>
이 예제는 텍스트 음영의 위치를 조절합니다. text-shadow 속성의 첫 번째 값은 가로 위치, 두 번째 값은 세로 위치를 나타냅니다.
예제 5: 텍스트 음영 모두 제거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 텍스트 음영 스타일 */
.text-shadow {
font-size: 24px;
text-shadow: none; /* 모든 음영 제거 */
}
</style>
<title>텍스트 음영 제거</title>
</head>
<body>
<p class="text-shadow">텍스트 음영 예제</p>
</body>
</html>
이 예제는 모든 텍스트 음영을 제거합니다. text-shadow 속성에 none 값을 지정하면 음영이 제거됩니다.
예제 6: 텍스트 음영 모두 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 텍스트 음영 스타일 */
.text-shadow {
font-size: 24px;
text-shadow: 2px 2px 4px red, -2px -2px 4px blue; /* 다중 음영 설정 */
}
</style>
<title>텍스트 음영 적용</title>
</head>
<body>
<p class="text-shadow">텍스트 음영 예제</p>
</body>
</html>
이 예제는 모든 텍스트에 다중 음영을 적용합니다. 여러 개의 text-shadow 값을 지정하여 각 텍스트에 다른 그림자 효과를 적용할 수 있습니다.
'CSS' 카테고리의 다른 글
| 타이포그래피 스타일링: 텍스트 타이포그래피 스타일 조절. (0) | 2023.12.23 |
|---|---|
| 비디오 배경: 비디오 배경 설정. (0) | 2023.12.23 |
| 레이지 로딩: 이미지 레이지 로딩 구현. (0) | 2023.12.23 |
| 아코디언 메뉴: 아코디언 메뉴 스타일링. (0) | 2023.12.23 |
| 그리드 레이아웃: 그리드 레이아웃 스타일링. (0) | 2023.12.23 |
