[워드프레스] 이미지 상하여백, 테두리 만들기

#WordPress #GeneratePress #margin #추가css #추가css클래스 #사진여백

안녕하세요, 배곧동개발자 입니다.

워드프레스를 사용하실 때 블로그형태로 운영하시는 분들은 테마(외모)를 가장 유명한 GeneratePress를 사용하시지요? 이게 가장 기본이며 수정하기 편하다고 들었습니다.

근데 이게 생각보다 이쁘지가 않아요. 그래서 저는 여러모로 손을 보고 있고(개발자뿜뿜) 그 과정을 포스팅하여 많은 분들에게 도움이 되었으면 합니다.

오늘 할 포스팅은 다른것보다 블로그에서 가장 중요한 글쓰기! 그 글쓰기가 타 블로그 플렛폼에 비해서 조금 복잡(?)하며 불친절한 워드프레스를 조금 더 편리하고 이쁘게 사용하는 방법에 대해서입니다.

1. 이미지 상하 여백

제가 네이버와 티스토리 블로그들을 거치면서 이미지를 입력 후 위와 아래를 띄워쓰던 버릇이 있습니다. 이미지 상하를 띄워놓지 않으면 사실상 보기 좀 불편하고 안이쁘잖아요?

그래서 워드프레스에서 글을 쓸 때도 열심히 띄어쓰기를 했으나, 위와 같이 띄어쓰기는 입력되지 않고 그냥 붙어버리지뭐에요? 문단으로 구분되는 워드프레스에서 띄어쓰기 해봤자 인식이 안되나봅니다.

사실 그래서 이렇게 여백도구라는 것을 제공하는데, 이걸 이미지 넣을 때마다 위아래 한땀한땀 넣기란 사실상 너무 귀찮지요. 이것을 해결해볼까합니다.

우선 관리자도구(F12)를 열어서 포스팅에 올라간 이미지들이 어떤 클래스를 사용하는지를 봐봅시다. wp-block-image 라는 클래스로 모두 묶여있죠? 이 친구를 컨트롤 하면 되겠다! 생각하시면 됩니다.

여기서 넣을 css는 margin으로 객체의 상하좌우를 얼만큼 띄울것인가? 를 설정하는 친구입니다. 추가 css에 들어가셔서 넣어줘봅시다.

/*본문이미지상하여백*/.wp-block-image{
 margin-top: 30px;
 margin-bottom:30px;
}

이렇게 해주면 본문의 모든 이미지의 위, 아래를 30px씩 떨어트려주게 됩니다. 잘 모르겠다 싶으시면 굳이 이해하지 않으셔도 됩니다. 그냥 위에 css를 넣어주시면 됩니다.

2. 이미지 테두리 씌우기

위에 여백을 신경썼듯이 이미지를 넣을 때 한가지 더 신경쓰이는게 있습니다. 바로 테두리입니다.

매번 이미지를 만들 때에 내가 찍어줄 수도 없고, 그렇다고 딱히 워드프레스에서 지원하지는 않는 테두리만들기, 한번 해보겠습니다.

위 이미지에서 보시면 이미지와 글의 경계가 참 애매해죠? 이런 경우에 테두리를 쓰워주면 참 이쁘게 되는데 말입니다. 어떻게 하냐? 이번에도 css를 활용해주시면 됩니다.

방금 전에 여백을 줄 때에 본문 이미지의 클래스가 뭐라고 했죠? 바로 wp-block-image 였습니다. 그리고 그 클래스에 아까 margin을 넣어줬죠. 이와 같이 클래스에 테두리를 만들으라는 border를 넣어주면 끝 아니냐? 라고 하실수 있겠으나!

여백이야 사실상 모든 이미지에 필요하지만, 테두리가 모든 이미지에 테두리가 필요한 것은 아니잖아요? 고로 선택적으로 넣는 방법을 알아볼까합니다.

.pb{
 border:1px solid #5D5D5D;
}

먼저 추가css에 위와 같은 css를 입력해줍니다. 해석해보자면 “pb라는 클래스는 1px의 두께를 가진 일자모양의 검정색 테두리를 두른다.” 정도로 보시면 됩니다.

그리고 pb라는 이름은 그냥 뭐 pictureBorder 이런 느낌으로 제가 막 넣은거니까 쓰기 편하신걸로 바꾸시면 됩니다. 단, 기억하고 쓰기 쉽게 지정하셔야 추후에 쓸때마다 찾아보는 수고를 덜으실 수 있습니다.(경험담입니다)

그리고 테두리를 씌우고 싶은 이미지를 클릭 후 블록>추가CSS클래스에 pb라고 넣어줍니다. (바꾸셨으면 바꾸신걸로!)

여기서 중요한게, 추가css클래스를 넣어주셔도 에디터화면에서는 반영되지 않습니다. 반영 된 모습이 궁금하시면 미리보기를 이용해서 확인해주세요.

짜잔. 이렇게 이미지 테두리에 검정색 선이 그려젔습니다. 좀 더 굵게 하고싶으면 1px로 되어있는걸 늘리시고 다른색을 하고싶으면 black을 원하는 색으로 바꿔주시면 됩니다.

이렇듯 클래스에 오버라이딩하여 전체 이미지에 여백을 줘보기도 하고 추가css를 만들어서 내가 원하는 이미지에 테두리를 씌워보기도 했습니다. 이걸 응용하여 다양하고 이쁘고 보다 편하게 워드프레스를 활용하는 여러분 되시길바래요!

궁금한 부분이나 잘 모르겠는 부분, 도움이 필요한 부분은 언제든지 댓글로 알려주세요.

이만, 배곧동개발자 였습니다.