css3 text-shadow
DESCRIPTION
TRANSCRIPT
![Page 1: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/1.jpg)
TEXT-SHADOW
In Korean
![Page 2: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/2.jpg)
CSS3의 text-shadow 속성은 지정된 텍스트 블럭에
하나 이상의 그림자를 부여합니다.
![Page 3: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/3.jpg)
브라우저 지원여부
![Page 4: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/4.jpg)
브라우저
Firefox 3.6
Firefox 4
Safari 5
Chrome 10
IE 9
Opera 11
지원 문법
text-shadow
text-shadow
text-shadow
text-shadow
no
text-shadow
![Page 5: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/5.jpg)
text-shadow 문법
![Page 6: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/6.jpg)
text-shadow 속성은 3개의 길이 값과 1개의 색 값을 사용합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
![Page 7: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/7.jpg)
길이 값은 절대단위 값과 상대단위 값을
모두 사용할 수 있습니다.
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; }
![Page 8: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/8.jpg)
수평 거리
![Page 9: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/9.jpg)
그림자의 수평거리는 첫 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
수평거리
![Page 10: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/10.jpg)
정수 값을 사용하면 그림자는 텍스트의 오른쪽에 있게 됩니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
![Page 11: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/11.jpg)
Text Text Text 정수 수평 값의 text-shadow
![Page 12: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/12.jpg)
음수 값을 사용하면 그림자는 텍스트의 왼쪽에 있게 됩니다.
.test
{
text-shadow: -10px 10px 5px #000;
}
![Page 13: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/13.jpg)
Text Text Text 음수 수평 값의 text-shadow
![Page 14: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/14.jpg)
수직 거리
![Page 15: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/15.jpg)
그림자의 수직거리는 두 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
수직 거리
![Page 16: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/16.jpg)
정수 값을 사용하면 그림자는 텍스트의 아래쪽에 있게 됩니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
![Page 17: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/17.jpg)
Text 정수 수직 값의 text-shadow
Text Text
![Page 18: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/18.jpg)
음수 값을 사용하면 그림자는 텍스트의 위쪽에 있게 됩니다.
.test
{
text-shadow: 10px -10px 5px #000;
}
![Page 19: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/19.jpg)
Text Text 음수 수직 값의 text-shadow Text
![Page 20: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/20.jpg)
흐림(blur) 정도 값
![Page 21: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/21.jpg)
흐림 정도 값은 두 번째 항목에서 지정합니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
흐림 정도 값
![Page 22: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/22.jpg)
흐림 정도 값을 "0"으로 준다면 단단한 테두리를 갖게 됩니다.
.test
{
text-shadow: 10px 10px 0 #000;
}
![Page 23: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/23.jpg)
Text Text Text 단단한 테두리의 text-shadow
![Page 24: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/24.jpg)
흐림 정도 값을 높이면 부드럽게 번지는 테두리를 갖게 됩니다.
.test
{
text-shadow: 10px 10px 10px #000;
}
![Page 25: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/25.jpg)
Text Text 부드러운 text-shadow
![Page 26: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/26.jpg)
흐림 정도 값에서는 음수 값의 사용이 불가합니다.
.test
{
text-shadow: -10px -10px 5px #000;
}
![Page 27: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/27.jpg)
색
![Page 28: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/28.jpg)
색은 길이 값의 앞 또는 뒤에 지정 할 수 있습니다.
.test
{
text-shadow: #000 10px 10px 5px;
}
![Page 29: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/29.jpg)
색은 다양한 표기방법으로 사용할 수 있습니다.
• 키워드
• 6자리 16진수 표기 • 3자리 16진수 표기
• RGB/RGBA 숫자형 표기 • RGB/RGBA 퍼센트 표기
• HSL/HSLA
![Page 30: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/30.jpg)
필수 값과 옵션 값
![Page 31: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/31.jpg)
Text-shadow는 두 개의 거리 값이 꼭 존재해야 합니다. 흐림 정도, 그림자 색 값은 옵션입니다.
.test
{
text-shadow: 10px 10px 5px #000;
}
옵션 필수
![Page 32: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/32.jpg)
흐림 정도 값이 지정되지 않았을 때는 브라우저가 값을 ’0’으로 추정하여 단단한 그림자를 그립니다.
.test
{
text-shadow: 10px 10px ? #000;
}
지정되지 않은 경우 0값 적용
![Page 33: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/33.jpg)
색 값이 지정되지 않았을 때는 브라우저 기본 값이 적용될 것입니다.
대부분의 브라우저는 텍스트의 색 값을 사용합니다.
.test
{
text-shadow: 10px 10px 5px ?;
}
지정되지 않은 경우 텍스트 색 값 적용
![Page 34: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/34.jpg)
다수의 그림자 (Multiple text-shadows)
![Page 35: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/35.jpg)
다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다.
.test
{
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
Text-shadow 1
![Page 36: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/36.jpg)
다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다.
.test
{
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
쉼표 구분자
![Page 37: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/37.jpg)
다수의 text-shadow는 쉼표를 사용하여 지정할 수 있습니다.
.test
{
text-shadow:
10px 10px 5px #000,
20px 20px 20px yellow;
}
Text-shadow 2
![Page 38: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/38.jpg)
그림자 효과는 앞에서부터 뒤로 적용됩니다. 첫 번째 그림자는 맨 위에 놓이고
다른 그림자는 뒤쪽 레이어에 놓입니다. 그림자는 텍스트 위에 덮어질 수 없습니다.
![Page 39: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/39.jpg)
Text Text
![Page 40: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/40.jpg)
Text Text Text-shadow 1
![Page 41: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/41.jpg)
Text Text Text Text-shadow 2
![Page 42: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/42.jpg)
자, 이제 가서 text-shadow를
써봅시다
![Page 43: CSS3 text-shadow](https://reader033.vdocuments.mx/reader033/viewer/2022051323/549c2094b47959bd318b4659/html5/thumbnails/43.jpg)
작성자 : 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