본문 바로가기

마우스를 올려놓을 때 이미지에 그림자 효과주기 (CSS)

2018. 1. 31. 댓글 0

크몽이라는 사이트에서 카테고리 이미지에 마우스를 올리면 그림자 효과가 생깁니다.

위의 그림과 같이 마우스를 올려놓을 때 그림자 효과를 주려면 다음과 같은 CSS 코드를 사용할 수 있습니다.

#example:hover {
box-shadow: 1px 1px 20px #ddd;
}

기본적인 사항이지만 워드프레스 사용자모임에 이와 관련된 질문이 올라와서 여기에 공유해봅니다. 이런 간단한 효과를 위해 플러그인을 이용하는 것은 전혀 권장하지 않습니다. 플러그인 개수는 가능한 한 최소한으로 유지하는 것이 좋습니다.

box-shadow에 대해서는 https://www.w3schools.com/cssref/css3_pr_box-shadow.asp 글을 참고해보세요.

워드프레스에서 CSS는 다양한 방식으로 추가할 수 있습니다. 가급적 자식 테마를 만들어서 추가하면 좋을 것 같습니다.

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글0