HTML CSS 글자(폰트)에 테두리, 그림자 넣기

각종 태그에서 border 속성을 통해 테두리를 넣을 수 있듯이 글자에도 비슷한 속성이 있다.
text-shadow 속성인데, 이를 이용하여 그림자는 물론이고 테두리까지 넣을 수 있다.

글자 테두리 넣는 방법

<span style="text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;">
	테두리 스타일
</span>

- 각각 순서대로 왼쪽, 아래, 오른쪽, 위쪽을 그려준다.
- 'x축 position / y축 position / 색상' 혹은 '가로 위치 / 세로 위치 / 색상' 으로 이해하면 되겠다.
- 추가로, 색상 전에 픽셀 단위를 한번 더 적어서 번짐 정도를 지정할 수 있다. 아래 그림자 넣는 방법에서는 번짐도 이용한다.

글자 그림자 넣는 방법

<span style="text-shadow:1px 1px 1px #000;">
	그림자 스타일
</span>

- 똑같이 'x축 position / y축 position / 색상' 혹은 '가로 위치 / 세로 위치 / 색상' 에서 번짐 정도를 추가한 것이며 오른쪽 아래로 한쪽 방향에만 그린 것이다. 다시 말해, '가로 위치 / 세로 위치 / 번짐 정도 / 색상 순서이다.

결과

배경색과 글자 색상이 비슷하여 가독성에 문제가 생겼다.  흰색 바탕에 노란색의 경우이다.

기존 글자

기존 노란색에서 색을 더 어둡게 하였지만 만족스럽지 않았다.

테두리를 추가한 글자

테두리를 넣으니 확실히 가독성이 좋아졌다.

그림자를 추가한 글자

테두리 만큼은 아니지만 구분은 되는 것 같다.