그림자 속성
그림자 속성은 태그에 그림자를 부여합니다. 글자에 그림자를 부여하는 text-shadow 속성과 박스에 그림자를 부여하는 box-shadow 속성이 있습니다.
8.1 text-shadow 속성
text-shadow는 글자에 그림자를 부여하는 속성으로 [그림 6-33]의 형태로 값을 입력합니다.
[그림 6-33]
text-shadow: : 5px 5px 5px black
오른쪽 아래 흐림도 색상
8.2 box-shadow 속성
box-shadow는 박스에 그림자를 부여하는 속성으로 [그림 6-34]의 형태로 값을 입력합니다.
box-shadow: 5px 5px 5px black
오른쪽 아래 흐림도 색상
NOTE_ 흐림도와 색상 사이애ㅔ inset 키워드를 넣으면 그림자가 태그 안쪽에 생성됩니다. 뒤에서 살펴보는 CSS3 Generator를 사용하면 쉽게 생성할 수 있습니다.
기본 예제 6-18 글자와 박스에 그림자 생성
1. 글자에 그림자 만들기
다음 코드처럼 작성해 글자에 그림자를 생성합니다.
코드 6-49 글자에 그림자 적용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
h1 {
text-shadow: 5px 5px 5px black;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet</h1>
</body>
</html>
2. 박스에 그림자 만들기
다음 코드처럼 작성해 박스에 그림자를 생성합니다.
[코드 6-50] 박스에 그림자 적용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
div {
border: 3px solid black;
box-shadow: 10px 10px 30px black;
text-shadow: 5px 5px 5px black;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
3. 중첩 그림자 만들기
쉼표를 사용하면 여러 개의 그림자 속성을 적용할 수 있습니다. 다음 코드는 글자와 박스에 삼중 그림자를 적용합니다.
[코드 6-51] 중첩 그림자 적용
<style>
.box {
boder: 3px solid black;
box-shadow:L 10px 10px 10px black, 10px 10px 20px orange, 10px 10px 30px red;
text-shadow: 10px 10px 10px black, 10px 10px 20px orange, 10px 10px 30px red;
}
</style>
그림자 속성을 사용하는 방법을 간단하게 살펴보았습니다. 자주 사용하는 속성이지만 약간 복잡합니다. 구구단을 초등학교 4학년에 외운 저자의 기억력으로는 너무 어렵습니다.
"바보군요."
너무 어려우니 CSS3 Generator를 사용해 봅시다. CSS3 Generator 웹 사이트 (http://css3generator.com/)에 접속하면 box-shadow와 text-shadow 속성을 쉽게 생성할 수 있습니다.
왼쪽에서 원하는 형태의 스타일을 정하고 아래쪽 Yourcode에 생성된 코드를 복사해 스타일시트에 붙여 넣으면 됩니다.
"filter 스타일 속성도 함께 생성되는데 이건 뭐죠?"
인터넷 익스플로러 8이하에서도 그림자를 만들 수 있는 스타일 속성입니다. 생성되는 코드는 이넡넷 익스플로러에서만 지원하므로 별도로 설명하지 않겠습니다.
