워드프레스 이미지 테두리 추가 방법(플러그인 설치 X)

안녕하세요 테크라소스입니다.

블로그 포스팅할 때 워드프레스 이미지 테두리 추가하고 싶은 경우가 있습니다.
대표적으로 스크린샷 같은 경우가 그렇죠. 아래 이미지 보실까요?

테두리 유무를 비교하는 이미지. 왼쪽은 테두리가 없어서 경계가 뚜렷하지 않고, 오른쪽 이미지는 테두리가 있어서 이미지 경계가 뚜렷하다.


오른쪽 이미지가 테두리 덕분에 더 보기 편합니다.

독자에게 좋은 경험을 제공하는 블로그는 당연히 검색 엔진도 좋아하겠죠?

그래서 워드프레스 이미지 테두리 추가 방법을 알려드리려 합니다.

제가 사용하는 방법은 귀찮게 플러그인을 설치할 필요가 없고, 필요한 이미지만 선택하여 경계선을 넣을 수 있습니다.

또, 한 번 세팅으로 계속 사용할 수 있기도 하죠. 그럼 함께 알아보시죠!

워드프레스 이미지 테두리 추가 방법

1. CSS 추가

1. 워드프레스 왼쪽 메뉴외모사용자 정의하기 클릭

사이드바-외모-사용자정의하기

2. 추가 CSS 클릭

사이드바 추가 CSS 클릭

3. 아래 코드를 빈 칸에 복사 → 붙여넣기 해주세요.

.border img {
      border: 1px solid gray;
}

코드는 “이미지에 굵기 1픽셀의 회색 실선 그려줘”라는 뜻입니다.

2. 이미지 테두리 추가하기

1. 워드프레스 글 작성 화면에서 테두리를 추가할 이미지를 클릭하세요.

워드프레스 에디터에서 이미지를 선택한 스크린샷

2. 오른쪽 메뉴고급추가 CSS 클래스border 입력하면 끝~

에디터 우측 사이드바에서 고급탭의 추가 CSS 클래스에서 border를 입력했습니다.

정말 간단하죠?

심지어 이 방법은 테두리 모양을 다양하게 꾸밀 수 있습니다.
구글에 [border css style] 라고 검색하면, 테두리 꾸밀 수 있는 아주 많은 옵션이 나옵니다.
그 중 마음에 드는 스타일로 예쁘게 꾸며보세요.

성공적으로 코딩을 통해 테두리를 그리셨다면 잠시 자축하는 시간을 갖도록 합시다.
앞으로 그릴 5조 5천 개의 멋진 테두리를 상상하면서 말이죠.
저도 진심으로 축하 마음 전합니다 😁😁

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다