티스토리 에디터 클래스 분석


스킨 수정을 하다 보면 다른 부분은 건드리기 싫고 딱 본문에 나오는 이 부분만 바꿔보고 싶다는 생각을 할 때가 있다. 이를 위해서 몇 가지 css 셀랙터가 필요한데 이 기회에 정리를 해보았다. 티스토리 공식 스킨 가이드에는 더 보기 접기 부분만 나와 있기 때문에 좀 불만이 있는 부분이기도 하다.


tt_article_useless_p_margin

→ 티스토리 글 설정에서 문단 간격 없음을 선택하면 자동으로 감싸지는 div. 의외로 활용도가 많고 스킨 구조에 상관없이 딱 글 부분만 선택해서 css 적용하기 유용한 셀렉터 이므로 왠만하면 이 옵션을 켜는게 좋다.  물론 이걸 안 켜 놓으면 문단 사이 간격이 어마어마하게 넓어지기 때문에 이미 다 사용하고 있는 기능이라고 본다.


참고로 문단 간격 없음을 설정하지 않으면 게시글 내의 모든 paragraph에 상하 margin이 1em 씩 추가 됨.


티스토리 기본 스킨은 게시글 표시 영역이 article 이라는 클래스가 적용되어 있으므로 그것 기준으로 함.


해당 태그 앞에 모두 .article이나 .tt_article_useless_p_margin를 작성한 뒤 한칸 띄우면 된다. 


예시)

.article b 

에디터에서 굵게 설정했을시


.article u 

에디터에 밑줄 설정했을시


.article i 

에디터에서 이텔릭체 설정했을시


.article strike

에디터에서 취소선 설정했을시


- 기본 적으로 css selector를 이용해서 style attribute를 선택하는 것은 아주 등신 같은 짓이지만 글을 일일히 수정하지 않고 일괄 변경을 희망한다면 이것 말고는 달리 솔루션이 없다.


.article span[style*=’color’]

에디터에서 글자색을 변경 했을때


 .article span[style*=’background-color’]

에디터에서 글자 배경색을 변경 했을때 


.article p[style*=’text-align’]

문단 정렬을 따로 지정했을시 


.article p[style*=’margin-left’]

들여 쓰기를 했을때 


sup.footnote

본문에 주석이 뜨는 부분을 지정하는 부분. 이 안에 anchor가 들어있으므로 완전히 스타일 적용을 위해서는 sup.footnote a 도 지정해줘야 함. 


주석 같은 경우 아랫부분에도 표시. 아랫부분에 목록은 div.footnotes 로 스타일 지정이 가능하며, 안에는 ordered list가 포함되어 있다. 


[id*="tistoryFootnoteLayer_"]

주석 풍선


.article ul[style*=”disc”], .article ul[style*=”square”], .article ul[style*=”upper-roman”], .article ul[style*=”upper-alpha”]


에디터 기본 제공 리스트 스타일. 순서대로 원형, 사각형, 로마자(대문자), 알파뱃(대문자)


.article p span[style*=”font-family”]

에디터에서 추가로 폰트를 변경하였을 때 


.article p img[src*=”mypeople”]

에디터에서 마이피플 스티커를 넣었을 때 


p img.txc-emo

에디터 기본 제공 이모티콘을 적용하였을 때 


p a.tx-link

에디터에서 WYSIWIG으로 링크를 적용하였을때 


기본적으로 일반적인 링크 클래스는 .article p a 이다.


table.txc-table 

에디터에서 표를 넣었을때


table[class*=txc-layout]

에디터에서 레이아웃을 넣었을 때


div.txc-textbox 

에디터에서 글상자를 넣었을때


blockquote.tx-quote-tistory 

에디터에서 인용구 추가시


p.moreless_fold

더보기 


p.moreless_top

접기 윗부분


p.moreless_bottom

접기 아랫 부분


div.moreless_content 

더보기 내용물


p span.imageblock img

에디터로 이미지 추가시 이미지 부분


p span.imageblock span.cap1

에디터로 이미지 추가시 하단부 제목 부분


div.tt-gallery-box

HTML 슬라이드 쇼


[id*="iMazingContainer"]

플래시 슬라이드 쇼


p span.imageblock a 

티스토리 첨부파일


[id*="emap_"]

다음 지도 첨부


[id*="jukeBox"]

첨부 파일로 오디오 첨부시 나오는 플레이어


p img.txc-formula 

에디터에서 수식 입력시


div.txc-info

에디터에서 영화/음반/도서/공연 첨부시