BOX-SHADOW

In Korean

CSS3의 box-shadow 속성은 박스에 하나 이상의 그림자를

줄 수 있게 합니다.

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

바깥 쪽 box-shadow는 박스가 불투명한 것과 같이 그림자를 그립니다.

그림자는 border의 바깥쪽에만 그려집니다.

안 쪽 box-shadow는 박스 바깥쪽이 불투명한 것과 같이 그림자를 그립니다.

그림자는 padding영역 안쪽에만 그려집니다.

브라우저 지원

브라우저

Firefox 3.6

Firefox 4

Safari 5

Chrome 10

IE 9

Opera 11

지원하는 문법

-moz-box-shadow

box-shadow

-webkit-box-shadow

box-shadow

box-shadow

box-shadow

box-shadow 문법

Box-shadow는 색상을 위한 4개의 길이 값과

옵션인 “inset” 키워드를 허용합니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

길이 값은 상대단위 값과 절대단위 값을

모두 사용 할 수 있습니다.

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; }

수평 거리

그림자의 수평 거리는 첫 번째 항목에서 지정 합니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

수평 거리

정수 값을 사용할 경우 그림자는 박스의 오른쪽에 위치하게 됩니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

Box 정수 수평 값의 box-shadow

음수 값을 사용할 경우 그림자는 박스의 왼쪽에 위치하게 됩니다.

.test

{

box-shadow: -10px 10px 5px 5px #000 inset;

}

Box

음수 수평 값의 box-shadow

수직 거리

그림자의 수직 거리는 두 번째 항목에서 지정 합니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

수직 거리

정수 값을 사용할 경우 그림자는 박스의 아래쪽에 위치하게 됩니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

Box 정수 수직 값의 box-shadow

음수 값을 사용할 경우 그림자는 박스의 위쪽에 위치하게 됩니다.

.test

{

box-shadow: 10px -10px 5px 5px #000 inset;

}

Box 음수 수직 값의 box-shadow

흐림(blur) 정도 값

흐림 정도 값은 세 번째 항목에서 지정 합니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

흐림 정도 값

흐림 정도 값을 “0” 으로 준다면 단단한 테두리를 갖게 됩니다.

.test

{

box-shadow: 10px 10px 0 5px #000 inset;

}

Box 단단한 테두리의 box-shadow

흐림 정도 값을 높이면, 부드럽게 번지는 테두리를 갖게 됩니다.

.test

{

box-shadow: 10px 10px 10px 5px #000 inset;

}

Box 부드러운 box-shadow

흐림 정도 값에서는 음수 값의 사용이 불가합니다.

.test

{

box-shadow: -10px -10px 5px -5px #000 inset;

}

확장 거리 (Spread distance)

확장 거리 값은 네 번째 항목에서 지정 합니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

확장 거리

정수 값은 그림자를 모든 방향으로 확장되어 보이게 합니다.

(그래서 그림자는 박스보다 더 크게 보입니다.)

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

Box

정수 확장거리 값의 spread

음수 값은 그림자를 모든 방향으로 축소되어 보이게 합니다.

(그래서 그림자는 박스보다 더 작게 보입니다.)

.test

{

box-shadow: 10px 10px 5px -5px #000 inset;

}

Box

음수 확장거리 값의 spread

색

색은 다양한 다양한 방법으로 사용 할 수 있습니다.

• 키워드

• 6자리 16진수 표기 • 3자리 16진수 표기

• RGB/RGBA 숫자형 표기 • RGB/RGBA 퍼센트 표기

• HSL/HSLA

Inset 키워드

“inset” 키워드가 있는 경우, 브라우저는 박스 안쪽에 그림자를 그릴 것 입니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 inset;

}

필수 값과 옵션 값

Box-shadow는 2개의 거리값이 꼭 존재해야 합니다. 흐림정도, 확장거리, 그림자 색상과

inset 키워드는 옵션입니다.

.test

{

box-shadow: 10px 10px 5px -5px #000 inset;

}

필수 옵션

흐림 정도 값이 지정되지 않았을 때는 브라우저가 값을 ‘0’으로 추정하여

단단한 그림자를 그립니다.

.test

{

box-shadow: 10px 10px ? -5px #000 inset;

}

지정되지 않은 경우 0값 적용

확장 거리 값이 지정되지 않았을 때는 브라우저가 값을 ‘0’으로 추정하여 같은 크기의 그림자를 그립니다.

.test

{

box-shadow: 10px 10px 5px ? #000 inset;

}

지정되지 않은 경우 0값 적용

색 값이 지정되지 않았을 때는 브라우저 기본 값이 적용될 것입니다. 대부분의

브라우저는 텍스트의 색 값을 사용합니다.

Safari 5.0 와 Chrome 9.0 은 색상 값을 사용하지 않으면 그림자를 그리지 않습니다.

.test

{

box-shadow: 10px 10px 5px 5px ? inset;

}

지정되지 않은 경우 텍스트 색 값 적용

Inset 키워드가 지정되지 않았을 때는 브라우저가 inset이 아닌 것으로 추정하여

바깥 쪽으로 그림자를 그립니다.

.test

{

box-shadow: 10px 10px 5px 5px #000 ?;

}

지정되지 않은 경우 바깥 쪽 그림자 적용

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

다수의 box shadow는 쉼표를 사용하여 지정 할 수 있습니다.

.test

{

box-shadow:

10px 10px 5px #000,

20px 20px 20px yellow;

}

Box-shadow 1

다수의 box shadow는 쉼표를 사용하여 지정 할 수 있습니다.

.test

{

box-shadow:

10px 10px 5px #000,

20px 20px 20px yellow;

}

쉼표 구분자

다수의 box shadow는 쉼표를 사용하여 지정 할 수 있습니다.

.test

{

box-shadow:

10px 10px 5px #000,

20px 20px 20px yellow;

}

Box-shadow 2

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

그림자는 뒷 쪽 레이어에 놓입니다.

Box

Box-shadow 1

Box-shadow 2

box-shadow와 border-radius

box-shadow는 border-radius에 지정 된

둥근 모서리를 따라 그려질 것입니다.

자, 이제 가서 box-shadow를

써 봅시다

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