css text-shadow 속성 이용하여 텍스트에 그림자 넣기

네 안녕하세요, 이번 포스팅에서는 css를 이용하려 텍스트에 그림자를 넣는 방법에 대하여 알아보도록 하겠습니다.

보통 이렇게 웹이나 앱을 꾸미는 사람들을 퍼블리셔라고 부릅니다.

이 분들은 주로 이러한 기능을 넣기 위해서 포토샵이나 그 외 일러스트 관련 프로그램을 많이 쓰곤 하는데,

이러한 기능을 덧붙일수록 페이지의 로딩 속도는 점점 느려집니다.

그렇기 때문에 html에서는 그러한 기능을 어느 정도 제공을 해줍니다.

그래서 그들을 이용하면 좀 더 효율적으로 제작을 할 수 있습니다.

그럼 지금부터 알아보도록 하겠습니다.

1. 텍스트에 그림자 넣기 : text-shadow 사용

우리가 웹 페이지를 만들 때 제목을 많이 꾸미곤 합니다,

그럴 때 이런 입체 효과를 많이 사용합니다.

그중 가장 대표적인 것이 바로 그림자 효과입니다.

그래서 이러한 그림자 효과를 텍스트에 어떻게 붙일 수 있는지 한 번 알아보도록 하겠습니다.

텍스트에 그림자를 넣는 프로퍼티는 text-shadow 프로퍼티를 이용합니다.

그리고 프로퍼티에 사용하는 속성 값은 이렇습니다.

h-shadow, v-shadow : 원본 텍스트와 그림자 텍스트 사이의 수평/수직 거리(필수)
blur-radius : 흐릿한 그림자를 만드는 효과(선택)
color : 그림자의 색 지정
none : 효과 없음

이러한 속성들이 존재합니다.

그리고 이 프로퍼티를 쓸 때는 이렇게 씁니다.

text-shadow : h-shadow v-shadow blur-radius color|none
/* 실제 적용 방법 */
text-shadow : 3px 3px 5px red;

이런 식으로 사용이 가능합니다.

그래서 이를 적용한 예제를 한 번 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 그림자</title>
    <style>
    div { 
        font : normal 24px verdana;
    }
    .dropText {
        text-shadow : 3px 3px;
    }
    .redText { 
        text-shadow : 3px 3px red;
    }
    .blurText {
        text-shadow : 3px 3px 5px skyBlue;
    }
    .glowEffect {
        text-shadow : 0px 0px 3px red;
    }
    .wordArtEffect { 
        color : white;
        text-shadow : 0px 0px 3px darkBlue;
    }
    .threeDEffect { 
        color : white;
        text-shadow : 2px 2px 4px black;
    }
    .multiEffect {  /* 3개의 효과 동시 적용 */
        color : yellow;
        text-shadow : 2px 2px 2px black, 
                   0 0 25px blue,
                   0 0 5px darkblue;
    }
    </style>
</head>
<body>
    <h3>텍스트 그림자 만들기</h3>
    <hr>
    <div class="dropText">Drop Shadow</div>
    <div class="redText">Color Shadow</div>
    <div class="blurText">Blur Shadow</div>
    <div class="glowEffect">Glow Effect</div>
    <div class="wordArtEffect">WordArt Effect</div>
    <div class="threeDEffect">3D Effect</div>
    <div class="multiEffect">Multiple Shadow Effect</div>
</body>
</html>

제가 여러 가지 클래스를 만들어서 각각의 div 태그에 클래스를 지정하여 만들었습니다.

그럼 결과 화면은 어떻게 나왔을까요?
한 번 같이 보시죠.

이렇게 각각의 글자들에 text-shadow 프로퍼티들이 잘 적용이 된 것을 보실 수가 있습니다.

여기까지 텍스트에 그림자를 넣는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 박스에 그림자를 넣는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css cursor 프로퍼티로 마우스 커서 제어하기 (0)	2023.04.03
css box-shadow 속성 이용하여 박스에 그림자 넣기 (0)	2023.04.03
css background 단축 프로퍼티 이용하여 배경 제어하기 (0)	2023.04.02
css 배경 제어 프로퍼티로 배경 제어하기 (0)	2023.04.02
css border-image 프로퍼티로 이미지 테두리 만들기 (0)	2023.04.02

개발러 L의 뻔fun한 코딩

css text-shadow 속성 이용하여 텍스트에 그림자 넣기