요소에 그림자를 추가하는 것은 매력적인 헤더를 만드는 구성 요소 중 하나입니다. 예를 들어 웹 사이트를 디자인하는 경우 모든 상단 헤더에 그림자를 추가하여 웹 페이지의 다른 헤더 텍스트와 구별되도록 헤더를 만들 수 있습니다.
이것이 CSS text-shadow 속성이 들어오는 곳입니다. text-shadow 속성을 사용하면 텍스트 요소에 그림자 효과를 추가할 수 있습니다. 이 자습서에서는 텍스트 그림자의 기본 사항과 웹 페이지의 텍스트에 그림자를 추가하기 위해 text-shadow 속성을 사용하는 방법을 예제와 함께 설명합니다.
CSS 텍스트 그림자
그림자는 웹 페이지에서 요소를 구별하는 한 가지 방법입니다. 예를 들어, 녹색 그림자가 있는 한 줄의 텍스트는 표준 검정 텍스트 줄보다 사용자의 눈을 사로잡을 가능성이 더 큽니다.
text-shadow 속성을 사용하면 CSS의 텍스트 요소 주위에 그림자를 추가할 수 있습니다. text-shadow 요소를 HTML의 헤더, 단락 텍스트 및 기타 텍스트 기반 요소에 적용할 수 있습니다.
text-shadow 속성의 기본 구문은 다음과 같습니다.
text-shadow: offset-x offset-y blur-radius color;
text-shadow 속성의 구문은 상자 기반 HTML 요소에 그림자를 적용하는 데 사용되는 box-shadow 속성의 구문과 유사합니다. CSS의 상자 그림자에 대해 자세히 알아보려면 CSS 상자 그림자에 대한 초보자 가이드를 읽어보세요.
다음은 text-shadow 속성에 대한 구문의 주요 구성 요소입니다.
- offset-x는 그림자의 수평(x축) 오프셋입니다(필수).
- offset-y는 그림자의 수직(y축) 오프셋입니다(필수).
- blur-radius는 그림자에 대한 흐림 효과의 반경입니다(선택 사항).
- color는 그림자의 색상입니다. 텍스트 그림자의 기본 색상은 검정색(선택 사항)입니다.
속성을 사용하여 고유한 텍스트 그림자를 만드는 방법을 설명하기 위해 작동 중인 text-shadow 속성의 몇 가지 예를 살펴보겠습니다. 이 튜토리얼의 목적을 위해 다음 HTML 요소를 사용할 것입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
color: lightblue;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
코드를 실행할 때 Career Karma 텍스트를 표시하는
요소가 렌더링됩니다. 화면에. 은 HTML에서 지원하는 가장 큰 헤더 요소입니다. CSS 코드는 헤더의 color 속성 값을 lightblue로 설정합니다. . 이것은 헤더가 밝은 파란색 텍스트로 표시됨을 의미합니다.
기본 텍스트 그림자
lightblue로 설정합니다. . 이것은 헤더가 밝은 파란색 텍스트로 표시됨을 의미합니다. 기본 텍스트 그림자
text-shadow 속성으로 작업할 때 지정해야 하는 필수 속성은 offset-x 및 offset-y입니다. 이 두 속성을 지정하면 가로 및 세로 그림자가 있는 텍스트를 만들 수 있습니다.
다음은 두 값이 모두 지정된 text-shadow 속성의 예입니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
코드에서 헤더에 간단한 텍스트 그림자를 적용했습니다. 이 그림자는 가로 및 세로 축 모두에서 1px만큼 오프셋됩니다. 코드 결과를 보면 텍스트 아래에 약간의 검은 그림자가 적용된 것을 볼 수 있습니다. 검은색은 그림자의 기본 색상입니다.
그림자 색상
텍스트 그림자를 디자인할 때 그림자에 대한 사용자 정의 색상을 지정하기로 결정할 수 있습니다. 바로 여기에서 color 속성이 등장합니다.
그림자가 연한 분홍색이 되기를 원한다고 가정해 보겠습니다. 다음 코드를 사용하여 그림자의 색상을 분홍색으로 변경할 수 있습니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px pink;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
코드에서 color 속성을 지정하고 값을 pink로 설정했습니다. . 이를 통해 텍스트 아래에 분홍색 그림자를 만들 수 있습니다. 첫 번째 예에서와 같이 그림자는 가로 및 세로 축 모두에서 1px만큼 오프셋됩니다.
흐릿한 그림자
text-shadow 속성은 blur-radius 속성과 함께 사용하여 흐릿한 그림자를 만들 수 있습니다.
이제 수평 및 수직 축 모두에서 3px 오프셋되고 그림자 주위에 2px 흐림 효과가 있는 그림자를 만들고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 이 그림자를 만들 수 있습니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
보시다시피 그림자는 두 축에서 3px 오프셋되고 그림자는 흐림 효과로 둘러싸여 있습니다. 흐림 효과를 강화하기 위해 blur-radius 속성 값을 높일 수 있습니다. 더 흐릿한 그림자를 원하면 사용하려는 흐림 효과에 따라 blur-radius 값을 5px 또는 10px 이상으로 설정할 수 있습니다. 이 예에서 그림자는 분홍색입니다.
여러 그림자
지금까지 text-shadow 속성을 사용하여 텍스트 블록에 하나의 그림자를 적용하는 방법에 대해 논의했습니다. 그러나 text-shadow 속성을 사용하여 텍스트 요소에 여러 그림자를 추가할 수도 있습니다.
텍스트 블록에 여러 그림자를 추가하려면 쉼표로 구분된 그림자 목록을 만들어야 합니다. 여러 텍스트 그림자를 만드는 구문은 다음과 같습니다.
text-shadow: shadowOne, shadowTwo;
각 그림자가 쉼표를 사용하여 구분되는 한 원하는 만큼 그림자를 지정할 수 있습니다. 그러나 각 그림자에 대해 지정하는 x-오프셋 및 y-오프셋 값은 시간이 지남에 따라 증가해야 합니다. 그렇지 않으면 그림자가 겹쳐서 보이지 않을 수 있습니다.
그림자는 지정된 순서대로 나타납니다. 따라서 shadowOne은 shadowTwo보다 먼저 나타납니다.
텍스트 뒤에 분홍색과 주황색 그림자가 있는 텍스트 배너를 만들고 싶다고 가정해 보겠습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink, 6px 6px 5px orange;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
코드에서 두 개의 그림자를 지정했습니다. 다음은 각 그림자에 대해 지정한 값입니다.
| 속성 이름 | 그림자 1 | 그림자 2 |
| 오프셋-x | 3픽셀 | 6픽셀 |
| 오프셋-y | 3픽셀 | 6픽셀 |
| 흐림 반경 | 2픽셀 | 5픽셀 |
| 색상 | 핑크 | 주황색 |
보시다시피 코드에서 각각 다른 값을 가진 두 개의 그림자를 만들었습니다.
결론
text-shadow 속성은 HTML의 텍스트 블록에 그림자를 추가하는 데 사용됩니다. 텍스트 그림자는 머리글 및 단락과 같은 텍스트 기반 요소에 적용할 수 있습니다.
이 자습서에서는 예제를 참조하여 텍스트 그림자의 기본 사항과 text-shadow 속성을 사용하여 사용자 지정 텍스트 그림자를 만드는 방법에 대해 설명했습니다. 이제 전문 웹 디자이너처럼 CSS 텍스트 섀도우 디자인을 시작하는 데 필요한 지식을 얻었습니다!