[HTML] 텍스트 그림자 효과

안녕하세요.

 

이번 포스팅에서는 텍스트에 그림자 효과를 주는 HTML 속성값에 대하여 알아보겠습니다.

 

HTML 텍스트 그림자 효과

 

우선 아래와 같이 텍스트 그림자 효과의 예시를 만들어보았습니다.

 

텍스트 그림자 효과

 

<div style="color: black; font-size: 24px; font-weight: bold; text-shadow: 3px 4px 5px gray;">내용을 입력하세요</div>

 

위의 속성값을 사용하면 그림처럼 텍스트에 그림자 효과를 줄 수 있습니다. 텍스트에 그림자 효과를 주는 속성값은 ‘text-shadow’이며 그 외 color, font-size, font-weight는 제가 임의로 구성한 값입니다.

 

color = 글자 색상

font-size : 글자 크기

font-weight : 글자 두께

굳이 위의 속성값들을 추가하지 않아도 되며, text-shadow 속성만으로 그림자 효과를 줄 수 있습니다. text-shadow 속성은 총 4개의 값으로 구성됩니다.

 

ex) text-shadow: 3px 4px 5px gray;

 

1. 그림자 가로 거리 (3px)

- 맨 앞의 값으로 양수일 경우 텍스트의 오른쪽, 음수일 경우 텍스트의 왼쪽에 그림자가 표시됩니다.

 

2. 그림자 세로 거리 (4px)

- 두 번째 값으로 양수일 경우 텍스트의 아래쪽, 음수일 경우 텍스트의 위쪽에 그림자가 표시됩니다.

 

3. 그림자 번짐 (5px)

- 세 번째 값으로 양수일 경우 모든 방향으로 그림자가 퍼지며, 음수일 경우 모든 방향으로 그림자가 줄어드립니다.

 

4. 색상 (gray)

- 마지막 값으로 원하는 그림자 색상을 입력합니다.

 

<div style="color: black; font-size: 24px; font-weight: bold; text-shadow: 3px 4px 5px gray;">내용을 입력하세요</div>

 

위의 속성값을 본인에게 맞게 편집하여 티스토리 서식으로 저장하면 글쓰기 중에 필요할 경우 서식을 불러와서 바로 적용할 수 있습니다. 그리고 불러온 서식에서 변경이 필요한 부분들은 글쓰기 중에 HTML 편집기를 통해 속성값들을 변경해 주시면 됩니다.

 

 

방문해 주셔서 감사합니다.

 

행복한 하루 보내세요 ^^