워드프레스 이미지 그림자 효과 및 스타일 적용 방법

다음과 같이 배경이 흰색인 이미지를 첨부하다 보면 글의 배경과 이미지의 배경색이 겹쳐져서 글의 가독성이 매우 떨어지게 되는 상황이 발생하곤 합니다. 이때 워드프레스 이미지 그림자 효과를 줄 수 있는 CSS 코드를 적용하면 테두리에 그림자 또는 외곽선 효과를 줌으로써 이미지와 텍스트를 구분지어 가독성을 향상시킬 수 있습니다.

따라서, 이번 글에서는 워드프레스에서 이미지에 그림자를 넣거나 테두리 스타일을 적용하는 방법에 대해 알아보도록 하겠습니다.

이 방법을 적용하게 되면, 가독성이 훨씬 향상되어 방문자의 이탈이 되는 것을 방지할 수 있을 겁니다.

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

워드프레스에서의 CSS 코드는 다양한 이미지, 텍스트, 레이아웃 등의 요소에 대한 디자인을 설정하고 커스터마이징할 수 있습니다. CSS코드를 이용하여 워드프레스 이미지 그림자 효과를 적용하는 법에 대해 자세히 알아봅시다.

처음에는 CSS코드를 적용하는 과정을 이해하는 것은 다소 어렵고 난해할 수 있습니다. 하지만, 한 번 각 요소와 설정에 대한 코드를 제대로 숙지해 놓는다면, 분명 유용하게 활용할 수 있을 것입니다.

일단 제가 제시하는 코드를 보시고 적용하시기 바랍니다. 그리고 제가 각 코드 용어에 대한 설명을 보시고 입맛에 맞게 코드를 수정해가며 커스텀해보시기 바랍니다.

CSS코드를 추가하는 방법은 테마별로 약간씩 다를 수 있지만, 외모 > 사용자 정의 > 추가 CSS로 들어가 코드를 작성하는 방식입니다. 저는 해당 글에서 GeneratePress 테마를 적용하였으니, 해당 테마를 기반으로 설명을 드리겠습니다. 제가 GeneratePress 테마를 이용하는 이유에 대해 설명한 글이 있으니 참고하시기 바랍니다.

GeneratePress 테마에 대해 알아보러 가기

워드프레스 이미지 그림자 효과와 테두리 효과 넣기

외부 그림자만 적용

.single .entry-content img{
box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.5);
}

위의 코드는 워드프레스 이미지에 그림자 효과만을 적용하였을 때의 코드입니다.

이미지 테두리 바깥으로 상하좌우 그림자가 생성된 모습입니다. 자 이제 코드의 내용을 자세히 분석해보도록 하겠습니다.

.single .entry-content img

• .single : 워드프레스에서 개별 포스트는 single이라는 이름의 클래스(class)가 존재합니다. 해당 클래스에 코드를 적용한다는 의미로 워드프레스에 표시되는 모든 글을 선택합니다.
• .entry-content : 워드프레스의 포스트 내용을 담고 있는 영역을 의미하는 클래스입니다. 즉, 글의 본문 영역을 선택합니다.
• img : 이미지를 의미하는 태그입니다.

종합하여 설명하면, 각 글(.single)의 본문 영역(.entry-content)에 존재하는 모든 이미지(img)를 코드 적용 대상으로 지정합니다.

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

• box-shadow : 이미지 박스의 그림자를 가리킵니다.
• 10px 10px : 여기서 첫번째 10px은 가로부분의 그림자 크기, 두번째 10px은 세로부분의 그림자 크기를 나타냅니다. 즉, 오른쪽과 왼쪽의 그림자 크기가 10px, 위와 아래의 그림자 크기가 10px이 됩니다.
• 3px : 그림자의 퍼짐 정도를 나타냅니다. 3px만큼 그림자가 퍼지게 됩니다.
• rgba(0, 0, 0, 0.4) : 그림자의 색상을 결정합니다. 첫 3개는 색상을 의미하고, 마지막 값은 투명도를 나타냅니다. 현재 설정된 그림자는 검은색에 투명도 0.4인 그림자입니다.

여기서 rpba 형식의 색상을 설정하기 어렵다면, 내가 원하는 색상을 지정하여 해당 색상에 대하 rgba값을 추출해주는 사이트가 있으니 색상 설정에 이용해보시기 바랍니다.

rgba 색상 추출 사이트 바로가기

외부 그림자와 테두리 외곽선 효과 넣기

그런데 이미지에 그림자 효과를 주는 것만으로는 뭔가 밋밋하다고 느끼실 수 있습니다.

이 경우에는 그림자뿐만 아니라 테두리 외곽선 효과를 넣을 수 있는 코드를 추가할 수 있는데요. 코드는 아래와 같습니다.

.single .entry-content img {
box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.4);
border: 3px solid #00FEF0; /* 테두리 선을 민트색으로 3px 설정 */}

확실히 그냥 그림자만 넣었을 때보다는 조금더 개성있게 포인트가 살려지는 느낌입니다. 그림자의 크기, 퍼짐 정도, 테두리의 색상, 굵기 등 디테일한 부분은 각 요소 코드에서 개별적으로 변경이 가능하기 때문에 자유자재로 바꾸어보면서 디자인을 해보시기 바랍니다.

border : 3px solid #00FEF0;

• border : border는 경계, 테두리라는 의미를 가지고 있습니다.
• 3px : 테두리 선의 두께가 3px이라는 말입니다.
• solid : 실선이라는 의미를 가지고 있으며, 다른 종류의 선으로는 dotted(점선), dashed(파선), double(이중선), groove(파인선) 등이 있습니다.

이미지에 액자 효과 넣기

추가적으로 이미지 안쪽에 액자 형식의 선이 들어가는 형태의 액자 효과로 설정해볼 수 있는데요.

흔히 쓰이는 방식은 아니어서 코드 제시만 해드리겠습니다.

.single .entry-content img {
box-shadow: inset 0 0 0 1px #000,
}

다음과 같이 이미지 바깥에 그림자가 표시되는 것이 아닌 안쪽으로 그림자가 생성되어 액자 효과를 나타내고 있음을 알 수 있습니다.

이상으로 워드프레스 이미지 그림자 효과를 CSS 코드를 통하여 적용시키는 방법을 알아보았습니다. CSS코드가 처음 보시면 어렵겠지만, 어느 코드가 어떤 속성에 적용이 되는지 파악을 하실 수만 있다면 비교적 사용하시기 쉬우실 것입니다.

그러면 이제 자신의 원하는 코드 형식에 맞게 이미지 테두리 설정을 하실 수 있습니다.

<함께 보면 좋은 자료>

GeneratePress 테마로 글 하단에 연관 글 추가방법 보러가기 사이트 속도가 향상되는 이미지 최적화 플러그인 설치 및 사용법 보러가기