초간단 티스토리 모든 사진에 테두리 넣는 방법(Feat. 가독성 증가)

티스토리의 테두리 기능은 정말 별로이다

티스토리의 사진 테두리 기능은 그야말로 최악입니다😢

이쁘지도 않을뿐더러 심플하지도 않고 사진 끝을 잘라먹는다는 단점도 존재합니다.

 

사진에 테두리를 넣어주지 않을 경우 흰 배경의 사진은

이것이 사진인지 실제 블로그 내용인지 광고인지.. 분간이 힘들어 가독성이 매우 떨어집니다.

 

하지만 모든 사진에 테두리를 넣어줄 수 있는 방법이 있습니다.

 

CSS에서 한줄만 수정을 해주면 됩니다. 테두리의 두께나 색상도 정해줄 수 있습니다.

1분컷으로 수정 가능하니 잘 따라와 보시기 바랍니다.

 

 

 

테두리 넣기 전

먼저 결과물부터 봐보시지요.

아래는 테두리를 넣기 전 스샷입니다(현재 테두리가 전체 적용되어 있어서 가장자리에는 테두리가 들어가 있습니다.)

1. 2. 3. 사이에 테두리가 없어서 어디까지가 스크린샷이고 어디까지가 내용인지 분간이 힘듭니다.

 

 

 

테두리 넣은 후

자동으로 테두리가 지정되니 일일히 손으로 설정할 필요도 없고

가독성도 몹시 좋아진 것을 확인할 수 있습니다👍👍👍

 

이제 수정 방법을 알아보도록 하겠습니다.

 

 

 

 

사진 테두리 지정하는 방법

1. 티스토리 관리 페이지에서 '꾸미기 > 스킨 편집' 버튼을 누릅니다.

 

 

2. [html 편집] 버튼을 누릅니다.

 

 

3. 상단 메뉴에서 [CSS]를 누릅니다. 

 

 

4. [Ctrl + F]를 눌러 검색을 합니다.

 

 

 

5. 89번 라인 쯤에 위치하는 이 녀석을 찾아서 변경할 예정입니다.

저는 'img {' 라고 검색을 하였습니다. 'border-sytle'로 검색을 해도 되겠네요. 

현재는 border-sytle: none; 으로 지정이 되어있는 것을 확인할 수 있습니다. 사진 테두리를 없앤다는 속성값입니다.

 

 

 

6. border: 1px solid #000 !important; 으로 수정을 합니다. 복붙 해서 넣으세요.

• 1px : 테두리 굵기값입니다. 2px로 하면 더 굵어집니다. 원하는 값으로 수정하면 됩니다.
• #000 : 테두리 색상입니다. 값을 입력하면 네모 박스로 바로 색을 보여줍니다. #000의 경우 검은색이네요.

 

 

7. [적용] 버튼을 눌러서 수정한 내역을 저장합니다.

 

 

8. 작성했던 포스팅으로 이동해 보니 검은색 테두리가 얇게 잘 쳐져있는 것을 확인할 수 있습니다.

저는 검은색이 너무 진해 보여서 연한 회색으로 변경해보려고 합니다.

 

 

9. 색상표에서 색상값을 확인하기 위해 아래 링크를 눌러서 이동합니다.

색상값 확인하러 가기 👉 https://encycolorpedia.kr/000000

Black / 검정 / #000000 / #000 헥스 색상 코드

 

 

10. 원하는 색상의 값을 확인합니다. 저는 #a2a2a2가 마음에 드네요.

 

 

11. border: 1px solid #a2a2a2 !important; 로 수정하였습니다.

네모 박스에도 바로 회색으로 반영되는 것을 확인하실 수 있습니다.

 

 

 

이제 모든 사진에 연한 회색 테두리가 설정되었네요!👍👍👍

지금 보고 계시는 포스팅도 모두 연한 회색 테두리가 적용된 상태일 겁니다 ㅎㅎㅎ

 

가독성이 확 증가된 게 느껴지시나요?😁😁😁