이 샌드박스는 더이상 사용하실 수 없습니다.
후속 샌드박스로 이전해주시기 바랍니다.
샌드박스 2호기
샌드박스 3호기
새로운 샌드박스에 초안 페이지를 생성한 뒤, 이 페이지의 설정 → 페이지 소스에서 내용을 복사해 옮겨붙이시면 됩니다.
이전에 어려움이 있다면 포럼이나 대화방에서 운영진에게 문의하세요.
실험 영역
제목 2단계
제목 3단계
제목 4단계
제목 5단계
제목 6단계
이것은
인용문입니다.
thisIsCode {
display: content;
}
제목 1 | 제목 2 | 제목 3 |
---|---|---|
칸 1 | 칸 2 | 칸 3 |
긴 칸 4 | 칸 5 | |
칸 6 | 긴 칸 7 | |
기이인 칸 8 |
코드 영역
:root { --main-color: #4188F1; --border-color: #E1E8ED; } html { font-size: 15px; } body { color: #373A3C; font-size: .95rem; font-family: 'Apple SD Gothic Neo','Spoqa Han Sans','SpoqaHanSans','Noto Sans KR','Noto Sans','Noto Sans CJK KR','NanumBarunGothic','Nanum Gothic','KoPub Dotum','Malgun Gothic','맑은 고딕',sans-serif; line-height: 1.5; background-color: #F5F5F5; } h1, h2, h3, h4, h5, h6, b { font-family: 'Apple SD Gothic Neo','Spoqa Han Sans','SpoqaHanSans','Noto Sans KR','Noto Sans','Noto Sans CJK KR','NanumBarunGothic','Nanum Gothic','KoPub Dotum','Malgun Gothic','맑은 고딕',sans-serif; } a, a:visited { color: #337AB7; text-decoration: none; } a:hover, a:focus { color: #23527C; text-decoration: underline; transition: .3s; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn:hover { transition: .3s } div#container-wrap { background: none; } #header { padding: 0; width: 100%; max-width: unset; height: 2.8rem; position: fixed; top: 0; box-sizing: border-box; background-color: var(--main-color); background-image: none; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); } #header h1 { margin: 0; } #header h1 a { padding: 0; font-size: 2rem; line-height: unset; text-shadow: unset; user-select: none; } #header h2 span { display: none; } #login-status a { color: #FFF; } /* WikiID Syntax START */ #login-status { position: unset; top: unset; right: unset; float: right; font-size: 0 } #login-status .printuser { margin: 0; background-color: none; width: 28px; padding: 0; } #login-status .printuser img.small { background: none !Important; margin: 0; padding: 0; height: 29px; width: 29px; border-radius: .35rem; box-shadow: 0 0 3px #3f3f3f; } #login-status [id] { font-size: .72rem } #login-status>a[href="javascript:;"] { font-size: 0; font-weight: bold; margin: 0; text-align: center; text-decoration: none; background: none; width: 21.8px; height: 21px; border: none; } #login-status>a[href="javascript:;"]:before { display: inline-block; font-family: FontAwesome; font-size: 1.3rem; text-rendering: auto; -webkit-font-smoothing: antialiased; transform: translate(0, 0); } #login-status #account-topbutton:before { content: "\f013"; } #login-status .login-status-sign-in { rright: 11px !important; } #login-status .login-status-sign-in:before { content: "\f090"; } #login-status .login-status-create-account { rright: 35px !important; margin: 0 0 .25rem; } div#login-status a.login-status-create-account { rright: 11px; } #login-status .login-status-create-account:before { content: "\f067"; } #login-status #my-account { display: none } #login-status a strong { font-size: 1rem; white-space: nowrap } #login-status #account-topbutton:not(:focus):not(:focus-within):not(:hover):not(:active)+#account-options { display: none !important } #header #login-status #account-topbutton+#account-options:focus, #header #login-status #account-topbutton+#account-options:focus-within, #header #login-status #account-topbutton+#account-options:hover, #header #login-status #account-topbutton+#account-options:active { display: block !important } #account-options ul>li { width: 40% } #account-options ul>li a:hover { text-decoration: none } #login-status ul a { color: #000 } /* WikiID Syntax END */ /* Libre START */ #account-options { box-shadow: 0 6px 12px rgb(0 0 0 / 18%); border-color: #e1e8ed; min-width: 160px; padding: 5px 0; margin: 2px 0 0; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; } #account-options ul li:hover { background-color: #2774DC; transition: 0.3s; } #account-options ul li:hover a { color: #FFF; } #account-options ul li { display: block; padding: 0; width: unset; clear: both; font-weight: 400; line-height: 1.5; text-align: inherit; white-space: nowrap; background: 0 0; border: 0; } #account-options ul li a { padding: 3px 20px; font-size: .9rem; text-decoration: none; } /* Libre END */ #search-top-box { position: unset; top: unset; right: unset; float: right; margin-top: .4rem; width: unset; } #search-top-box-form { display: inline-flex; display: -ms-inline-flex; display: -webkit-inline-flex; margin: 0; margin-right: -1px; width: 100%; } #search-top-box-form input[type=submit] { margin-left: 0; height: 29px; background: white; box-shadow: none; border: 1px solid #CCC; border-radius: 0 .35rem .35rem 0; color: #4F5B63; } #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { background: var(--main-color); box-shadow: none; border: 1px solid #2774DC; } #search-top-box-input { margin: 0; margin-right: -1px; padding: .2rem .4rem; height: 1.4rem; background-color: #FFF; box-shadow: none; border: 1px solid #CCC; border-radius: .35rem 0 0 .35rem; color: #373A3C; font-size: .8rem; } #search-top-box input.empty { color: #999; } #search-top-box-input:hover, #search-top-box-input:focus { border: 1px solid #CCC; background-color: #FFF; box-shadow: none; color: unset; } #content-wrap { margin: 3.33rem auto 0; max-width: 1200px; } #main-content { padding: 0; margin: 0 20em 0 2em; border: 1px solid var(--border-color); border-radius: .35rem; background-color: #FFF; } #page-title { padding: 1rem; margin: 0; background-color: #F5F8FA; border-color: var(--border-color); border-radius: .35rem .35rem 0 0; color: #000; font-size: 2rem; font-weight: bold; } #breadcrumbs { margin: 1em 1em 0 1em; } #page-content { padding: 1rem; } #page-content h1, #page-content h2, #page-content h3, #page-content h4, #page-content h5, #page-content h6 { margin-top: 1rem; border-bottom: 1px dashed #e1e8ed; margin-bottom: 0.6rem; padding-bottom: 0.6rem; overflow-wrap: break-word; overflow: hidden; color: unset; font-weight: 500; } /* TOC START */ #toc { margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; font-size: .9rem; background: #f5f8fa; border: 1px solid #e1e8ed; border-radius: .35rem; } #toc .title { margin: 0; padding: .6rem 0 .6rem 1.2rem; flex: auto; order: 1; font-weight: bold; font-size: 1.2rem; font-weight: bold; border: none; } #toc #toc-action-bar { flex: auto; order: 2; padding: .6rem 1.2rem .6rem 0; } #toc a[onclick="WIKIDOT.page.listeners.foldToc(event)"], #toc a[onclick="WIKIDOT.page.listeners.unfoldToc(event)"] { font-size: 0rem; } #toc a[onclick="WIKIDOT.page.listeners.foldToc(event)"]::before { content: "[숨기기]"; font-size: .95rem; } #toc a[onclick="WIKIDOT.page.listeners.unfoldToc(event)"]::before { content: "[보이기]"; font-size: .95rem; } #toc-list { margin: 0; padding: 0.6rem 1.2rem; width: 100%; flex: auto; order: 3; background-color: #FFF; border-top: 1px solid #e1e8ed; border-radius: 0 0 .35rem .35rem; } /* TOC END */ blockquote { margin: 1em 1.2em; padding: 1.2em; background-color: #D4D4D425; border: none; } #page-options-container { padding: 1rem; background-color: #F5F8FA; border-top: 1px solid var(--border-color); border-radius: 0 0 .35rem .35rem; } #action-area { background-color: #f5f8fa; } #action-area h1 { margin-top: 0; } .open-menu a { display: none; } #side-bar { top: 0; left: unset; right: 2em; } #side-bar .side-block { border: 1px solid var(--border-color); border-radius: .35rem; box-shadow: none; } #side-bar div.menu-item a { color: #373A3C; font-size: .8rem; font-weight: normal; } #side-bar .heading { color: var(--main-color); border-bottom: solid 2px var(--main-color); } @media (max-width: 1023px) { #header { padding: 0 .5rem; height: 5.8rem; } #search-top-box { margin-top: 3.1rem; width: calc(100% - .5rem); text-align: left; } #search-top-box-input { display: inline-block; width: 70vw; } #content-wrap { margin-top: 6.25rem; } } @media (max-width: 767px) { #main-content { margin: 0; max-width: unset; border-radius: 0; } #side-bar { top: 0; right: -19em; transition: .5s; transition-delay: .13s; position: fixed; background-color: #F5F5F5; box-shadow: -2px 0 4px 0 rgb(0 0 0 / 16%), -2px 0 10px 0 rgb(0 0 0 / 12%); z-index: 45; } #side-bar::before { content: "◀"; background-color: rgba(0,0,0,.5); color: #FFF; font-size: 2rem; position: fixed; bottom: 0; right: 0; border-radius: 0; width: 3rem; height: 3rem; text-align: center; z-index: 43; } #side-bar:hover { right: 0; } #side-bar:hover ~ #main-content::after { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); content: ''; z-index: 44; } } @media screen and (min-width: 1200px) { #header { box-sizing: border-box; padding: 0 calc((100% - 1200px) / 2 + 3rem); } }