텍스트에 그림자 효과 넣기 (text-shadow)

텍스트에 그림자 효과 넣기 (text-shadow)

텍스트에 그림자 효과를 주는 CSS 속성인 text-shadow에 대해 알아보겠습니다. text-shadow를 사용하면 텍스트에 그림자를 추가하여 3D 효과를 만들거나 더욱 독특하고 시각적으로 풍부한 텍스트 스타일링을 할 수 있습니다.

text-shadow 속성 구문

text-shadow 속성은 다음과 같은 구문을 가지고 있습니다.

text-shadow: horizontal-offset vertical-offset blur-radius color;

• horizontal-offset: 그림자의 가로 위치를 설정합니다. 양수 값은 텍스트 오른쪽 방향으로, 음수 값은 텍스트 왼쪽 방향으로 그림자를 이동시킵니다.
• vertical-offset: 그림자의 세로 위치를 설정합니다. 양수 값은 텍스트 아래 방향으로, 음수 값은 텍스트 위쪽 방향으로 그림자를 이동시킵니다.
• blur-radius: 그림자의 흐림 정도를 설정합니다. 값이 클수록 흐릿한 그림자가 생성됩니다.
• color: 그림자의 색상을 설정합니다.

text-shadow 속성 사용 예시

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

위 예시는 h2 태그에 2픽셀 오른쪽, 2픽셀 아래로 그림자를 생성하며, 그림자의 흐림 정도는 4픽셀이고 색상은 반투명한 검은색으로 지정합니다.

h3 {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

위 예시는 h3 태그에 4개의 그림자를 생성하여 센터 정렬된 동심원을 형성합니다. 그림자 색상은 모두 흰색이고, 가로/세로 위치와 흐림 정도는 각각 다르게 설정되었습니다.

마무리

text-shadow 속성을 사용하면 텍스트 스타일링에 다양한 시각적 효과를 부여할 수 있습니다. 가운데 정렬된 동심원과 같은 독특한 스타일링을 구현하거나, 3D 효과를 만들어 텍스트를 더욱 동적으로 보이게 할 수 있습니다. 적절한 가로/세로 위치, 흐림 정도, 그리고 색상을 조합하여 텍스트에 그림자 효과를 적용해 보세요.