가독성을 위한 워드프레스 이미지에 그림자 넣기

워드프레스 블로그의 디자인을 개선하고 가독성을 높이기 위해 이미지에 그림자 효과를 추가하는 방법에 대해 알아보겠습니다. 이 포스에서는 그림자 효과의 필요성, 적용 방법, 그리고 CSS 코드 수정 방법에 대해 자세히 설명하겠습니다.

이미지 그림자 효과가 필요한 이유

이미지에 그림자 효과를 적용하는 것은 블로그의 전체적인 가독성을 높이는 데 큰 도움이 되는데. 그림자 효과는 방문자가 이미지와 배경을 명확히 구분할 수 있도록 도와주며, 이는 시각적인 경험을 향상시킵니다.

가독성 향상

그림자 효과가 없는 이미지는 배경과 잘 어우러지지 않아 시각적으로 혼란을 줄 수 있습니다. 아래의 두 이미지를 비교해보면 그 차이를 쉽게 알 수 있습니다.

위 이미지는 오른쪽과 하단 부분에 그림자가 있어 이미지가 더욱 잘보여서 가독성을 높여 주게 됩니다.

이미지 그림자 효과 추가하기

워드프레스에서 이미지에 그림자 효과를 추가하는 방법은 간단합니다. CSS 코드를 추가하는 것으로 가능합니다. 아래의 절차를 따라 해보세요.

1. CSS 코드 추가하기

워드프레스 관리자 페이지에 로그인한 후, 다음 경로로 이동합니다:

워드프레스 관리자 페이지 > 사용자 정의하기 > 추가 CSS

그 후, 아래의 CSS 코드를 추가합니다:

/*  이미지테두리설정 */.single .entry-content img {
box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.4);
border: 1px solid #000; /* 테두리 선을 검은색으로 1px 설정 */}

위 코드를 설명드리면,

box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.4);
이미지에 그림자 효과를 추가합니다. 그림자 설정은 다음과 같습니다:

• 10px: 수평 방향으로 10픽셀 이동한 그림자.
• 10px: 수직 방향으로 10픽셀 이동한 그림자.
• 8px: 그림자의 흐림 반경으로, 값이 클수록 가장자리가 부드러워집니다.
• rgba(0, 0, 0, 0.4): 검은색 그림자(rgb(0, 0, 0))에 40% 투명도 적용.

그림자는 요소의 오른쪽 아래로 살짝 떨어지며 부드러운 효과를 만듭니다.

이 코드를 추가한 후, ‘공개’ 버튼을 클릭하여 변경 사항을 저장합니다.

2. 그림자 크기 조정하기

그림자의 크기를 조정하고 싶다면, 위 코드에서 10px 부분의 숫자를 수정하면 됩니다. 예를 들어, 20px로 변경하면 그림자가 더 퍼지게 되고, 5px로 변경하면 그림자가 더 작아집니다.

3. 그림자 색상 변경하기

그림자의 색상을 변경하고 싶다면, rgba(0, 0, 0, 0.4) 부분의 색상 코드를 수정하면 됩니다. 웹사이트의 색상을 확인하는 방법은 아래 링크를 통해 바로 확인 하실수 있습니다.

이번 글에서는 워드프레스에서 이미지에 그림자 효과를 추가하는 방법에 대해 알아보았습니다. 위의 CSS 코드는 간단한 수정만으로도 다양하게 활용할 수 있습니다. 직접 코드를 수정해보면서 CSS에 대한 이해도를 높이고, 블로그 디자인을 한층 더 향상시켜 보세요.

워드프레스를 장기적으로 운영할 계획이라면, 간단한 CSS 지식을 배우시길 추천 드립니다.

추천글

워드프레스기본설정