CSS로 그림자에 흐림 효과 추가하기
요소의 그림자에 흐림(blur) 효과를 적용하려면 CSS의 box-shadow 속성을 사용합니다.
box-shadow 속성은 여러 개의 값을 받을 수 있으며, 그중 세 번째 값이 바로 흐림 반경(blur radius)입니다. 이 값이 커질수록 그림자의 경계가 부드럽게 번지면서 자연스러운 그림자 효과를 만들 수 있습니다.
예제 코드
다음 코드를 실행하면 h2 제목 요소에 흐림 효과가 적용된 초록색 그림자가 나타나는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
box-shadow: 10px 10px 7px green;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Heading Two</h2>
<p>위 제목에는 그림자 효과가 적용되어 있습니다.</p>
</body>
</html>box-shadow 값 살펴보기
예제에서 사용된 box-shadow: 10px 10px 7px green;의 각 값은 다음과 같은 의미를 가집니다.
- 10px (수평 오프셋): 그림자가 좌우로 이동하는 거리입니다. 양수면 오른쪽, 음수면 왼쪽으로 이동합니다.
- 10px (수직 오프셋): 그림자가 상하로 이동하는 거리입니다. 양수면 아래쪽, 음수면 위쪽으로 이동합니다.
- 7px (흐림 반경): 그림자의 흐림 정도를 결정합니다. 값이 0이면 경계가 선명한 그림자가 되고, 값이 커질수록 그림자가 더 넓고 부드럽게 퍼집니다.
- green (색상): 그림자의 색상을 지정합니다.
흐림 반경 값을 조절하면서 다양한 그림자 스타일을 실험해 보세요. 버튼이나 카드 UI 디자인에서 입체감을 살리고 싶을 때 특히 유용하게 활용할 수 있습니다.