티스토리 사진 간격 띄우기

수정 방법 #01 Ctrl + C 눌러서 개발자 모드 들어가 사진 클릭
(아래 빨간 표시 지점 '결과물' 앞 부분과 사진캡쳐 부분이 붙어있음)

오른쪽에 margin이 살아있는 CSS 태그 복사,

(margin: 20px 0px 이렇게 비활성화 태그 복사 불필요)

위 사진에서 복사한 부분은 아래 부분임. 본인의 상황에 알맞은 부분을 복사해야 함!

#tt-body-page figure.imageblock img, figure.imageblock img {
  display: inline-block;
  max-width: 100% !important;
  margin: 0;
  height: auto;
}

수정 방법 #02 스킨 편집, CSS탭까지 이동 후 맨 아래에 코드 붙여넣고 margin 수정

※ 스킨 편집 > html 편집 > CSS탭 이동 방법은 아래 글 참고

티스토리 인용구 줄 두께 변경하기

 

margin의 경우 아래와 같이 수정 가능함

margin: 20px; // 모든 방향 20px
margin: 10px 20px; // 상하 10px, 좌우 20px
margin: 10px 20px 30px; // 상 10px, 좌우 20px, 하 30px
margin: 10px 20px 30px 40px; // 상 10px, 우 20px, 하 30px, 좌 40px (시계 방향 순서)

---

와, 처음에 이거 수정할 때 img 태그 찾아서 수정했는데 해결이 안 됨.

자세히 살펴보니 content.css파일이 자꾸 덮어 씌우는 바람에 margin 적용이 안 된 것이었다.

 

도대체 저 content.css파일이 뭐지? 어떻게 수정하지?

하다가 content.css 검색,

https://www.jbfactory.net/14174

이 분의 글을 보고 해결을 할 수 있었다.

 

content.css가 덮어 쓰는 똑같은 태그를 찾아서 style.css(티스토리에서 우리가 수정하는 CSS 파일)에 적용해 해결

 

점점 이런 식으로 문제를 해결하는데 재미가 드는 듯 하다.

후후. 점점 개발자다워지는 것 같은데?