워드프레스에서 이미지를 첨부할 때 흰색 배경(정확하게는 블로그의 배경색)이 많은 경우 가독성이 떨어진다. 컴퓨터 화면을 캡처한 이미지를 첨부하는 경우 쉽게 일어난다. 이 경우 이미지에 외곽선을 넣어주면 깔끔하게 처리된 느낌을 줄 수 있다.
워드프레스 테마에 따라서는 이미지 블록에 외곽선을 설정하는 옵션이 있기도 하지만, GeneratePress 테마에는 해당 옵션이 없다. 이에 대한 대안으로 추가 CSS 클래스(Additional CSS class)를 활용해 볼 수 있다.
1. CSS 추가
모양 > 사용자 정의 > 추가 CSS
이미지의 외곽선을 어떤 방식으로 넣을 것이냐에 따라 2가지 코드를 생각해 볼 수 있다.
[선택 1] 외곽선의 두께만큼 이미지 사이즈를 줄인 후 외곽선을 넣는 코드.
- 장점. 외곽선 두께와 상관없이 이미지의 모든 영역이 표시된다.
- 단점. 리사이징으로 인해 흐릿하게 보일 수 있다. 이미지의 경우 크게 차이를 못 느끼는 경우가 많으나 텍스트를 캡처한 이미지의 경우 흐림 현상을 쉽게 느낄 수 있다.
.entry-content .img-border img {
border: 1px solid black;
}
[선택 2] 이미지 위에 외곽선을 덧그리는 코드
- 장점. 이미지가 리사이징 되지 않아 원본 그대로 또렷하게 보인다.
- 단점. 외곽선의 두께만큼 이미지 외곽 부분이 가려진다. 다만 외곽 1px 정도 가려지는 것은 일반적으로 크게 문제 되지 않는다.
.entry-content .img-border img {
outline-offset: -1px;
outline: 1px solid black;
}
*두 가지 코드의 CSS 클래스 이름을 서로 다르게 설정하면 상황에 맞게 골라 쓸 수 있다.
*만약 모든 이미지에 대해 자동으로 외곽선을 적용하고자 한다면 위의 코드에서 .img-border 부분만 삭제해 주면 된다.
2. 사용 방법
워드프레스 편집기에서 외곽선을 넣고자 하는 이미지를 선택한 후 추가 CSS 클래스 입력.
이미지 블록 > 고급 > 추가 CSS 클래스에 다음을 입력.
img-border
3. 추가 CSS 클래스를 적용한 모습
이미지의 직접적인 수정 없이 추가 CSS 클래스를 설정하는 것만으로 외곽선을 넣을 수 있게 되었다.
