티스토리 내 글의 이미지에 테두리 일괄 적용하기

티스토리 내 글의 이미지에 테두리 일괄 적용하기

5월 달부터 티스토리를 시작하게 되었습니다. 열심히 글을 쓰고 이미지를 넣다가 이미지에 테두리를 넣는 기능이 없는 것을 알게 되었습니다. 처음 쓰기 시작한 글이 해외 쇼핑몰을 이용하는 방법에 대한 것이었기 때문에 웹 화면을 캡처한 이미지를 다량으로 넣어야 했습니다. 테두리가 없으니 지저분해 보이더군요.

그래서 이미지에 테두리를 넣는 기능이 있는지 검색을 통해 찾아보았습니다. 이 글 저 글을 찾아보며 얻은 결론은 글쓰기 에디터에서 이미지에 테두리를 넣을 수 없다는 것이었습니다. (이건 지금 티스토리 기준입니다. 저는 이전 글쓰기 에디터를 사용해 본 적이 없기 때문에 새로운 티스토리 에디터를 기준으로 말씀드립니다.)

그럼 테두리를 넣기 위해서는 어떻게 해야 되는 것인지도 찾기 시작했습니다. 열심히 찾다보니 방법이 나오더군요. CSS 코드 편집을 통해 이미지에 테두리를 일괄 적용할 수 있다는 정보를 입수했습니다.

#1 스킨을 쓸 때는 코드 편집을 통해 이미지에 테두리를 넣었을 때 하단에 약간의 여백이 생기며 테두리가 들어가서 보기에 좋지가 않았는데, 애드센스 승인을 위해 스킨을 Square로 바꾸고 나서 테두리를 다시 적용하니 보기 좋게 딱 제가 원하던 모습으로 테두리를 넣을 수 있었습니다.

그럼 CSS를 어떻게 편집하면 되는지 적어보겠습니다.

티스토리 스킨편집에서 일괄 적용

티스토리 관리 화면에서 왼쪽 사이드 바를 보면 꾸미기-->스킨 편집이 있습니다. 여기서 스킨 편집 메뉴로 들어갑니다.

새 창으로 스킨 편집 화면이 열리면 우측에 위 이미지와 같은 항목이 있습니다. 여기서 html 편집을 누르면 코드를 편집할 수 있는 창으로 바뀝니다. HTML, CSS, 파일업로드 항목이 있는데 여기서 우리가 눈으로 보는 요소를 편집하기 위해서는 CSS의 코드를 수정해 주어야 합니다.

CSS를 클릭하면 코드를 편집할 수 있게 됩니다. imageblock 부분을 위와 같이 수정해 주면 이미지에 테두리가 출력됩니다.
border는 테두리의 두께이고, solid는 테두리의 색상입니다. 저는 1px의 두께로 설정하였고, 약한 회색으로 넣고 싶어서 #E6E6E6으로 색상 코드를 설정했습니다. 두께는 여러분 취향대로 설정해 주시면 되고, 색상은 색상 코드를 구글에 검색해 보면 해당 색상에 대한 코드가 나오니 그것을 가져다 쓰시면 됩니다.

코드를 다 적용했다면 위 이미지처럼 테두리가 생겨서 배경이 하얀 태극기 그림을 넣어도 경계가 분명해지고 깔끔해집니다.

글쓰기 에디터의 기능이 약간 아쉽긴 하지만, 평소 코딩을 해서 서비스를 만들어 보고 싶다는 생각이 있었는데 이번 기회에 코드에 대해서 조금씩 알아갈 수 있어서 유익한 것 같습니다.

이상으로 내 티스토리 글의 이미지에 테두리를 코드를 수정하여 적용하는 방법에 대해 알아보았습니다. 이 글을 보고 계시는 분에게 필요한 정보를 제공했길 바라며 이만 마치겠습니다.

유용한 정보

Canva 칸바 사용법 총정리 (파일 형식, 찜한 템플릿 등)

티스토리 블로그 소제목 꾸미기 10가지 코드

컴퓨터화면캡쳐 초간단 해결! 컴퓨터화면캡쳐 방법 총정리