스킨 수정을 하다 보면 다른 부분은 건드리기 싫고 딱 본문에 나오는 이 부분만 바꿔보고 싶다는 생각을 할 때가 있다. 이를 위해서 몇 가지 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
에디터에서 영화/음반/도서/공연 첨부시
