CSS Text Effects
CSS Text Effects: 텍스트에 스타일과 효과를 더하는 방법
CSS Text Effects는 웹 페이지에서 텍스트를 시각적으로 더욱 매력적으로 만들고, 강조하거나 스타일을 추가할 수 있는 방법입니다. 텍스트에 다양한 효과를 적용해 디자인의 완성도를 높이고, 사용자 경험을 개선할 수 있습니다. 이 자료에서는 텍스트 그림자, 텍스트 변환, 텍스트 강조, 그라데이션 등 다양한 CSS 텍스트 효과와 그 구현 방법을 알아보겠습니다.
1. text-shadow: 텍스트 그림자 효과
text-shadow 속성은 텍스트에 그림자를 적용해 입체감과 시각적 깊이를 더할 수 있는 대표적인 효과입니다.
기본 구문
text-shadow: [x-offset] [y-offset] [blur-radius] [color];
- x-offset: 그림자의 수평 위치.
- y-offset: 그림자의 수직 위치.
- blur-radius: 그림자의 흐림 정도.
- color: 그림자의 색상.
예시: 기본 텍스트 그림자
h1 {
text-shadow: 2px 2px 4px gray;
}
이 코드는 2px 오른쪽, 2px 아래로 이동한 회색 그림자를 텍스트에 적용해 입체감을 줍니다.
예시: 반투명한 그림자
h2 {
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
- *rgba(0, 0, 0, 0.5)**는 50% 투명도를 가진 검정색 그림자를 적용해 부드럽고 자연스러운 효과를 줍니다.
예시: 다중 그림자
h3 {
text-shadow: 1px 1px 2px red, -1px -1px 2px blue;
}
이 코드는 텍스트에 빨간색과 파란색의 두 개의 그림자를 적용하여 독특한 강조 효과를 만듭니다.
2. text-transform: 텍스트 대소문자 변환
text-transform 속성은 텍스트의 대소문자를 변환하는 데 사용됩니다. 이 속성은 텍스트의 스타일을 일관되게 유지하는 데 유용합니다.
기본 구문
text-transform: none | capitalize | uppercase | lowercase;
- capitalize: 각 단어의 첫 글자를 대문자로 변환.
- uppercase: 모든 글자를 대문자로 변환.
- lowercase: 모든 글자를 소문자로 변환.
예시: 모든 글자를 대문자로 변환
p {
text-transform: uppercase;
}
이 코드는 문단의 텍스트를 모두 대문자로 변환합니다.
예시: 첫 글자만 대문자로 변환
h1 {
text-transform: capitalize;
}
이 코드는 텍스트의 각 단어 첫 글자만 대문자로 변환합니다.
3. letter-spacing 및 word-spacing: 글자와 단어 간격 조절
letter-spacing 속성은 텍스트의 각 글자 간의 간격을 조절하고, word-spacing
속성은 각 단어 간의 간격을 설정합니다.
기본 구문
letter-spacing: [value];
word-spacing: [value];
- value: 간격을 나타내는 크기(px, em 등).
예시: 글자 간격 조절
h1 {
letter-spacing: 2px;
}
이 코드는 텍스트의 각 글자 사이에 2px의 간격을 추가하여 가독성을 높입니다.
예시: 단어 간격 조절
p {
word-spacing: 10px;
}
이 코드는 문단의 각 단어 사이에 10px의 간격을 추가합니다.
4. text-decoration: 텍스트 강조 효과
text-decoration 속성은 텍스트에 밑줄, 윗줄, 취소선 등의 강조 효과를 추가할 때
사용됩니다.
기본 구문
text-decoration: none | underline | overline | line-through;
- underline: 텍스트에 밑줄을 추가.
- overline: 텍스트 위에 선을 추가.
- line-through: 텍스트에 취소선을 추가.
예시: 밑줄 추가
a {
text-decoration: underline;
}
이 코드는 링크에 밑줄을 적용하여 강조합니다.
예시: 취소선 추가
del {
text-decoration: line-through;
}
이 코드는 삭제된 텍스트에 취소선을 적용합니다.
5. text-align: 텍스트 정렬
text-align 속성은 텍스트를 수평으로 정렬할 때 사용됩니다.
기본 구문
text-align: left | right | center | justify;
- left: 텍스트를 왼쪽으로 정렬.
- right: 텍스트를 오른쪽으로 정렬.
- center: 텍스트를 가운데로 정렬.
- justify: 양쪽 끝을 맞추어 정렬.
예시: 텍스트 가운데 정렬
h2 {
text-align: center;
}
이 코드는 텍스트를 가운데 정렬합니다.
6. 그라데이션 텍스트 효과
CSS 그라데이션은 주로 배경에 사용되지만, 배경 클립 속성을 통해 텍스트에도 그라데이션 효과를 적용할 수 있습니다.
예시: 그라데이션 텍스트
h1 {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
이 코드는 텍스트에 빨간색에서 파란색으로 전환되는 그라데이션을 적용합니다. -webkit-background-clip: text는 배경을 텍스트에만
적용하고, color: transparent는 텍스트 자체의 색상을 투명하게 만듭니다.
7. 애니메이션 텍스트 효과
CSS 애니메이션을 사용해 텍스트에 생동감을 추가할 수 있습니다.
예시: 깜빡이는 텍스트
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.blink {
animation: blink 1s infinite;
}
이 코드는 깜빡이는 텍스트 효과를 만들어 텍스트가 1초 간격으로 사라졌다가 나타납니다.
예시: 텍스트 이동 애니메이션
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
.slide-text {
display: inline-block;
animation: slide 2s infinite alternate;
}
이 코드는 텍스트가 오른쪽으로 100px 이동하는 애니메이션을 무한 반복합니다.
실전 예시: CSS 텍스트 효과 적용
1. 그라데이션 텍스트와 그림자
h1 {
background: linear-gradient(to right, #f06, #4a90e2);
-webkit-background-clip: text;
color: transparent;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
이 코드는 그라데이션 텍스트에 부드러운 그림자를 적용해 입체적이고 매력적인 효과를 만듭니다.
2. 애니메이션과 그림자가 있는 텍스트
@keyframes glow {
0% { text-shadow: 0 0 10px #f06; }
100% { text-shadow: 0 0 20px #f06; }
}
.glow-text {
color: white;
animation: glow 1s infinite alternate;
}
이 코드는 글로우 효과를 적용한 텍스트가 부드럽게 빛나는 애니메이션을 만듭니다.