1. HTML CDN ================================== 2. Script ================================== 3. CSS /* https://rgy0409.tistory.com */ /* 친효애드온 : 본문 목차 시작 */ .rgyList { position: relative; padding: 10px; margin: 10px 20px; border-top: 10px solid #FF5544; background-color: #e5e5e5; } .rgyList::after { position: absolute; content: ""; top: 7px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); font-size: 1.3em; font-family: 'Nanum Pen Script'; font-style: italic; color: #FF5544; letter-spacing: 5px; } .rgyList > ol, .rgyList > ul { padding-top: 30px; } .rgyList li { position: relative; border-bottom: 1px dashed #FF5544; list-style-type: none !important; } .rgyList li:first-child { border-top: 1px dashed #FF5544; } .rgyList li::after { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 10px; content:"\f078"; font-family: "FontAwesome"; font-size: 11px; color: #555; } .rgyList li:hover a, .rgyList li:hover::after { color: #FF5544 !important; } .rgyList li a { display: block; padding: 0 20px 0 10px; font-size: 14px; color: #555 !important; } /* 본문 목차 버튼 */ #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; 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); } } /* 본문 목차 끝 */ ========================== 4. HTML
목차