/* CSS 교체 부분 */ /* 친효애드온 : 본문 목차 목록 모듈 (TOC) 시작 */ div.rgyList, div#rgyTOC { position: relative; padding: 10px; border-top: 10px solid #FF5544; border-top: 10px solid var(--mouseHoverColor); background-color: #e5e5e5; } div.rgyList::after, div#rgyTOC::after { position: absolute; content: ""; top: 5px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); font-size: 1.3em; font-family: 'Nanum Pen Script'; font-style: italic; color: #FF5544; color: var(--mouseHoverColor); letter-spacing: 5px; } div.rgyList li, div#rgyTOC li { list-style-type: none !important; } div.rgyList > ol > li:first-child, div.rgyList > ul > li:first-child, div#rgyTOC > ol > li:first-child, div#rgyTOC > ul > li:first-child { border-top: 1px dashed #FF5544; border-top: 1px dashed var(--mouseHoverColor); } div.rgyList > ol > li a, div.rgyList > ul > li a, div#rgyTOC > ol > li a, div#rgyTOC > ul > li a { position: relative; display: block; padding: 0 20px 0 10px; border-bottom: 1px dashed #FF5544; border-bottom: 1px dashed var(--mouseHoverColor); font-size: 14px; color: #555 !important; } div.rgyList > ol > li a::after, div.rgyList > ul > li a::after, div#rgyTOC > ol > li a::after, div#rgyTOC > ul > li a::after { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 10px; content: "\f078"; font-family: "FontAwesome"; font-size: 11px; color: #555; color: var(--mainColor); } div.rgyList > ol > li a:hover, div.rgyList > ul > li a:hover, div.rgyList > ol > li a:hover::after, div.rgyList > ul > li a:hover::after, div#rgyTOC > ol > li a:hover, div#rgyTOC > ul > li a:hover, div#rgyTOC > ol > li a:hover::after, div#rgyTOC > ul > li a:hover::after { color: #FF5544 !important; color: var(--mouseHoverColor) !important; } div.rgyList > ol > li > ol > li > a, div.rgyList > ul > li > ul > li > a, div#rgyTOC > ol > li > ol > li > a, div#rgyTOC > ul > li > ul > li > a { padding-left: 15px; } div.rgyList > ol > li > ol > li > ol > li > a, div.rgyList > ul > li > ul > li > ul > li > a, div#rgyTOC > ol > li > ol > li > ol > li > a, div#rgyTOC > ul > li > ul > li > ul > li > a { padding-left: 55px; } div.rgyList > ol > li > ol > li > ol > li > ol > li > a, div.rgyList > ul > li > ul > li > ul > li > ul > li > a, div#rgyTOC > ol > li > ol > li > ol > li > ol > li > a, div#rgyTOC > ul > li > ul > li > ul > li > ul > li > a { padding-left: 95px; } div.rgyList > ol > li > ol > li > a::before, div.rgyList > ul > li > ul > li > a::before, div.rgyList > ol > li > ol > li > ol > li > a::before, div.rgyList > ul > li > ul > li > ul > li > a::before, div.rgyList > ol > li > ol > li > ol > li > ol > li > a::before, div.rgyList > ul > li > ul > li > ul > li > ul > li > a::before, div#rgyTOC > ol > li > ol > li > a::before, div#rgyTOC > ul > li > ul > li > a::before, div#rgyTOC > ol > li > ol > li > ol > li > a::before, div#rgyTOC > ul > li > ul > li > ul > li > a::before, div#rgyTOC > ol > li > ol > li > ol > li > ol > li > a::before, div#rgyTOC > ul > li > ul > li > ul > li > ul > li > a::before { content: "└"; margin-right: 5px; font-weight: bold; vertical-align: middle; } /* 본문 목차 버튼 */ #listBtn { display: none; position: fixed; right: -4px; bottom: 230px; transform: scale(0.7); z-index: 9999; } #listBtn > a { display: block; width: 50px; height: 50px; border: 1px solid #fff; border-radius: 5px; font-size: 15px; line-height: 50px; text-align: center; color: #fff; background-color: #ff5544; background-color: var(--mouseHoverColor); transition: all 0.2s; } #listBtn > a:hover { background-color: #f00; } @media (min-width: 1000px) { #listBtn { right: 10px; bottom: 300px; margin: 5px; transform: scale(1); -webkit-transform: scale(1); } } /* 본문 목차 끝 */ /* ========== 새로운 글쓰기 에디터 시작 ========== */ /* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */ .tt_article_useless_p_margin > figure.imageblock.alignCenter, .tt_article_useless_p_margin > div#toc-contents > figure.imageblock.alignCenter { margin: 25px auto 10px !important; } .tt_article_useless_p_margin > figure.imageblock > span > img, .tt_article_useless_p_margin > div#toc-contents > figure.imageblock > span > img { border: 1px solid #eee !important; } .tt_article_useless_p_margin > figure.imageblock figcaption, .tt_article_useless_p_margin > div#toc-contents > figure.imageblock figcaption { margin-top: -10px !important; padding: 10px !important; font-style: italic !important; color: #777 !important; background-color: #eee !important; } /* 더보기 및 접기 (새로운 글쓰기 에디터) */ div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless { padding: 3px 20px !important; border-radius: 20px !important; color: #fff !important; background-color: #555; background-color: var(--mainColor); transition: all 0.2s !important; } div[data-ke-type='moreLess'] .btn-toggle-moreless:hover, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless:hover { background-color: #FF5544; background-color: var(--mouseHoverColor); } div[data-ke-type='moreLess'].open .moreless-content, #tt-body-page div[data-ke-type='moreLess'].open .moreless-content { padding: 10px; margin: 10px 0; background-color: #eee; } /* 본문 인용구1 스타일 (새로운 글쓰기 에디터) */ blockquote[data-ke-style='normal'], blockquote[data-ke-style='style2'] { border-left: 20px solid #eee; padding: 10px 5px; } /* 본문 링크 삽입 (새로운 글쓰기 에디터) */ .tt_article_useless_p_margin > p > a, .tt_article_useless_p_margin > div#toc-contents > p > a { color: #1d67b1; font-weight: bold; } .tt_article_useless_p_margin > p > a:hover, .tt_article_useless_p_margin > div#toc-contents > p > a:hover { color: #FF5544; color: var(--mouseHoverColor); text-decoration: underline; } /* 본문 맨 아래 공감버튼 관련 (새로운 글쓰기 에디터) */ .tt_article_useless_p_margin > div.container_postbtn, .tt_article_useless_p_margin > div#toc-contents > div.container_postbtn { padding: 35px 0 10px; } /* 코드블럭 (새로운 글쓰기 에디터)*/ .tt_article_useless_p_margin > pre, .tt_article_useless_p_margin > div#toc-contents > pre { margin: 10px 0; word-break: break-all; white-space: pre-wrap; word-wrap: normal; } .tt_article_useless_p_margin > pre > code, .tt_article_useless_p_margin > div#toc-contents > pre > code { padding: 10px; font-family: "D2Coding"; font-size: 16px; } /* 첨부파일 (새로운 글쓰기 에디터) */ .tt_article_useless_p_margin > figure.fileblock, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock { position: static !important; margin: 20px 0 !important; border: none !important; width: 100% !important; height: 100% !important; font-family: 'NanumGothic' !important; } .tt_article_useless_p_margin > figure.fileblock a, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a { position: relative !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; -webkit-transform: translateX(-50%) !important; display: inline-block !important; height: auto !important; border-radius: 10px !important; background-color: #555 !important; background-color: var(--mainColor) !important; transition: all 0.2s !important; } .tt_article_useless_p_margin > figure.fileblock a:hover, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a:hover { background-color: #FF5544 !important; background-color: var(--mouseHoverColor) !important; } .tt_article_useless_p_margin > figure.fileblock a::after, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a::after, #tt-body-page figure.fileblock a::after { display: none !important; } .tt_article_useless_p_margin > figure.fileblock a div.image, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a div.image { display: none !important; } .tt_article_useless_p_margin > figure.fileblock a div.desc, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a div.desc { position: static !important; } .tt_article_useless_p_margin > figure.fileblock a div.desc::after, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a div.desc::after { background-image: none !important; } .tt_article_useless_p_margin > figure.fileblock a div.desc div.filename, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a div.desc div.filename { height: auto !important; padding: 5px 10px !important; margin: 0 !important; color: #fff !important; text-overflow: clip !important; white-space: normal !important; overflow: visible !important; } .tt_article_useless_p_margin > figure.fileblock a div.desc div.filename span.name, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a div.desc div.filename span.name { display: inline-block !important; max-width: 100% !important; height: 100% !important; padding: 5px 20px 7px !important; font-size: 20px !important; font-weight: bold !important; vertical-align: middle !important; text-align: center !important; text-overflow: clip !important; white-space: normal !important; overflow: visible !important; } .tt_article_useless_p_margin > figure.fileblock a div.desc div.filename span.name::before, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a div.desc div.filename span.name::before { margin-right: 10px !important; content: "\f019" !important; font-family: "FontAwesome" !important; font-size: 25px !important; font-weight: normal !important; color: #fff !important; vertical-align: middle !important; } .tt_article_useless_p_margin > figure.fileblock a div.desc div.size, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a div.desc div.size { height: auto !important; margin-top: -5px !important; border-radius: 0 0 10px 10px !important; font-size: 11px !important; color: #fff !important; text-align: center !important; background-color: #555 !important; background-color: var(--mainColor) !important; filter: brightness(0.8) !important; -webkit-filter: brightness(0.8) !important; -moz-filter: brightness(0.8) !important; -ms-filter: brightness(0.8) !important; -o-filter: brightness(0.8) !important; transition: all 0.2s !important; } .tt_article_useless_p_margin > figure.fileblock a:hover div.desc div.size, .tt_article_useless_p_margin > div#toc-contents > figure.fileblock a:hover div.desc div.size { background-color: #FF5544 !important; background-color: var(--mouseHoverColor) !important; filter: brightness(0.8) !important; -webkit-filter: brightness(0.8) !important; -moz-filter: brightness(0.8) !important; -ms-filter: brightness(0.8) !important; -o-filter: brightness(0.8) !important; } /* ========== 새로운 글쓰기 에디터 끝 ========== */ /* 친효애드온: 형광펜모드 - 본문 글씨 두껍게 스타일 시작 */ .tt_article_useless_p_margin > p > b, .tt_article_useless_p_margin > div#toc-contents > p > b { padding: 2px 5px; border-radius: 3px; font-weight: normal; color: rgba(0, 0, 0, 0.8); background-color: rgba(80, 255, 0, 0.3); } /* 형광펜모드 - 본문 글씨 두껍게 끝 */ /* 본문 소제목 */ #contents .article h1, #contents .article h2, #contents .article h3 { padding: 2px 5px 4px; margin: 20px 0; border-bottom: 3px solid #555; border-left: 15px solid #555; color: #555; line-height: 1.2; } #contents .article h1 { font-size: 1.5em; } #contents .article h2 { font-size: 1.3em; } #contents .article h3 { font-size: 1.1em; } #contents .article h4 { padding: 10px 20px; margin: 20px 0; font-size: 1em; font-weight: normal; color: #fff; line-height: 1.2; background-color: #555; } #contents .article h4::before { content: "▶"; margin-right: 10px; vertical-align: middle; } /* 본문 텍스트 정렬 */ #contents .article div.tt_article_useless_p_margin > p, #contents .article div.tt_article_useless_p_margin > div#toc-contents > p { text-align: justify; } /* 본문 리스트 */ #contents .article div.tt_article_useless_p_margin > ul, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ul, #contents .article div.tt_article_useless_p_margin > ol, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ol { margin-left: 30px; } #contents .article div.tt_article_useless_p_margin > ul > li, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ul > li, #contents .article div.tt_article_useless_p_margin > ol > li, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ol > li { list-style: inherit !important; color: #4271C9; } #contents .article div.tt_article_useless_p_margin > ul > li > p > a, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ul > li > p > a, #contents .article div.tt_article_useless_p_margin > ol > li > p > a, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ol > li > p > a { color: #4271C9; } #contents .article div.tt_article_useless_p_margin > ul > li:hover, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ul > li:hover, #contents .article div.tt_article_useless_p_margin > ol > li:hover, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ol > li:hover, #contents .article div.tt_article_useless_p_margin > ul > li:hover a, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ul > li:hover a, #contents .article div.tt_article_useless_p_margin > ol > li:hover a, #contents .article div.tt_article_useless_p_margin > div#toc-contents > ol > li:hover a { color: #FF5544; color: var(--mouseHoverColor); } /* 본문 이미지 스타일 (구버전 글쓰기 에디터) */ #contents .article div.tt_article_useless_p_margin > p > span.imageblock, #contents .article div.tt_article_useless_p_margin > div#toc-contents > p > span.imageblock { margin: 20px 0 7px; } /* 본문 이미지 테두리 (구버전 글쓰기 에디터) */ #contents .article div.tt_article_useless_p_margin > p > span.imageblock > img, #contents .article div.tt_article_useless_p_margin > div#toc-contents > p > span.imageblock > img, #contents .article div.tt_article_useless_p_margin > p > span.imageblock > span > img, #contents .article div.tt_article_useless_p_margin > div#toc-contents > p > span.imageblock > span > img { display: block; padding: 0; margin: 0; outline: 1px solid #ccc; } #contents .article div.tt_article_useless_p_margin > p > span.imageblock > span.cap1, #contents .article div.tt_article_useless_p_margin > div#toc-contents > p > span.imageblock > span.cap1 { padding: 10px; margin-bottom: 10px; font-style: italic; font-size: 14px; color: #555; outline: 1px solid #ccc; background-color: #eee; } /* 본문 첨부파일 스타일변경 시작 */ #contents .article .rgyImg-File > p > span.imageblock > a, #contents .article .tt_article_useless_p_margin > p > span.imageblock > a, #contents .article .tt_article_useless_p_margin > div#toc-contents > p > span.imageblock > a, #contents .article .tt_article_useless_p_margin > .rgyImg > p > span.imageblock > a, #contents .article .tt_article_useless_p_margin > .rgyImg > .rgyImg-File > p > span.imageblock > a { display: inline-block; padding: 15px 20px; border-radius: 10px; font-family: 'NanumGothic'; font-size: 18px; font-weight: bold; color: #fff; text-transform: uppercase; background-color: #555; background-color: var(--mainColor); transition: all 0.15s; } #contents .article .rgyImg-File > p > span.imageblock > a:hover, #contents .article .tt_article_useless_p_margin > p > span.imageblock > a:hover, #contents .article .tt_article_useless_p_margin > div#toc-contents > p > span.imageblock > a:hover, #contents .article .tt_article_useless_p_margin > .rgyImg > p > span.imageblock > a:hover, #contents .article .tt_article_useless_p_margin > .rgyImg > .rgyImg-File > p > span.imageblock > a:hover { background-color: #FF5544; background-color: var(--mouseHoverColor); } #contents .article .rgyImg-File > p > span.imageblock > a::before, #contents .article .tt_article_useless_p_margin > p > span.imageblock > a::before, #contents .article .tt_article_useless_p_margin > div#toc-contents > p > span.imageblock > a::before, #contents .article .tt_article_useless_p_margin > .rgyImg > p > span.imageblock > a::before, #contents .article .tt_article_useless_p_margin > .rgyImg > .rgyImg-File > p > span.imageblock > a::before { display: inline-block; margin-right: 10px; box-sizing: border-box; content: "\f019"; font-family: FontAwesome; font-size: 30px; font-weight: normal; vertical-align: middle; } #contents .article .rgyImg-File > p > span.imageblock > a img, #contents .article .tt_article_useless_p_margin > p > span.imageblock > a img, #contents .article .tt_article_useless_p_margin > div#toc-contents > p > span.imageblock > a img, #contents .article .tt_article_useless_p_margin > .rgyImg > p > span.imageblock > a img, #contents .article .tt_article_useless_p_margin > .rgyImg > .rgyImg-File > p > span.imageblock::after { display: none !important; } /* 여기까지 CSS 교체 부분 */
목차