이미지에 그림자 효과를 적용하면 시각적으로 깊이감을 주고, 디자인을 보다 돋보이게 할 수 있습니다. CSS의 box-shadow 속성을 사용하면 다양한 그림자 스타일을 적용할 수 있습니다. 이번 글에서는 box-shadow의 기본 사용법과 다양한 응용 예제를 소개합니다.
box-shadow 기본 사용법
box-shadow 속성은 요소에 그림자를 추가하는 속성입니다.
See the Pen box-shadow 기본 사용법 by saladent (@saladent) on CodePen.
위 코드에서는 이미지에 x축 5px, y축 5px으로 그림자를 설정했으며, 블러 반경은 10px로 흐림 효과를 주었습니다. rgba(0, 0, 0, 0.5)는 반투명한 검은색을 의미합니다.
다양한 box-shadow 설정
그림자의 다양한 스타일을 적용할 수 있습니다.
See the Pen 다양한 box-shadow 설정 by saladent (@saladent) on CodePen.
다중 그림자 적용
box-shadow를 활용하여 네온 라이트 효과를 연출할 수 있습니다.
아래 예제에서는 초록색 네온 효과를 여러 단계의 그림자로 연출했습니다.
See the Pen 다중 그림자 적용 by saladent (@saladent) on CodePen.