1. TEXT-SHADOW
In Korean

2. CSS3의 text-shadow 속성은
지정된 텍스트 블럭에
하나 이상의 그림자를 부여합니다.

3. 브라우저 지원여부

4. 브라우저 지원 문법
Firefox 3.6 text-shadow
Firefox 4 text-shadow
Safari 5 text-shadow
Chrome 10 text-shadow
IE 9 no
Opera 11 text-shadow

5. text-shadow 문법

6. text-shadow 속성은
3개의 길이 값과 1개의 색 값을 사용합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}

7. 길이 값은 절대단위 값과
상대단위 값을
모두 사용할 수 있습니다.
p { text-shadow: 1em 1em 1em #000; }
p { text-shadow: 2ex 2em 2em #000; }
p { text-shadow: 3px 3px 3px #000; }
p { text-shadow: 4in 4in 4in #000; }
p { text-shadow: 5cm 5cm 5cm #000; }
p { text-shadow: 6mm 6mm 6mm #000; }
p { text-shadow: 7pt 7pt 7pt #000; }
p { text-shadow: 8pc 8pc 8pc #000; }

8. 수평 거리

9. 그림자의 수평거리는
첫 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
수평거리

10. 정수 값을 사용하면 그림자는
텍스트의 오른쪽에 있게 됩니다.
.test
{
text-shadow: 10px 10px 5px #000;
}

11. Text
Text 정수 수평 값의 text-shadow

12. 음수 값을 사용하면 그림자는
텍스트의 왼쪽에 있게 됩니다.
.test
{
text-shadow: -10px 10px 5px #000;
}

13. Text
Text 음수 수평 값의 text-shadow

14. 수직 거리

15. 그림자의 수직거리는
두 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
수직 거리

16. 정수 값을 사용하면 그림자는
텍스트의 아래쪽에 있게 됩니다.
.test
{
text-shadow: 10px 10px 5px #000;
}

17. Text
Text
정수 수직 값의 text-shadow

18. 음수 값을 사용하면 그림자는
텍스트의 위쪽에 있게 됩니다.
.test
{
text-shadow: 10px -10px 5px #000;
}

19. Text
Text 음수 수직 값의 text-shadow

20. 흐림(blur) 정도 값

21. 흐림 정도 값은
두 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
흐림 정도 값

22. 흐림 정도 값을 "0"으로 준다면
단단한 테두리를 갖게 됩니다.
.test
{
text-shadow: 10px 10px 0 #000;
}

23. Text
Text 단단한 테두리의 text-shadow

24. 흐림 정도 값을 높이면
부드럽게 번지는 테두리를 갖게 됩니다.
.test
{
text-shadow: 10px 10px 10px #000;
}

25. Text
Text 부드러운 text-shadow

26. 흐림 정도 값에서는
음수 값의 사용이 불가합니다.
.test
{
text-shadow: -10px -10px 5px #000;
}

27. 색

28. 색은 길이 값의 앞 또는 뒤에
지정 할 수 있습니다.
.test
{
text-shadow: #000 10px 10px 5px;
}

29. 색은 다양한 표기방법으로
사용할 수 있습니다.
• 키워드
• 6자리 16진수 표기
• 3자리 16진수 표기
• RGB/RGBA 숫자형 표기
• RGB/RGBA 퍼센트 표기
• HSL/HSLA

30. 필수 값과 옵션 값

31. Text-shadow는
두 개의 거리 값이 꼭 존재해야 합니다.
흐림 정도, 그림자 색 값은 옵션입니다.
.test 필수 옵션
{
text-shadow: 10px 10px 5px #000;
}

32. 흐림 정도 값이 지정되지 않았을 때는
브라우저가 값을 ’0’으로 추정하여
단단한 그림자를 그립니다.
지정되지 않은 경우 0값 적용
.test
{
text-shadow: 10px 10px ? #000;
}

33. 색 값이 지정되지 않았을 때는
브라우저 기본 값이 적용될 것입니다.
대부분의 브라우저는
텍스트의 색 값을 사용합니다.
지정되지 않은 경우 텍스트 색 값 적용
.test
{
text-shadow: 10px 10px 5px ?;
}

34. 다수의 그림자
(Multiple text-shadows)

35. 다수의 text-shadow는
쉼표를 사용하여 지정할 수 있습니다.
.test
{ Text-shadow 1
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}

36. 다수의 text-shadow는
쉼표를 사용하여 지정할 수 있습니다.
.test
{
쉼표 구분자
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}

37. 다수의 text-shadow는
쉼표를 사용하여 지정할 수 있습니다.
.test
{
text-shadow: Text-shadow 2
10px 10px 5px #000,
20px 20px 20px yellow;
}

38. 그림자 효과는 앞에서부터 뒤로 적용됩니다.
첫 번째 그림자는 맨 위에 놓이고
다른 그림자는 뒤쪽 레이어에 놓입니다.
그림자는 텍스트 위에 덮어질 수 없습니다.

39. Text
Text

40. Text
Text-shadow 1

41. Text
Text
Text-shadow 2

42. 자, 이제 가서
text-shadow를
써봅시다

43. 작성자 : Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley
번역 : Toby Yun
SK communications
Site: tobyyun.com
Twitter: twitter.com/tobyyun
Slideshare: slideshare.net/headvoy