언제부터인지 모르겠는데, 본문의 시작 위치와 애드센스의 위치가 나란하게 되어 있던 것이 텀이 생겼다. 뭔가 수정을 해서 분명 이렇게 된 건 확실한데... 도대체 어디서 잘못된건지 도저히 알 수 없다. 이 방법을 해결하기 위해서 이틀을 연구하였고, 마침내 답을 찾았다.
피가되고 살이되는 블로그, 친절한효자손 취미생활!
글, 사진 및 이미지 ▶ CopyLeft(C) 유길용
#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#
#공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다#
#사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다#
Fastboot 스킨에서 본문 글시작 및 상단 애드센스 위치 조절하기
요소 검사를 해보면, <div class="tt_article_useless_p_margin"> 이라고 하는 태그가 검색이 된다. 그럼 이건 도대체 어디서 나타나게 된건지 확인을 해 본 결과, 일반적은 HTML이나 CSS에는 없는, 티스토리 고유의 기능이라는 것을 알게 되었다.
티스토리에서 글을 작성할 때, 위쪽에 보면 "문단 간격 없음" 이라는 항목이 있고, 거기에 체크가 되어 있으면 위에 언급한 태그가 생성이 된다. 이 태그의 역할은 문단 문단 사이의 벌어짐을 좁혀준다. 가독성을 높이기 위해 꼭 필요한 기능인 것이다. 이 태그를 쓰게 되면서 아울러 같이 자식태그로 생성되는 것이 tt_adsense_top 이라고 하는 클래스가 생겨버리는데, 바로 이게 원인이다.
보시는 것처럼 이렇게 간격이 벌어져 있다. 상단 애드센스 위치와 잘 맞아야 하는데... 왜 이런 간격이 생겨버린 것일까? 이것때문에 신경이 쓰여 잠을 설칠 정도였다. ...는 뻥이고, 신경이 쓰였던건 사실이다. 틈만나면 티스토리 태그에 대해서 검색하기 일쑤였다.
요소 검사를 해보니, 본문 부분은 위에서 언급했듯 <div class="tt_article_useless_p_margin"> 이 태그가 이 본문을 통솔하는 태그였다. 그 아래의 자식태그를 좀 살펴본다.
지금 위의 화면이 작아서 잘 보이지 않지만, 태그부분을 여기에 옮겨보면, <div class="tt_adsense_top" style="margin-bottom:30px;"> 이라고 작성되어 있다. 혹시 저 30픽셀만큼 내려가게 되는걸까? 싶어서 바로 스타일 부분을 모두 주석처리 해보았다.
놀랍게도 이 태그가 원인이었다. 대체 왜 생긴건진 모르겠지만, 원인을 알았으니 이제 이 기능을 무력화 해보자.
하지만 HTML/CSS 편집 부분에서 위의 태그를 검색해도 검색이 안된다. 여기에는 없는 태그다. 티스토리 자체적으로 내장되는 태그인 것 같다. 따라서 그냥 해당 기능만 작동 안되게끔만 해주면 될 것 같아서 위의 태그를 CSS에 넣어주도록 한다. tt_adsense_top 의 30픽셀 기능을 무력화 시키는 태그이다.
이 태그를 CSS에 아무곳에나 붙여넣기 해주고 저장을 누르면 문제는 해결 될 것이다. 이로써 며칠간 신경이 쓰이던 앓던 이는 빠졌다. 역시 노력하면 안되는게 없다. 끝.
Fastboot 최근글모듈 썸네일 10개까지 나오는 문제 해결 방법
티스토리 Posted by 삭제(숨기기,없애기) 방법
Fastboot 티스토리 제목 색상(배경색) 변경 방법