RSS 구독
이웃추가
이웃추가
오늘 소개해드릴 CSS3 속성은요, box-shadow입니다. box-shadow 는 DIV같은 박스에 그림자 효과를 주어서 입체감을 표현할 수 있도록 해주는 속성인데요. 이 속성만 잘 사용해도, 밋밋한 스킨을 좀더 세련되게 꾸밀 수 있어요.
그럼 box-shadow에 대해서 알아볼까요?
지원 브라우저
box-shadow는 IE8 이하의 브라우저를 제외한 모든 브라우저에서 지원되는 기능입니다. 아래 표를 보시죠.
CSS 문법 (Syntax)
box-shadow: none | h-shadow v-shadow blur spread color | inset | initial | inherit ;
- none box-shadow의 기본값은 "none"입니다. 즉, 기본적으로 box-shadow가 적용되지 않는다는 말이죠.
- h-shadow 가로방향의 그림자 위치(position)입니다. 음수는 좌측, 양수는 우측방향입니다.
- v-shadow 세로방향의 그림자 위치(position)입니다. 음수는 위쪽, 양수는 아랫쪽입니다.
- blur (optional) 흐릿한 효과(blur)의 길이입니다.
- spread (optional) 그림자를 확장하는 크기(size)입니다. 이 값이 클 수록 원본 그림자보다 설정값만큼 그림자가 커지며, 음수도 사용가능합니다. (음수는 그림자가 작아지겠죠?)
- color 그림자의 색상입니다.
- inset (optional) 이 속성을 설정하면, 그림자가 테두리의 안쪽으로 생깁니다.
- initial 현재 설정을 전체 HTML문서 내의 box-shadow속성의 기본값으로 설정합니다.
- inherit 현재 속성을 부모 객체로부터 상속 합니다.
이렇게만 설명드리면 감이 안오시죠? 그래서 예제를 준비했습니다.
Example
HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ex1.css">
</head>
<body>
<div class="box shadow">
</div>
</body>
</html>
CSS code
div {text-align: center;}
body {margin:auto;}
.box {
margin: 0 auto;
margin-top: 100px;
width:300px;
height: 500px;
border: 1px solid blue;
}
.shadow {
box-shadow: -60px 0px 100px -90px #000000,
60px 0px 100px -90px #000000;
}
다른 속성은 설명 안드리고, 이번 포스팅의 주제인 box-shadow 속성에 대해서만 설명 드릴게요.
box-shadow 속성이 우선 두개가 적용되었죠? 하이라이트 표시한 11번줄과 12번줄, 이렇게 두개의 그림자를 적용한 것인데요. 각 속성의 값을 설명 드리자면,
- -60px h-shadow값입니다. 값이 음수이므로 왼쪽방향 그림자가 되겠죠? 왼쪽방향으로 60px크기의 그림자가 생성됩니다.
- 0px v-shadow값입니다. 값이 0이므로 위쪽과 아래쪽 그림자는 표시하지 않습니다.
- 100px blur 값입니다. 100px넓이의 번짐효과가 추가됩니다.
- -90px spread 값입니다. 90px 크기만큼 그림자를 줄여줍니다. (음수이므로)
- #000000 color입니다. 해당 값은 검은색을 의미합니다.
두번째 설정값은 첫번째 설정과 방향만 다를 뿐, 동일한 설정입니다.
그럼 위의 코드가 어떻게 보여지는지 확인해 볼까요?
보이시나요? 가운데 파란테두리의 DIV 상자 좌우로 희미한 그림자가 있는 모습을... ^^ 이처럼, box-shadow 속성을 잘 활용하면 홈페이지를 좀더 입체감 있게 표현할 수 있답니다.
자~ 오늘 CSS 강좌는 여기까지! 다음시간에도 유익한 정보로 찾아뵐께요~ ^^
'작은설탕 IT > HTML5&CSS3' 카테고리의 다른 글
| [CSS3] 반응형웹 본문 가변폭 설정하기 - calc 함수 사용 (0) | 2016.07.27 |
|---|