CSS에서 HTML 요소에 그림자 효과를 추가하려면 box-shadow 속성을 사용합니다. 이 속성을 활용하면 요소에 입체감을 부여하거나 시각적인 강조 효과를 쉽게 만들 수 있습니다.
box-shadow 속성의 기본 문법
box-shadow 속성은 아래와 같은 값들을 순서대로 지정할 수 있습니다.
box-shadow: offset-x offset-y blur-radius spread-radius color;
- offset-x: 그림자의 가로 방향 위치 (양수는 오른쪽, 음수는 왼쪽)
- offset-y: 그림자의 세로 방향 위치 (양수는 아래쪽, 음수는 위쪽)
- blur-radius: 그림자의 흐림 정도 (선택 사항, 값이 클수록 부드러워짐)
- spread-radius: 그림자의 확장 크기 (선택 사항)
- color: 그림자 색상 (선택 사항, 기본값은 현재 글자색)
예제
다음은 div 요소에 그림자 효과를 적용하는 예제입니다.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>박스 그림자가 적용된 div 요소입니다</div>
</body>
</html>위 예제에서는 그림자가 가로 방향으로 10px, 세로 방향으로 10px 이동한 위치에 표시됩니다.
실행 결과
응용 팁
흐림 효과와 색상을 함께 지정하면 더욱 자연스러운 그림자를 만들 수 있습니다. 예를 들어 다음과 같이 작성할 수 있습니다.
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
또한 여러 개의 그림자를 쉼표로 구분하여 동시에 적용할 수도 있으며, inset 키워드를 사용하면 요소 내부에 그림자를 만들 수도 있습니다.