티스토리 블로그 이미지, 사진에 자동으로 테두리선 넣기

깔끔하게 이미지를 넣고싶어요

이 글을 찾아들어오신분이라면 이미지를 블로그글에 넣었는데 이미지배경이 백색이라 글과 이미지가 구분이 안되어서 불편함을 느끼셔서 검색하신걸로 생각됩니다. 저도 마찬가지로 이게 불만이여서 검색해서 해결책을 찾았지요.

 

아래에 간단하게 이미지를 본문에 삽입하면 자동으로 테두리선을 만들어주는 소스코드를 알려드릴테니 잘 따라와보세요.

 

 

어떻게 할까요?

이미지에 테두리를 넣는것은 아주 간단한 소스코드로 이루어져 있습니다. 아래의 순서대로 따라오시면 되니까 걱정하지 마세요.

 

먼저 저의 블로그 다른글 본문중에 하나인데요 글씨가 있고 이미지가 보이는데 경계가 어딘지 몰라서 약간 두서없이 정리가 안되는 느낌이 듭니다. 그래서 이미지에 테두리를 주면 어떻게 느낌이 달라질까 하고 봐주세요.

 

---

1. 가장 먼저 자신의 블로그 관리자화면으로 접속해주세요. 메뉴중 꾸미기 → 스킨편집 → html편집 → CSS편집 순서대로 이동해주세요.

 

 

2. CSS편집창 아무데나 마우스로 클릭하고 Ctrl+F단축키를 눌러 검색창을 여세요. CSS편집창 상단에 노란색바탕으로 검색창이 나타나면 img 라고 검색하고 엔터를 누르세요. img소스코드가 여러개 검색되는데 이중에 img소스다음줄에 border라고 쓰여있는 곳을 찾으세요. none;으로 표시된 곳을 이제 다른소스로 교체하시면 됩니다.

 

교체할 소스코드는 다음과 같습니다. 아래의 코드를 복사해서 붙여넣기 해주시면 됩니다. 붙여넣기가 끝난후에는 적용버튼을 누르고 마치시면 됩니다.

border: 1px solid #eeefef !important;

 

이해를 쉽게하기위해서 아래의 이미지를 첨부하니 살펴보세요.

 

반응형

---

확인해 보세요

이제 소스코드를 모두 적용하였습니다. 해보시면 아주 간단히 끝나는작업이라는것을 알수 있습니다. 적용을 했다면 변한모습을 보러가야죠? 바로 이렇게 적용되었습니다.

 

 

이미지를 확인해보시면 이전에는 없던 회색의 테두리선이 이미지에 적용되어있는것을 확인할 수 있습니다. 이미지의 테두리가 보이니 좀더 정리된 모습을 확인할 수 있습니다. 배경색상이 있는 이미지는 크게 와닿는것이 없지만 백색바탕의 경우는 테두리를 넣음으로써 휠씬 정돈되어 보입니다.

 

여러분도 간단하게 적용해보시고 안되는부분이 있다면 댓글로 말씀해주세요. 아는 부분에 대해서는 답변드릴께요.

 

 

이런 제품은 어때요?

당신이 관심있어 하던 제품은 아닌가요? 지금 확인해보세요.

 

 

 

참고하세요

• 이 글은 티스토리블로그 카테고리에 있습니다.
• 어필리에이트 활동으로 수익금을 받을 수 있습니다.

 

 

공감과 댓글

♥공감 하나와 소통하는 댓글 하나가 저에게는 큰힘이 됩니다.