box-shadow
- 퍼블리셔/css
- 2011. 12. 10. 06:00
CSS3에서 box-shadow 속성은 박스에 하나 이상의 그림자를 줄 수 있는것을 말합니다.
박스 안쪽에도 줄 수 있고, 바깥쪽에도 줄 수 있습니다.
바깥쪽에 줄경우 border 의 바깥쪽에만 그려지게 됩니다.
안쪽에 줄경우 padding 영역 안쪽에만 그려지게 됩니다.
브라우져 지원 여부
box-shadow의 문법은 4개의 길이값과 색상, 그리고 옵션인 inset 키워드를 허용합니다. 생략할 경우 바깥쪽으로 그림자가 그려지게 됩니다.
길이값은 상대단위 값과 절대단위 값을 모두 사용할 수 있습니다.
예: em, ex, px, in, cm, mm, pt, pc
음수값을 사용하면 왼쪽으로 이동한 위치에 그림자를 그리게 됩니다.
2. Y축 수직거리.
두번째 항목에 수직거리 값을 입력합니다.
정수를 입력하면 아래로 이동한 위치에 그림자를 그리게 됩니다.
위처럼 20px 아래로 위치한 곳에 그림자를 그리게 됩니다.
마찬가지로 음수값을 지정할 경우는 박스 위로 그림자를 그리게 됩니다.
3. 흐림(blur) 정도 값.
흐림 정도 값은 세번째 항목에서 지정합니다.
위의 경우 보이게 하기 위해 X축에 20px를 지정했습니다.
그런다음 흐림정도는 5px를 주었습니다. 이경우 오른쪽으로 5px 이동한 위치에 5px 정도 흐리게 그림자가 그려지게 됩니다.
blur 값을 0으로 주면 흐림효과가 없는 단단한 그림자를 그리게 됩니다.
값을 올리면 올릴수록 흐린 그림자가 생기게 됩니다.
흐림정도 값(blur)에는 음수값 사용이 안됩니다.
4. 확장거리(Spread distance)
확장거리값은 네번째 항목에서 지정합니다.
정수값은 그림자를 4방향 모두에 확장되어 박스보다 더 크게 보입니다.
이경우 X축에 20px, Y축에 20px를 지정해서 오른쪽과 아래로 20px씩 이동한 거리에 그림자가 위치하게 됩니다.
또한 확장거리 값으로 10px 를 지정해서 박스보다 사방으로 10px만큼 더 큰 그림자가 위치하게 됩니다.
음수값은 그림자를 4방향 모두에 축소되어 박스보다 더 작게 보입니다.
음수값으로 지정한 코드
색으로 지정할 수 있는 값은 아래와 같습니다.
6. Inset 키워드.
inset 키워드는 옵션값으로 박스 영역 안쪽에 그림자를 그리게 됩니다.
이경우 x축으로 10px 우측으로, y축으로 20px만큼 아래로 이동한 위치, 그리고 박스 안쪽(inset)위치에 그림자를 그리게 됩니다.
흐림정도는 5px정도 준 값입니다.
7. 필수값과 옵션값.
box-shadow 는 거리를 나타내는 두개의 값은 필수값이고 나머지는 옵션입니다.
박스 안쪽에도 줄 수 있고, 바깥쪽에도 줄 수 있습니다.
바깥쪽에 줄경우 border 의 바깥쪽에만 그려지게 됩니다.
안쪽에 줄경우 padding 영역 안쪽에만 그려지게 됩니다.
브라우져 지원 여부
box-shadow의 문법은 4개의 길이값과 색상, 그리고 옵션인 inset 키워드를 허용합니다. 생략할 경우 바깥쪽으로 그림자가 그려지게 됩니다.
길이값은 상대단위 값과 절대단위 값을 모두 사용할 수 있습니다.
예: em, ex, px, in, cm, mm, pt, pc
수평거리, 수직거리, 흐림정도, 확장거리 보기
1. X축 수평거리.
X축 수평거리는 첫번째 항목에서 지정합니다.
위처럼 정수를 사용하면 오른쪽으로 20px 위치한 곳에 그림자를 그리게 됩니다.
결과를 한번 볼까요??
음수값을 사용하면 왼쪽으로 이동한 위치에 그림자를 그리게 됩니다.
2. Y축 수직거리.
두번째 항목에 수직거리 값을 입력합니다.
정수를 입력하면 아래로 이동한 위치에 그림자를 그리게 됩니다.
위처럼 20px 아래로 위치한 곳에 그림자를 그리게 됩니다.
마찬가지로 음수값을 지정할 경우는 박스 위로 그림자를 그리게 됩니다.
3. 흐림(blur) 정도 값.
흐림 정도 값은 세번째 항목에서 지정합니다.
위의 경우 보이게 하기 위해 X축에 20px를 지정했습니다.
그런다음 흐림정도는 5px를 주었습니다. 이경우 오른쪽으로 5px 이동한 위치에 5px 정도 흐리게 그림자가 그려지게 됩니다.
blur 값을 0으로 주면 흐림효과가 없는 단단한 그림자를 그리게 됩니다.
값을 올리면 올릴수록 흐린 그림자가 생기게 됩니다.
흐림정도 값(blur)에는 음수값 사용이 안됩니다.
4. 확장거리(Spread distance)
확장거리값은 네번째 항목에서 지정합니다.
정수값은 그림자를 4방향 모두에 확장되어 박스보다 더 크게 보입니다.
이경우 X축에 20px, Y축에 20px를 지정해서 오른쪽과 아래로 20px씩 이동한 거리에 그림자가 위치하게 됩니다.
또한 확장거리 값으로 10px 를 지정해서 박스보다 사방으로 10px만큼 더 큰 그림자가 위치하게 됩니다.
음수값은 그림자를 4방향 모두에 축소되어 박스보다 더 작게 보입니다.
음수값으로 지정한 코드
결과는 10px 만큼 박스보다 줄어든 그림자가 보입니다.
색, Inset 키워드, 필수값과 옵션값 보기
5. 색(color).
색은 다섯번째 항목에서 지정합니다.색으로 지정할 수 있는 값은 아래와 같습니다.
- 키워드 ( 예 : green )
- 6자리 16진수 표기 ( 예 : #00ff00 )
- 3자리 16진수 표기 ( 예 : #0f0 )
- RGB/RGBA 숫자형 표기 [ 예 : rgb(0,255,0) ]
- RGB/RGBA 퍼센트형 표기 [ 예 : rgb(0%,100%,0%) ]
- HSL/HSLA [ 색상(hue), 채도(saturation), 명도(lightness), 투명도(opacity) ]
6. Inset 키워드.
inset 키워드는 옵션값으로 박스 영역 안쪽에 그림자를 그리게 됩니다.
이경우 x축으로 10px 우측으로, y축으로 20px만큼 아래로 이동한 위치, 그리고 박스 안쪽(inset)위치에 그림자를 그리게 됩니다.
흐림정도는 5px정도 준 값입니다.
7. 필수값과 옵션값.
box-shadow 는 거리를 나타내는 두개의 값은 필수값이고 나머지는 옵션입니다.
생략할 경우, 다수의 그림자, border-radius 와의 관계 보기
8. 생략할 경우.
흐림정도 값이 지정되지 않으면 기본값인 0으로 설정해서 단단한 그림자를 그림니다.
확장거리 값이 지정되지 않으면 기본값인 0으로 설정해서 박스와 같은 크기의 그림자를 그립니다.
색 값이 지정되지 않으면 브라우져 기본값으로 지정하게 됩니다.
대부분의 브라우져는 텍스트의 색 값을 사용합니다.
inset 키워드가 지정되지 않으면 inset(안쪽영역)이 아닌값으로 설정합니다. 즉 바깥쪽으로 그림자를 그리게 됩니다.
9. 다수의 그림자(Multiple box-shadows)
그림자를 여러개 지정할 경우는 컴마, 즉 쉼표 구분자를 사용해서 속성값을 여려개 지정합니다.
10. border-radius 와의 관계.
border-radius 는 둥근 모서리를 나타내는 속성입니다.
border-radius 를 지정하고 box-shadow를 지정하면 사각코너 부분이 안보이고 둥근 형태로 보이게 됩니다.
흐림정도 값이 지정되지 않으면 기본값인 0으로 설정해서 단단한 그림자를 그림니다.
확장거리 값이 지정되지 않으면 기본값인 0으로 설정해서 박스와 같은 크기의 그림자를 그립니다.
색 값이 지정되지 않으면 브라우져 기본값으로 지정하게 됩니다.
대부분의 브라우져는 텍스트의 색 값을 사용합니다.
inset 키워드가 지정되지 않으면 inset(안쪽영역)이 아닌값으로 설정합니다. 즉 바깥쪽으로 그림자를 그리게 됩니다.
9. 다수의 그림자(Multiple box-shadows)
그림자를 여러개 지정할 경우는 컴마, 즉 쉼표 구분자를 사용해서 속성값을 여려개 지정합니다.
그림자 효과는 맨먼저 지정한것이 제일 위의 레이어에 위치하고, 두번째 지정한 값은 두번째 레이이에 위치하게 됩니다.
즉 먼저 지정한것이 그림자 중에서 위쪽에 위치하게 됩니다.
위의 경우 녹색을 먼지 지정하고 파랑색을 나중에 지정했습니다.
결과를 보면 녹색이 그림자중에서 제일 위에 위치하고 파랑색은 아래에 위치하게 됩니다.
10. border-radius 와의 관계.
border-radius 는 둥근 모서리를 나타내는 속성입니다.
border-radius 를 지정하고 box-shadow를 지정하면 사각코너 부분이 안보이고 둥근 형태로 보이게 됩니다.
위의 경우 둥근 모서리와 박스 그림자를 같이 지정했습니다.
이럴때는 둥근 형태의 박스형태 그대로 그림자가 나타나게 됩니다.