워드프레스 이미지 그림자 효과 적용하기

게시글 내의 이미지에 테두리나 배경이 없어서 심심해 보이기도 하고 가독성도 떨어져 보인다. 이미지에 그림자(음영) 효과를 넣으면 이미지도 돋보이고 가독성도 향상되어 SEO(검색엔진최적화)에도 도움이 될 것이다. 이번에는 워드프레스 이미지 그림자 효과를 적용해 본다.

CSS box-shadow 속성

먼저 그림자를 추가하려면 box-shadow 속성에 대한 이해가 필요하다. box-shadow 속성은 CSS 요소에 그림자를 추가하는 속성이다.

box-shadow : 0px 5px 10px 3px rgba(0, 0, 0, 0.9);

• x offset: x좌표(수평)이동값
• y offset : y좌표(수직)이동값
• blur radius : 흐림값. 숫자가 작을수록 진하고 커질수록 흐려진다.
• spread radius : 확산값. 숫자가 커질수록 그림자가 커진다.
• color : 색상값(빨강, 녹색, 파랑, 알파). 빨강, 녹색, 파랑값의 조합으로 색상을 지정하고 알파값은 0~1이며 값이 커질수록 불투명해진다.

위와 같이 box-shadow 속성을 정의해서 원하는 효과를 내는 CSS 코드를 작성하면 된다.

CSS box-shadow 예제

원하는 그림자 효과를 정의하려면 노력이 많이 든다. 좀 더 빠른 방법이 없는지 검색을 해보니 CSS Scan 사이트에는 다양한 box-shadow 예제가 있어서 원하는 스타일을 고르고 코드를 복사할 수 있었다. 해당 사이트를 방문해서 취향에 맞는 스타일을 골라보는 것도 다소 노력을 절약할 수 있을 것 같다.

워드프레스 이미지 그림자 효과 적용

이제 코드가 다 준비되었다면 워드프레스 이미지 그림자 효과를 적용을 해보자. WP 관리자 모양>사용자정의>추가 CSS에서 코드를 붙여서 넣으면 된다. 이미지가 포함된 게시글로 이동하면 이미지에 그림자가 적용된 것을 바로 확인할 수 있다. 원하는 스타일이 나올 때까지 반복해서 코드를 수정하고 확인한다.

.wp-block-image img { 
	box-shadow : 0px 5px 10px 3px rgba(0, 0, 0, 0.9)
}

원하는 그림자 모양이 되었다면 왼쪽 상단에 공개 버튼을 클릭하여 적용한다.

마치며

워드프레스는 이것저것 신경 쓸 것이 많다. 기본환경도 훌륭하지만 좀 더 완성도 있는 사이트를 꾸미려면 추가로 설정해야 할 것이 많아 번거롭다. 그러나 한편으로는 사용자가 원하는 대로 사이트를 꾸밀 수 있기에 큰 장점이기도 하다. 워드프레스 이미지 그림자 효과를 적용하니 이미지가 돋보이고 가독성이 좋아졌다. 그림자에 이미지 효과를 적용하지 않았다면 이번에 시간을 내어 적용해 보면 좋을 것 같다.