이게 뭐야?
ChatSCP는 2023년 만우절을 맞아 OpenAI사의 대화형 인공지능 서비스 ChatGPT를 흉내내어 SCP 재단 한국어 위키가 제작한 농담입니다. 또는, 이 문서는 ChatSCP에 활용하기 위해 thd-glasses가 제작한 전용 CSS 테마일 수 있습니다.
어떻게 쓰는 건데
ChatSCP CSS 테마는 적절한 인용 구문을 위키닷 문서에 삽입하는 것으로 적용할 수 있습니다. 아래 구문을 원하는 위키닷 문서 내에 입력하면 테마를 적용할 수 있습니다.
[[include :scpko:theme:chatscp]]
만우절 문서에는 언어 전환 버튼도 있고 제목도 없고 뭔가 다르던데?
죄송합니다. 제가 미흡한 설명을 제공했습니다. 2023년 만우절 기념 페이지는 이 테마를 적용한 뒤 몇가지 독자적인 CSS 코드를 추가로 적용했습니다. 해당 페이지에서 페이지 소스를 확인하실 수 있습니다.
언어 전환 버튼은 탭뷰를 활용한 응용 기능으로, 사용법이 매우 복잡할 수 있습니다. thd-glasses는 SCP 재단 영어 위키의 재단 시설 허브에서 해당 사용법을 참조하였으며 응용을 원하는 사람은 대화방에서 thd-glasses에게 도움을 구할 수 있습니다.
위키닷 문서의 제목을 숨기는 코드는 다음과 같습니다.
[[module CSS]]
#page-title {
display: none;
}
[[/module]]
그럼 이 질문이랑 답변 박스는 어떻게 입력해
질문 상자와 답변 상자는 div 요소에 정해진 클래스를 적용하는 것으로 쉽게 입력할 수 있습니다. 다음과 같은 템플릿을 활용하여 질문 상자와 답변 상자를 만들 수 있습니다.
[[div class="Q"]]
여기에 사용자가 질문을 입력할 수 있습니다.
[[/div]]
[[div class="A"]]
여기에 ChatSCP가 답변을 입력할 수 있습니다.
[[/div]]
오류 뜨는 건 어떻게 표현할 수 있을까
ChatSCP 농담에서 문서를 오류 메시지로 종료시키는 것은 효과적으로 웃음을 유발할 수 있습니다. 오류 상황은 다음과 같은 템플릿을 입력하여 구현할 수 있습니다. url에는 해당 문서의 토론란, 대화방 안내, 또는 원하는 다른 문서의 주소를 입력할 수 있습니다.
[[div class="A"]]
이러한 답변 상자에서 ChatSCP의 답변 내용을 입력하다가 오류 상황으로 전환하십시오. [[span class="chatwait"]]█[[/span]]
[[div class="error-wait"]]
오류가 발생했습니다. 문제가 반복된다면 [[[url|help.chatscp.com]]]에 보고해주세요.
[[/div]]
[[/div]]
이 테마의 CSS 코드를 분석해줘
알겠습니다. ChatSCP CSS 테마는 두 가지 코드 묶음으로 구성되어 있습니다. 하나는 전환 가능한 사이드바로, 테마 페이지에 이미 인용되어 있으므로 이용자는 별도로 인용하지 않아도 해당 컴포넌트를 적용할 수 있습니다. 해당 컴포넌트의 소스코드를 열람하고자 할 땐 페이지에 방문하여 페이지 소스를 확인해야 할 수 있습니다.
하나는 이 페이지에 작성되어 있는 고유 CSS 코드입니다. 전체 코드는 아래와 같이 나타낼 수 있습니다.
:root { --color-ip: #644; --color-sub: #944; --color-bg: #fff0f0; } div#container-wrap, #header { background: none; } #header h2, #search-top-box { display: none; } #page-title { font-weight: 900; padding-top: 2em; } #content-wrap { min-height: calc( 100vh - 75px ); margin-top: 0; margin-bottom: -5px; padding-bottom: 5em; background: var(--color-bg); } #header { height: 60px; padding-bottom: 0; } #header h1 { position: fixed; top: 10px; left: 50%; transform: translateX(-470px); margin-left: 0; float: none; z-index: 50; } #header h1 a { padding: 0; line-height: 1; color: transparent; text-shadow: none; font-size: 44px !important; } #header h1 a::before { content: "ChatSCP"; color: #FFF; } #header h1 a span { font-size: 0; } #login-status { position: fixed; top: 5px; right: 50%; transform: translateX(470px); } #login-status, #login-status a { color: #FFF; } #top-bar { position: fixed; top: 30px; left: 0; } #top-bar .mobile-top-bar { left: unset; right: 1em; } #top-bar .open-menu a { top: 10px; border-radius: 0; background-color: var(--color-bg); border-color: var(--color-ip); color: var(--color-ip); } #top-bar > div > ul > li > a { padding-left: 0.5em; padding-right: 0.5em; } #top-bar ul li ul, #top-bar ul li ul li ul { border: solid 1px var(--color-ip); } #top-bar ul li.sfhover a, #top-bar ul li:hover a { background: var(--color-ip); color: var(--color-bg); } #top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a { border-top: 1px solid var(--color-ip); } #top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover { background: var(--color-sub); } .c_topbar_arrow { color: var(--color-bg); } #side-bar { background: var(--color-ip); } #page-content { padding-top: 2em; } #footer { position: fixed; bottom: 0; left: 0; right: 0; margin-top: 0; z-index: 30; } #footer .options { width: calc( 100% - 125px ); } .page-rate-widget-box .rate-points { background: #633 !important; } #extra-div-1 { position: fixed; top: 0; left: 0; height: 60px; width: 100vw; background: var(--color-ip); } .Q, .A, .code-header { box-sizing: border-box; width: 100%; padding: 1em 2em; color: #FFF; font-size: 130%; } .Q a, .A a, .code-header a { color: #FBB; text-decoration: underline; } .Q a:visited, .A a:visited, .code-header a:visited { color: #F99; } .Q a.newpage, .A a.newpage, .code-header a.newpage { color: #FDD; } .Q { margin: 2em auto 0; background: var(--color-ip); border-radius: 1em 1em 0 0; } .A { margin: 0.5em auto 0; background: var(--color-sub); border-radius: 0 0 1em 1em; } .code-header { position: relative; margin: 0 auto; background: var(--color-ip); border-radius: 10px 10px 0 0; font-size: 12px; color: #ECC; height: 25px; } .code-header::before { content: "Copy This Code By Yourself"; position: absolute; right: 1em; top: 50%; transform: translateY(-50%); } .chatwait { display: inline-block; animation: 0.5s infinite alternate steps(2, jump-none) blink; } .error-wait { color: #FBB; width: 100%; box-sizing: border-box; padding: 10px; margin-bottom: 10px; border: 2px solid #FBB; border-radius: 10px; } .error-wait p { margin: 0; } .error-wait a { white-space: nowrap; } .code, .code-body { background: #ECC; border: none; border-radius: 0 0 10px 10px; color: var(--color-ip); padding: 0.5em 1em; margin: 0 0 0.4em; } .code pre { white-space: pre-wrap; } #license-area { display: none; } .hl-var { color: #A55; } .hl-special { color: #A33; } .hl-reserved { color: #A44; } .hl-identifier, .hl-brackets, .hl-code, .hl-number, .hl-string { color: var(--color-ip); } @media(max-width: 1100px) { #header h1 { left: 70px; transform: none; } } @media(max-width: 980px) { #login-status { right: 2em; transform: none; } } @media(max-width: 767px) { #header h1 { left: 0.5em; } #top-bar .open-menu a { bottom: 1em; } #page-content { padding-top: 1em; } .yui-navset { z-index: unset; } } @media(max-width: 440px) { #header h1 a { font-size: 20px !important } #header h1 a::before { content: "Chat\A SCP"; white-space: pre; text-align: center; letter-spacing: 2px; } } @keyframes blink { 0% { color: #FFF; } 100% { color: transparent; } }
정말 고마운데 주석이 하나도 없네 주석 좀 달아줘
알겠습니다. 이 페이지의 CSS 코드에 주석을 추가하면 다음과 같█
오류가 발생했습니다. 문제가 반복된다면 help.chatscp.com에 보고해주세요.