[##_page_title

@charset "utf-8"; /* * * CSS CONTENTS: * * 01. Web Font * 02. Type Selector Reset * 03. Accessibility Navigation * 04. Layout Selector * 05. Components * 06. Entry Content * 07. Comment * 08. Widget & Template Page * 09. ETC * 10. Post Type & Color Type * 11. Retina Display * 12. Media Screen - Tablet * 13. Media Screen - Mobie * */ /* Web Font Load */ @import url("//fonts.googleapis.com/earlyaccess/notosanskr.css"); @import url("//fonts.googleapis.com/css?family=Nanum+Myeongjo"); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap"); @font-face { font-family: "NEXON Lv1 Gothic OTF"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "KyoboHand"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff") format("woff"); font-weight: lighter; font-style: normal; } @font-face { font-family: "D2Coding"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff") format("woff"); font-weight: normal; font-style: normal; } :root { --dark-bg-color: rgb(30, 31, 33); --dark-font-color: #fefefe; --dark-bg-second-color: rgb(50, 51, 53); --highlight-color: #ff4081; --sidebar-hr-color: rgba(255, 255, 255, 0.2); } * { margin: 0; padding: 0; /*font-family: 'Roboto', sans-serif;*/ font-family: "NEXON Lv1 Gothic OTF"; /*font-family: 'KyoboHand';*/ text-decoration: none; font-size: 1em; line-height: 1.25; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; color: inherit; } *:focus { outline: none; } * s { text-decoration: line-through; } body { display: flex; flex-direction: column; min-height: 100vh; background-color: var(--dark-bg-color); color: var(--dark-font-color); } /********************************************************************/ /* NAVBAR */ .navbar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 1em; width: calc(100% - 2em); background-color: var(--dark-bg-color); position: fixed; top: 0; z-index: 1000; } .navbar .navbar-block { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5em; } .navbar .navbar-block .navbar-btn { background: transparent; border: none; cursor: pointer; } .navbar .search { background-color: var(--dark-bg-second-color); padding: 0.1em; padding-right: 1em; border-radius: 2em; width: 500px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5em; } .navbar .search .sbar { background-color: var(--dark-bg-color); border-radius: 2em; border: none; color: var(--dark-font-color); padding: 0.5em 1em 0.5em 2em; font-size: 0.8em; height: 2em; width: 450px; } .navbar .navbar-block .blog_img img { width: 2em; height: 2em; object-fit: cover; border-radius: 100%; } /* NAVBAR DONE */ /********************************************************************/ .container { margin-top: 73px; display: flex; flex-direction: row; } /********************************************************************/ /* SIDEBAR DONE */ .sidebar { width: 300px; position: sticky; top: 73px; height: 100vh; transition: all 0.5s ease; overflow-x: hidden; overflow-y: auto; transform: translateX(0); visibility: visible; } .sidebar::-webkit-scrollbar { width: 1px; } .sidebar.hidden { width: 0; visibility: hidden; transform: translateX(-200px); } .sidebar .sidebar-closeBtn { display: none; background: transparent; border: none; position: absolute; top: 10px; left: 160px; cursor: pointer; } .sidebar .sidebar-item { display: flex; flex-direction: row; align-items: center; width: 85%; padding: 1em 0.5em 1em 1.5em; margin: 0.5em auto; font-size: 0.8em; gap: 1em; border-radius: 1em; } .sidebar .sidebar-item:hover { background-color: var(--dark-bg-second-color); } .sidebar .sidebar-item i { width: 1em; } .sidebar .sidebar-item a { color: var(--dark-font-color); } .sidebar .sidebar-item ul, .sidebar .sidebar-item li { list-style: none; margin: 0; padding: 0; } .sidebar .sidebar-category, .sidebar .sidebar-theme { border-top: 1px solid var(--sidebar-hr-color); } .sidebar .sidebar-category .link_tit { display: flex; flex-direction: row; align-items: center; width: 85%; padding: 1em 0.5em 1em 1.5em; margin: 0.5em auto; font-size: 0.8em; gap: 0.5em; border-radius: 1em; } .sidebar .sidebar-category ul li ul li ul li:hover, .sidebar .sidebar-category .link_tit:hover { background-color: var(--dark-bg-second-color); } .sidebar .sidebar-category ul li ul li { display: flex; flex-direction: column; width: 85%; padding: 1em 0.5em 1em 1.5em; margin: 0.5em auto; font-size: 0.8em; gap: 0.5em; border-radius: 1em; } .sidebar .sidebar-category ul li ul li ul li { display: flex; flex-direction: row; width: 85%; padding: 0.5em 0.5em 0.5em 3em; margin: 0 auto; font-size: 1em; border-radius: 1em; position: relative; left: -15px; } .sidebar .sidebar-category ul li ul li ul li::before { content: "￫"; position: absolute; top: 0px; left: 1em; font-size: 22px; font-weight: 600; opacity: 0.7; } .sidebar .sidebar-theme { padding: 2em 0em; display: flex; align-items: center; justify-content: center; } .sidebar .sidebar-theme .theme-info { font-size: 0.7em; margin-right: 1em; text-transform: uppercase; } .sidebar .sidebar-theme .switch { position: relative; display: inline-block; width: 3em; height: 1.5em; } .sidebar .sidebar-theme .switch input { opacity: 0; width: 0; height: 0; } .sidebar .sidebar-theme .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(70, 71, 73); -webkit-transition: 0.4s; transition: 0.4s; } .sidebar .sidebar-theme .slider:before { position: absolute; content: ""; height: 1em; width: 1em; left: 4px; bottom: 4px; background-color: #fefefe; -webkit-transition: 0.4s; transition: 0.4s; } .sidebar .sidebar-theme input:checked + .slider { background-color: #ff4081; } .sidebar .sidebar-theme input:focus + .slider { box-shadow: 0 0 1px #ff4081; } .sidebar .sidebar-theme input:checked + .slider:before { -webkit-transform: translateX(1.5em); -ms-transform: translateX(1.5em); transform: translateX(1.5em); } .sidebar .sidebar-theme .slider.round { border-radius: 34px; } .sidebar .sidebar-theme .slider.round:before { border-radius: 50%; } .sidebar .empty-div { height: 100px; } /* SIDEBAR DONE */ /**********************************************************************/ .content { width: 100%; } /**********************************************************************/ /* SEARCH LIST */ .searchList { display: flex; flex-wrap: wrap; padding: 1em; gap: 1em; margin: 0 auto; justify-content: center; max-width: 1024px; } .searchList .one_article { flex: 0 0 calc(32% - 1em); margin-top: 1em; } .searchList .one_article .thumbnail { height: 17vh; width: 100%; background-color: var(--dark-bg-second-color); border-radius: 1em; margin-bottom: 0.5em; } .searchList .one_article .thumbnail img { height: 100%; width: 100%; object-fit: cover; border-radius: 1em; } .searchList .one_article .title { color: var(--dark-font-color); margin-bottom: 0.5em; font-size: 0.9em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; /* number of lines to show */ line-clamp: 1; -webkit-box-orient: vertical; } .searchList .one_article .summary { color: #aaa; margin-bottom: 0.5em; font-size: 0.7em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } .searchList .one_article .date { font-size: 0.6em; color: var(--dark-font-color); } .searchList .one_article .category a { color: var(--dark-font-color); font-size: 0.5em; } /* SEARCH LIST DONE */ /**********************************************************************/ .paging { width: 100%; margin: 2em 0; text-align: center; font-size: 0.8em; display: flex; flex-direction: row; gap: 0.5em; align-items: center; justify-content: center; } .paging .selected { color: var(--highlight-color); } .paging .numbox { display: flex; flex-direction: row; gap: 0.5em; } /**********************************************************************/ /* ARTICLE */ #removeButton { background: none; /* 배경 제거 */ color: #aaa; /* 원하는 색상으로 설정 (여기서는 빨간색 예시) */ border: none; /* 테두리 제거 */ cursor: pointer; /* 커서 모양 변경 (선택사항) */ font-size: 12px; } .entry_wrap { } .entry { max-width: 1024px; margin: 0 auto; } .entry .titleWrap { display: flex; flex-direction: column; padding: 1em; align-items: center; justify-content: center; border-bottom: 0.2px solid rgb(70, 71, 73); margin-bottom: 2em; margin-top: 3em; } .entry .titleWrap .category { display: flex; justify-content: center; align-items: center; border: 1px solid #aaa; border-radius: 1em; width: fit-content; padding: 0.25em 0.5em 0.25em 0.5em; margin-bottom: 0.5em; } .entry .titleWrap .category a { color: #aaa; font-size: 0.5em; } .entry .titleWrap h2 { text-align: center; margin-bottom: 0.5em; } .entry .titleWrap h2 a { font-size: 0.8em; color: var(--dark-font-color); } .entry .titleWrap .info { display: flex; flex-direction: row; gap: 1em; font-size: 0.8em; color: #aaa; } .entry .titleWrap .info .date span { margin-right: 1em; } .entry .titleWrap .info .admin a { color: #aaa; } .entry .article { width: 100%; margin: 0 auto; } .entry .article .article_content { padding: 0em 2em 2em 2em; word-break: break-word; line-height: 150%; } .entry .article .article_content .contents_style { min-height: 50vh; } .entry .article .article_content .contents_style a { color: var(--highlight-color); } /* 플로팅 목차 스타일 */ .toc-absolute { position: fixed; top: 100px; margin-top: 10px; } .toc-fixed { position: fixed; top: 100px; } .toc { left: calc((100% + 300px + 1024px) / 2 + 0px); max-width: 330px; padding: 10px; box-sizing: border-box; } .toc-list > li { margin-top: 10px !important; font-size: 0.9em; } .toc > .toc-list li { margin-bottom: 10px; } .toc > .toc-list li:last-child { margin-bottom: 0; } .toc > .toc-list li a { text-decoration: none; } .is-active-link::before { background-color: var(--highlight-color) !important; } .entry .article .article_content h1, .entry .article .article_content h2, .entry .article .article_content h3, .entry .article .article_content h4 { color: var(--highlight-color); padding-top: 1em; padding-bottom: 0.5em; } .entry .article .article_content h3 { font-weight: bold !important; } .entry .article .article_content ul li, .entry .article .article_content ol li { word-break: break-word; width: 80%; position: relative; left: 50px; margin: 1em 0; } .entry .article .article_content figure { margin-top: 1em; } figure[data-ke-type="opengraph"] div.og-text p.og-title, #tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-title { color: var(--dark-font-color); } .entry .article .article_content table { border: 1px solid var(--sidebar-hr-color); } .entry .article .article_content table tbody tr td { padding: 0.5em; font-size: 0.9em; } .entry .article .article_content .another_category.another_category_color_gray { border: none; background-color: var(--dark-bg-second-color); padding: 1em; border-radius: 1em; } .entry .article .article_content .another_category.another_category_color_gray * { color: var(--dark-font-color) !important; } .entry .article .article_content .another_category.another_category_color_gray h4, .entry .article .article_content .another_category.another_category_color_gray h4 a { color: var(--dark-font-color) !important; } .entry .article .article_content .another_category.another_category_color_gray table { border: none; } .entry .article .article_content .another_category.another_category_color_gray table tr a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .entry .article .article_content .another_category.another_category_color_gray table td { font-size: 12px; } .entry .article .article_content figure.fileblock .filename { color: var(--dark-font-color) !important; } .entry .article .article_content p { line-height: 1.5; margin-bottom: 0.25em !important; } .entry .article .article_content code { margin: 1em 0; border-radius: 5px; padding: 20px; background-color: var(--dark-bg-second-color); color: var(--dark-font-color); font-family: "D2Coding"; } pre code.hljs { overflow-x: auto; } .entry .article .tagTrail { margin-top: 2em; color: var(--dark-font-color); } .entry .article .tagTrail .tagText { color: var(--highlight-color); } .entry .article .tagTrail a { font-size: 0.8em; padding: 0.5em; border-radius: 0.5em; background-color: var(--dark-bg-second-color); } .entry .article .tagTrail a:hover { color: white; background-color: var(--highlight-color); } .progress-circle { position: fixed; bottom: 30px; right: 30px; width: 30px; height: 30px; display: flex; text-align: center; visibility: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .progress-circle:hover { cursor: pointer; transform: scale(1.1); } .top-btn { position: absolute; width: 30px; height: 30px; font-size: 15px; line-height: 30px; color: var(--highlight-color); z-index: 3; } .is-visible { visibility: visible; opacity: 1; } /* ARTICLE DONE */ /**********************************************************************/ /**********************************************************************/ /* Namecard */ .tt_box_namecard { border-radius: 5px; background-color: var(--dark-bg-second-color) !important; margin: 0 2em; } .tt_box_namecard .tt_tit_cont { color: var(--dark-font-color) !important; } /**********************************************************************/ /* COMMENT */ .entry .comment { padding: 2em; word-wrap: break-word; } .entry .comment .commentWrite { margin-top: 0.5em; margin-bottom: 2em; padding: 1.5em; border-radius: 10px; min-height: 150px; background-color: var(--dark-bg-second-color); } .entry .comment .comment_input_box { margin-top: 1em; margin-bottom: 0.5em; min-height: 100px; } .entry .comment .comment_input_box textarea { background: transparent; border: none; width: 100%; height: 100px; border-bottom: 1px solid var(--sidebar-hr-color); resize: none; } .entry .comment .comment_input_box .guset_input_box { display: flex; flex-direction: row; margin-bottom: 1em; gap: 1em; } .entry .comment .comment_input_box .guset_input_box input { flex: 0 0 calc(50% - 1em); background: transparent; border: none; border-bottom: 1px solid var(--sidebar-hr-color); } .entry .comment .write_box { display: flex; flex-direction: row; margin-top: 1em; gap: 1em; } .entry .comment .write_box input { background: transparent; border: none; font-size: 0.8em; font-weight: bold; } input#sercret_check { position: relative; top: 3px; } .entry .comment .commentList .reply-list { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; } .entry .comment .commentList .reply-list.show { max-height: 1000px; } .entry .comment .commentList ol { display: flex; flex-direction: column-reverse; -webkit-flex-direction: column-reverse; } .entry .comment .commentList ol li { list-style: none; margin-top: 1em; padding-bottom: 1em; border-bottom: 1px solid var(--sidebar-hr-color); } .entry .comment .commentList ol li .rp_admin, .entry .comment .commentList ol li .rp_general { margin-bottom: 1em; } .entry .comment .commentList ol li .top { display: flex; flex-direction: row; align-items: center; margin-bottom: 0.8em; } .entry .comment .commentList ol li .top img { height: 2.5em; width: 2.5em; object-fit: cover; border-radius: 100%; margin-right: 0.5em; } .entry .comment .commentList ol li .top .date { margin-left: auto; font-style: italic; font-size: 0.7em; } .entry .comment .commentList ol li .top .date a { color: var(--highlight-color); } .entry .comment .commentList ol li .mid { padding: 0.5em 0 0.5em 0; } .entry .comment .commentList ol li .bottom { text-align: right; font-style: italic; font-size: 0.7em; } .entry .comment .commentList ol li .bottom .modify { margin-right: 1em; } .entry .comment .commentList ol li ul li { margin-top: 0; padding-bottom: 0; border-bottom: none; width: 90%; margin-left: auto; } /**********************************************************************/ footer { padding: 2em 0; text-align: center; font-size: 0.8em; color: #888; } footer a:hover { color: var(--highlight-color); } /**********************************************************************/ /**********************************************************************/ /* Responsive Web */ @media only screen and (max-width: 1600px) { .toc { display: none; } } @media only screen and (max-width: 768px) { * { font-family: "Noto Sans KR", sans-serif; } .navbar { background-color: var(--dark-bg-color); position: fixed; top: 0; left: 0; right: 0; z-index: 998; height: 15px; } .navbar .blog_title { font-size: 0.7em; } .navbar .search { width: 60%; height: 30px; padding-right: 10px; } .navbar .search .sbar { width: calc(100% - 16px); height: 18px; } .container { margin-top: 3em; } .sidebar { z-index: 999; padding-top: 2em; width: 200px; position: fixed; left: 0; top: 0; bottom: 0; background-color: var(--dark-bg-color); } .sidebar .sidebar-closeBtn { display: block; } .searchList .one_article { flex: 0 0 100%; } .searchList .one_article .thumbnail { height: 20vh; } .entry_wrap { display: block; } .entry .titleWrap { padding-top: 3em; } .entry .article .article_content { padding: 0em 1em 1em 1em; } .entry .comment { padding: 1em; } .entry .comment .comment_input_box .guset_input_box input { width: 50%; background: transparent; border: none; border-bottom: 1px solid var(--sidebar-hr-color); } .entry .titleWrap { margin-top: 1em; } .toc { display: none; } footer { padding: 2em 0.5em; text-align: center; font-size: 0.7em; } } /**********************************************************************/