1. BOX-SHADOW
In Korean

2. CSS3의 box-shadow 속성은
박스에 하나 이상의 그림자를
줄 수 있게 합니다.

3. 바깥 쪽(outer) 그림자 뿐 아니라
안 쪽(inner) 그림자도 줄 수 있습니다.

4. 바깥 쪽 box-shadow는 박스가
불투명한 것과 같이 그림자를 그립니다.
그림자는 border의 바깥쪽에만 그려집니다.

5. 안 쪽 box-shadow는 박스 바깥쪽이
불투명한 것과 같이 그림자를 그립니다.
그림자는 padding영역 안쪽에만 그려집니다.

6. 브라우저 지원

7. 브라우저 지원하는 문법
Firefox 3.6 -moz-box-shadow
Firefox 4 box-shadow
Safari 5 -webkit-box-shadow
Chrome 10 box-shadow
IE 9 box-shadow
Opera 11 box-shadow

8. box-shadow 문법

9. Box-shadow는
색상을 위한 4개의 길이 값과
옵션인 “inset” 키워드를 허용합니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}

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

11. 수평 거리

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

13. 정수 값을 사용할 경우
그림자는 박스의 오른쪽에 위치하게 됩니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}

14. Box 정수 수평 값의 box-shadow

15. 음수 값을 사용할 경우
그림자는 박스의 왼쪽에 위치하게 됩니다.
.test
{
box-shadow: -10px 10px 5px 5px #000 inset;
}

16. Box
음수 수평 값의 box-shadow

17. 수직 거리

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

19. 정수 값을 사용할 경우
그림자는 박스의 아래쪽에 위치하게 됩니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}

20. Box
정수 수직 값의 box-shadow

21. 음수 값을 사용할 경우
그림자는 박스의 위쪽에 위치하게 됩니다.
.test
{
box-shadow: 10px -10px 5px 5px #000 inset;
}

22. Box 음수 수직 값의 box-shadow

23. 흐림(blur) 정도 값

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

25. 흐림 정도 값을 “0” 으로 준다면
단단한 테두리를 갖게 됩니다.
.test
{
box-shadow: 10px 10px 0 5px #000 inset;
}

26. Box
단단한 테두리의 box-shadow

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

28. Box 부드러운 box-shadow

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

30. 확장 거리
(Spread distance)

31. 확장 거리 값은
네 번째 항목에서 지정 합니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
확장 거리

32. 정수 값은 그림자를
모든 방향으로 확장되어 보이게 합니다.
(그래서 그림자는 박스보다 더 크게
보입니다.)
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}

33. Box
정수 확장거리 값의 spread

34. 음수 값은 그림자를
모든 방향으로 축소되어 보이게 합니다.
(그래서 그림자는 박스보다 더 작게 보입니다.)
.test
{
box-shadow: 10px 10px 5px -5px #000 inset;
}

35. Box
음수 확장거리 값의 spread

36. 색

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

38. Inset 키워드

39. “inset” 키워드가 있는 경우, 브라우저는
박스 안쪽에 그림자를 그릴 것 입니다.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}

40. 필수 값과 옵션 값

41. Box-shadow는
2개의 거리값이 꼭 존재해야 합니다.
흐림정도, 확장거리, 그림자 색상과
inset 키워드는 옵션입니다.
.test 필수 옵션
{
box-shadow: 10px 10px 5px -5px #000 inset;
}

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

43. 확장 거리 값이 지정되지 않았을 때는
브라우저가 값을 ‘0’으로 추정하여
같은 크기의 그림자를 그립니다.
.test 지정되지 않은 경우 0값 적용
{
box-shadow: 10px 10px 5px ? #000 inset;
}

44. 색 값이 지정되지 않았을 때는
브라우저 기본 값이 적용될 것입니다. 대부분의
브라우저는 텍스트의 색 값을 사용합니다.
Safari 5.0 와 Chrome 9.0 은 색상 값을 사용하지 않으면
그림자를 그리지 않습니다.
지정되지 않은 경우 텍스트 색 값 적용
.test
{
box-shadow: 10px 10px 5px 5px ? inset;
}

45. Inset 키워드가 지정되지 않았을 때는
브라우저가 inset이 아닌 것으로 추정하여
바깥 쪽으로 그림자를 그립니다.
지정되지 않은 경우 바깥 쪽 그림자 적용
.test
{
box-shadow: 10px 10px 5px 5px #000 ?;
}

46. 다수의 그림자
(Multiple box-shadows)

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

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

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

50. 그림자 효과는 앞에서 부터 뒤로 적용됩니다.
첫 번째 그림자는 맨 위에 놓이고 다른
그림자는 뒷 쪽 레이어에 놓입니다.

51. Box

52. Box-shadow 1

53. Box-shadow 2

54. box-shadow와
border-radius

55. box-shadow는
border-radius에 지정 된
둥근 모서리를 따라 그려질 것입니다.

56. 자, 이제 가서
box-shadow를
써 봅시다

57. 작성자 : 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