워드프레스에 이미지를 추가하면 테두리 경계가 없어서 글, 광고, 이미지 사이의 구분이 잘 안될 때가 있다. 이럴 때는 이미지에 그림자 테두리를 넣어주는 것만으로 훨씬 글이 깔끔해진다.

또한 이미지와 글 사이의 여백을 충분히 확보함으로써 가독성을 높일 수도 있는데, 오늘은 이미지 그림자 테두리와 위 아래 여백을 넣는 방법을 알아보겠다.

이미지 그림자 테두리 넣는 방법

지난 번에 밑줄 CSS 추가하듯이 테마 파일 편집기를 통해 아래 CSS 코드를 복사 붙여넣기만 하면 이미지에 테두리와 위 아래 여백을 넣을 수 있다.

1. 모양 > 테마 파일 편집기
2. 아래 코드 복사 붙여넣기
3. 파일 업데이트

이미지 그림자 테두리 CSS

/* 이미지 그림자 테두리 */
.entry-content img {
box-shadow: 0px 0px 5px 2px rgba(1,10,0,0.33);
border: 0px solid rgb(228, 229, 236);
}

.post-image img {
box-shadow: 0px 0px 5px 2px rgba(1,10,0,0.33);
border: 0px solid rgb(228, 229, 236);
}

box-shadow 값을 변경하여 그림자를 커스터마이징 할 수도 있다. 각 요소의 값은 다음을 의미한다.

• X축 이동(px) → 좌우 움직임
• Y축 이동(px) → 위아래 움직임
• blur(흐림 정도)
• spread(번짐 크기)
• rgba (1, 10, 0, 0.33) = 색상

위미지 위 아래 여백 CSS

/* 이미지 위 아래 여백 */
.wp-block-image img {
margin-top: 0em ;  
margin-bottom: 2em ;
}

margin-top 또는 margin-bottom 값을 조정하여 이미지 위 아래 여백을 조절할 수 있다. 노블로는 이미지 아래 여백만 2em으로 조정하였다.