티스토리 북클럽(book club)스킨 사이드바, 피드 여백 조절하는 법

블로그를 만들어두기만 하고 관리를 전혀 안했는데 문득 홀린듯이 티스토리에 들어왔다가 들어온김에 스킨을 이것 저것 적용해 보았다. 요즘엔 반응형 스킨이라고 모바일에도 최적화 되는 예쁜 스킨이 여러가지 생겨서 선택의 폭이 많이 늘었더라. 

나는 그 중 북클럽 스킨이 마음에 들어서 적용해서 기능을 이것저것 보는데, 사이드 바와 피드 부분 여백이 계속 거슬렸다. 이전에 다른 스킨을 적용했을때 여백을 조정해보긴 했는데 스킨이 바뀌니 해당 사항 용어도 다 바뀌고 위치도 바뀌고 그래서 HTML에 대해 1도 모르지만 겨우 이거 저거 만져보면서 찾았다.

관련 글들이 혹시 있나 검색해봤는데 내가 궁금한 부분에 대해서는 글이 없는 것 같아서 혹시 나같은 사람들이 있을 수도 있으니, 그리고 나중에 나도 다시 찾아 볼 겸 포스팅 해보기로!

먼저 티스토리 '스킨편집'에 들어가면 이와 같은 부분을 볼 수 있는데 여기서 html편집에 들어간다.

그리고 여백 조절을 하기위해서는 CSS에 들어가야 한다. 

블로그 메인페이지에서 먼저 저기 민트색 여백 부분을 조절하고 싶다면,

방금 말한 CSS에 들어가서 337번 줄 부근을 찾아본다. 스킨에 추가 적용 한 것들에 따라서 어느정도 차이가 있을지도 모르지만 그 부근에서 #content {

   float: left;   

라고 써져있는 부분을 찾는다. 

여기 보라색 영역에 해당하는 부분.

찾았다면 저기 float라고 써진 부분에서 left는 왼쪽영역에 피드 부분을 위치 시키는 거고 저길 right라고 바꾸면 이상하게 오른쪽으로 옮겨지는데 사이드바와 콘텐츠 부분 자리를 바꾸고 싶다면 그냥 스킨편집에서 사이드바를 좌측으로 옮기자.

이렇게.

앞서 말한 컨텐츠 위쪽 부분 영역은 padding의 수치를 바꾸면 되는데 나는 이미 숫자를 건드려서 원래 몇으로 되어있었는진 모르겠지만 저기 20px 0 60px 의 20부분을 적당히 맘에 드는 크기로 바꾸면 된다.

스킨편집에서 바로 적용하지말고 새로고침을 하면서 변화된 모습을 확인 후 적용하길 바란다.

추가적으로 더 말하자면 저기 width 부분은 가로 넓이 부분을 변화시킬 수 있는 숫자인데, 소수점 뒤쪽 숫자는 굳이 건들지 말고 앞에 두자리만 바꿔가면서 적용해 보면 되겠다. 숫자가 커질수록 폭이 커지므로 옆에 사이드바 경계를 넘지 않을 정도로 알아서 조절 하기 바란다.

이제 사이드 바 부분도 똑같은 방식으로 조절하면 되는데 사진에서 색칠된 저기 사이드 바 윗 여백 조절 하는 부분은,

방금 콘텐츠 부분 아래 아래에 있는 #aside { 어쩌고 이 부분을 같은 방법으로 조절하면 된다.

음 그리고 혹시 사이드바에서 두번째 부분 사이드바2 영역 부분 여백 조절을 하고 싶다면, 

1875번째 줄 부근의 sidebar-2 부분을 찾아서 padding-top 수치를 조절하면 된다. 줄일수록 줄어듬!

이상하게 같은 사이드바 부분 이지만 한참 다른 곳에 있어서 계속 하나 찾으면 다른 찾았던 부분 다시 까먹고 그래서 이렇게 기록하게 된 원인... 

html에 빠삭한 분들에겐 얼굴에서 눈코입 찾는 수준일지 몰라도😭

저 같은 분들에게 도움이 되길 바랍니다.