워드프레스 이미지 테두리에 그림자 효과 적용하는 방법

워드프레스 이미지 테두리에 그림자 효과를 넣으면 글과 이미지의 경계가 명확해져서 글을 보는 사람이 조금 더 편하게 느낄 수 있습니다. 가독성이 좋아지는 것이죠.

특히 워드프레스에 배경이 흰색인데 삽입한 이미지 배경도 흰색일 때 그 차이가 더 뚜렷해집니다. 먼저 아래 이미지 그림자 효과 변경 전과 후를 비교해 보겠습니다.

그림자 효과를 적용하는 것만으로도 이미지 경계가 명확해졌습니다. 만약 이러한 효과를 적용하지 않고 글을 캡쳐한 이미지를 올렸다면 본문 글과 섞여서 가독성이 떨어졌을 겁니다.

글 가독성을 개선하기 위해서는 이미지 여백도 중요한데요. 글과 이미지 사이의 여백 조정이 필요하신 분들은 아래 글을 읽어보시기 바랍니다.

✅ 워드프레스 이미지 위 아래 여백 조정하는 방법

자 그러면 이미지 테두리에 그림자 효과 어떻게 적용하는지에 대해서 하나씩 알아보겠습니다.

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

1) 워드프레스 메뉴에서 외모 > 추가 CSS 를 클립합니다.

2) 아래 CSS 코드를 복사 붙여넣기 하고 발행함 버튼을 누릅니다.

/* 이미지 그림자 테두리 */
.entry-content img {

box-shadow: 1px 1px 10px 3px rgba(1,10,0,0.33);
border: 0px solid rgb(228, 229, 236);
	
}
  • box-shadow : 이미지 그림자 효과
  • border : 이미지 테두리

box-shadow 속성 값을 이해하고 그림자를 조금 더 수정하고 싶다면 아래 내용을 읽어보세요.

이미지 그림자 효과 수정하기

box-shadow 속성 값은 [su_highlight]x축, y축, blur, spread, color ;[/su_highlight] 순 입니다.

그림자 속성의 x축이 양수일 경우 그림자는 오른쪽으로 보이고, 음수일 경우 그림자는 왼쪽으로 보입니다. 마찬가지로 y축도 양수는 아래쪽, 음수는 위쪽에 그림자가 위치합니다.

blur는 그림자 번짐 효과, spread는 그림자 크기, color는 그림자 색상 값입니다.

box-shadow 속성 x축, y축, blur 값을 수정한 결과입니다. 차이를 확인해 보고 원하는 그림자 효과를 적용해 보시기 바랍니다.

추가로 이제 이미지 테두리를 변경하는 법도 간단히 알아보겠습니다.

이미지 테두리 효과 적용하기

이미지 테두리 효과를 주고 싶으신 분들은 border 속성 값을 변경하면 됩니다.

여기서 사용한 border 속성 값은 [su_highlight]테두리 두께, 모양, 색상 ;[/su_highlight] 입니다.

테두리 두께는 말 그대로 이미지 테두리 두께를 조정하는 속성 값입니다.

자주 사용하는 테두리 모양에는 solid(실선), dotted(점선), double(이중실선) 등이 있습니다. 마지막으로 테두리 색상은 rgba 혹은 16진수 값을 입력하면 변경됩니다.

아래 사이트를 활용하시면 CSS 색상 값을 쉽게 확인할 수 있습니다.

https://www.hexcolortool.com/

자 그러면 위의 색상 코드를 복사해서 적용해보겠습니다.

border 속성의 테두리 두께와 색상 값을 수정한 결과입니다.

글 마치며…

오늘은 워드프레스 이미지 테두리와 그림자 효과 적용하는 방법에 대해서 알아봤습니다. CSS 코드 속성 값을 하나씩 살펴보니 그렇게 어렵지도 않은 것 같습니다.

무엇보다 한번만 CSS 코드를 수정하면 변경 사항을 모든 이미지에 적용할 수 있다는 것이 큰 장점인 것 같습니다. 그럼 오늘 알려드린 이미지 테두리 또는 그림자 효과 잘 적용하셔서 가독성 좋은 블로그 만드시길 바랍니다.

답글 남기기