html 폰트 그림자 넣기 text-shadow
■ 이번 글에서는 html에 입력한 폰트에 좀 더 입체감을 더하기 위해서 CSS 속성을 이용해 그림자를 넣는 방법을 알아보겠습니다. 이 값을 잘 조절하면 글자를 상당히 입체적으로 보이게 할 수 있습니다. 그럼 먼저 이 속성의 형식부터 볼게요.
[text-shadow: 가로거리(h-shadow), 세로거리(v-shadow), 번지는 정도(blur), 색상 값 ; ]
■ 위 형식에서 가로 거리의 값이 "+"이면 오른쪽으로 그림자가 생기고, "-"이면 왼쪽으로 생기게 됩니다. 세로 거리는 "+"일 때는 아래쪽으로, "-"일 때는 위쪽으로 생기구요. 번지는 정도는 생략할 수도 있지만, 이 값을 생략하면 전혀 번지지 않고 선명한 그림자가 생기게 됩니다. 마지막은 색상 값을 입력해주면 됩니다. 이 형식을 생각하면서 예제를 만들어서 결과를 보겠습니다.
■ 간단하게 텍스트를 입력하고 CSS 속성을 이용해서 예제를 만들어봤습니다. 그림자를 잘 보이도록 하려고 일부러 배경색과 폰트 색을 어둡게 설정해봤습니다. 웹 브라우저에서 열어볼게요.
그럼 이제 앞에서 알아본 형식을 생각하면서 속성값을 입력해보겠습니다.
■ 오른쪽으로 3px, 아래쪽으로 3px, 번짐(blur)은 일부러 "0"으로 설정했습니다. 뒤쪽에서 값을 입력해서 번지는 정도를 확인해볼게요. 그리고 그림자의 색은 노란색으로 해봤습니다.
■ 노란색 그림자가 오른쪽 아래쪽으로 생긴 걸 확인할 수 있구요. 번짐 효과(blur) 값을 넣지 않았기 때문에 번짐은 전혀 없는 상태입니다. 그럼 그림자가 위쪽 오른쪽으로 나타나게 하고 번짐값도 적당히 넣어보겠습니다.
■ 두 번째 값인 세로 방향을 "-"로 입력해서 위쪽으로 그림자가 생기도록 했구요. 번짐의 정도는 3px로 설정해봤습니다.
■ 글자의 위쪽으로 그림자의 방향이 바뀌고, 번짐 효과도 적용된 걸 확인할 수 있습니다. 이렇게 그림자의 방향과 번짐 정도를 설정할 수 있습니다. 제가 이런 쪽에는 감각이 별로 없어서 안 예쁘게 만들어졌지만, 여러분은 직접 다양한 색으로 예쁘게 만들어보세요. ^^ 수고하셨습니다.
