2025년 제타위키 디자인

1 개요

2025년 제타위키 디자인

<style>
  a {
    color: var(--link);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  :root {
    --bg: #fff;
    --text: #222;
    --muted: #666;
    --muted2: #bbb;
    --border: #8884;

    --link: #00f;
    --link-ext: #077;
    --link-new: #933;

    --link-bg: #00f1;
    --link-new-bg: #9331;

    --brand: #e77;
    --nav-bg: #456;
    --nav-text: #fff;

    --page-max-width: 800px;
    --page-h-pad: 16px;
  }

  .theme-dark {
    --bg: #222;
    --text: #fff;
    --muted: #ccc;
    --muted2: #888;
    --link: #9cf;
    --link-ext: #9cc;
    --link-new: #faa;

    --link-bg: #9cf1;
    --link-new-bg: #faa1;
  }

  .page-bg {
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR",
      "Apple SD Gothic Neo", sans-serif;
    background: #777;
    padding: 16px;
  }

  .themes {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
  }

  .page {
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
  }

  .page-inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding-left: var(--page-h-pad);
    padding-right: var(--page-h-pad);
    width: 100%;
    box-sizing: border-box;
  }

  .site-header {
    font-size: 12px;
    line-height: 1.4;
    background: var(--nav-bg);
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
  }

  .site-header-inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding-left: var(--page-h-pad);
    padding-right: var(--page-h-pad);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .site-header-top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 36px;
  }

  .row {
    display: flex;
    align-items: stretch;
  }

  .site-link {
    display: flex;
    align-items: center;
    padding: 0 8px;
    text-decoration: none;
    color: var(--nav-text);
    height: 100%;
  }

  .site-link:hover {
    text-decoration: none;
    background: #0003;
  }

  .brand {
    padding: 0 12px;
    color: var(--brand);
    font-size: 18px;
    font-weight: 900;
  }

  .site-active {
    color: #ff9;
  }

  .site-header-sub {
    display: flex;
    align-items: stretch;
  }

  .search-area {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 8px 0;
  }

  .search-box {
    flex: 1 1 auto;
    display: flex;
  }

  .search-input {
    padding: 8px;
    border: 0;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    width: 100%;
  }

  .layout-outer {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding-left: var(--page-h-pad);
    padding-right: var(--page-h-pad);
    width: 100%;
    box-sizing: border-box;
  }

  .layout {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    min-height: 200px;
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
  }

  .book {
    display: none;
    flex: 0 0 auto;
    width: 160px;
    padding: 16px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    color: var(--muted);
    background: #7771;
  }

  .show-book .book {
    display: block;
  }

  .nav-heading {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 8px;
    color: var(--muted);
  }

  .nav-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
  }

  .nav-item {
    margin: 0 0 8px;
  }

  .nav-item-link {
    display: block;
    color: var(--muted);
    text-decoration: none;
    font-size: .7rem;
    line-height: 1.3;
  }

  .nav-item-link:hover {
    text-decoration: none;
    color: #cc0;
  }

  .book-active {
    color: var(--text);
    font-weight: 600;
  }

  .nav-list .nav-list {
    margin: 4px 0 8px;
    padding-left: 12px;
  }

  .page-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
  }

  .article {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px;
    color: var(--text);
    box-sizing: border-box;
  }

  .side-toc {
    display: none;
    flex: 0 0 auto;
    width: 160px;
    padding: 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    box-sizing: border-box;
  }

  .show-toc .side-toc {
    display: block;
  }

  .toc-inner {
    margin-left: 12px;
  }

  .title {
    font-size: 20px;
    margin: 0 0 12px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text);
  }

  .page-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: var(--text);
    opacity: 0.8;
  }

  .meta-left {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .meta-right {
    flex: 1 1 auto;
    text-align: right;
    white-space: nowrap;
  }

  .meta-link {
    color: var(--link);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 1em;
    font-size: 12px;
  }

  .meta-link:hover {
    background: #8883;
    text-decoration: none;
  }

  .cat-links {
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--border);
  }

  .cat-links li {
    display: inline;
  }

  .cat-links a {
    font-size: 12px;
    padding: 4px 8px;
    line-height: 2.3;
    border-radius: 2em;
    color: var(--link);
    background: var(--link-bg);
    white-space: nowrap;
  }
  .cat-links a.new {
    color: var(--link-new);
    background: var(--link-new-bg);
  }

  .cat-links a:hover {
    text-decoration: none;
    background: #7775;
  }

  .text-block {
    font-size: 14px;
    margin: 0 0 12px;
    line-height: 1.5;
    color: var(--text);
  }

  .ext {
    color: var(--link-ext);
  }

  .new {
    color: var(--link-new);
  }

  /* 🔸 toc (오른쪽 목차 상태 색상) */
  .toc-heading,
  .nav-heading {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 8px;
  }

  .toc-list,
  .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .toc-item,
  .nav-item {
    margin: 0 0 6px;
  }

  .toc-link {
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
  }

  .toc-link:hover {
    text-decoration: underline;
  }

  .toc-active {
    color: var(--text);
    font-weight: 600;
  }

  .toc-passed {
    color: var(--muted2);
  }

  .code-block {
    padding: 8px;
    margin: 0;
    border: 1px solid var(--border);
    background: #7771;
  }

  .code-block pre {
    margin: 0;
  }

  .site-footer {
    font-size: 12px;
    line-height: 1.4;
    background: var(--nav-bg);
    color: var(--nav-text);
  }

  .site-footer-inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 12px var(--page-h-pad);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
</style>

<body class="page-bg">
  <template id="panel-template">
    <header class="site-header">
      <div class="site-header-inner">
        <div class="site-header-top">
          <div class="row">
            <a href="#" class="site-link brand">Z</a>
            <a href="#" class="site-link site-active">위키</a>
            <a href="#" class="site-link">포럼</a>
            <a href="#" class="site-link">도구</a>
          </div>
          <div class="row">
            <a href="#" class="site-link">로그인</a>
          </div>
        </div>

        <div class="site-header-sub">
          <div class="search-area">
            <div class="row search-box">
              <input class="search-input" type="search" placeholder="검색" />
            </div>
          </div>
          <div class="row">
            <a href="#" class="site-link">랜덤</a>
            <a href="#" class="site-link">바뀐글</a>
          </div>
        </div>
      </div>
    </header>

    <section class="layout-outer">
      <div class="layout">
        <aside class="book">
          <p class="nav-heading">튜토리얼</p>
          <ul class="nav-list">
            <li class="nav-item">
              <a class="nav-item-link" href="#">시작하기</a>
              <ul class="nav-list">
                <li class="nav-item">
                  <a class="nav-item-link" href="#">소개</a>
                </li>
                <li class="nav-item">
                  <a class="nav-item-link" href="#">설치</a>
                </li>
                <li class="nav-item">
                  <a class="nav-item-link book-active" href="#">빠른 시작</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-item-link" href="#">Guides</a>
              <ul class="nav-list">
                <li class="nav-item">
                  <a class="nav-item-link" href="#">테마 & 배색</a>
                </li>
                <li class="nav-item">
                  <a class="nav-item-link" href="#">레이아웃</a>
                </li>
                <li class="nav-item">
                  <a class="nav-item-link" href="#">컴포넌트</a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-item-link" href="#">Reference</a>
              <ul class="nav-list">
                <li class="nav-item">
                  <a class="nav-item-link" href="#">API 레퍼런스</a>
                </li>
                <li class="nav-item">
                  <a class="nav-item-link" href="#">FAQ</a>
                </li>
              </ul>
            </li>
          </ul>
        </aside>

        <div class="page-main">
          <div class="article">
            <h1 class="title">빠른 시작</h1>

            <p class="page-meta">
              <span class="meta-left">2025-10-31 · user1</span>
              <span class="meta-right">
                <a href="#" class="meta-link">읽기</a>
                <a href="#" class="meta-link">편집</a>
                <a href="#" class="meta-link">⫶</a>
              </span>
            </p>
            <ul class="cat-links">
              <li><a href="#" title="분류:C">C</a></li>
              <li><a href="#" title="분류:C++">C++</a></li>
              <li><a href="#" title="분류:Go">Go</a></li>
              <li><a href="#" title="분류:Java">Java</a></li>
              <li><a href="#" title="분류:JavaScript">JavaScript</a></li>
              <li><a href="#" title="분류:PHP">PHP</a></li>
              <li><a href="#" title="분류:Python">Python</a></li>
              <li><a href="#" title="분류:R">R</a></li>
              <li><a href="#" title="분류:Hello World">Hello World</a></li>
              <li><a href="#"
                  title="분류:프로그래밍" class="new">프로그래밍</a></li>
            </ul>

            <p>
              <a href="#">사랑</a>하는 <a href="#" class="ext">사람</a>은 즉 사랑하지 아니하던
              사람이고 또 사랑하는 사람은 사랑하지 아니하는 사람이었기도 하니까
              사랑하는 사람이 사랑하는 <a href="#" class="new">구경</a>을 하고
              싶거든 사랑하지 아니하던 사람이 사랑하는 것을 구경하든지 사랑하지
              아니하는 사람이 사랑하는 구경을 하든지 사랑하지 아니하던 사람이나
              사랑하지 아니하는 사람이 사랑하지 아니하는 것을 구경하든지
              하였으면 그만이다
            </p>

            <div class="code-block">
              <pre>
#include<stdio.h>
int main() {
   printf("Hello, World"); // Hello, World
}</pre>
            </div>
          </div>

          <aside class="side-toc">
            <div class="toc-inner">
              <p class="toc-heading">목차</p>
              <ul class="toc-list">
                <li class="toc-item">
                  <a class="toc-link toc-passed" href="#">개요</a>
                </li>
                <li class="toc-item">
                  <a class="toc-link toc-passed" href="#">문단1</a>
                </li>
                <li class="toc-item">
                  <a class="toc-link toc-active" href="#">문단2</a>
                </li>
                <li class="toc-item">
                  <a class="toc-link" href="#">문단3</a>
                </li>
                <li class="toc-item">
                  <a class="toc-link" href="#">같이 보기</a>
                </li>
                <li class="toc-item">
                  <a class="toc-link" href="#">참고</a>
                </li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </section>

    <footer class="site-footer">
      <div class="site-footer-inner">© 2025 제타위키 · CC BY-SA 4.0</div>
    </footer>
  </template>

  <div class="themes">
    <section class="page" id="light"></section>
    <section class="page show-toc" id="light-toc"></section>
    <section class="page show-book" id="light-book"></section>
    <section class="page show-toc show-book" id="light-toc-book"></section>
    <section class="page theme-dark" id="dark"></section>
    <section class="page theme-dark show-toc" id="dark-toc"></section>
    <section class="page theme-dark show-book" id="dark-book"></section>
    <section class="page theme-dark show-toc show-book" id="dark-toc-book"></section>
  </div>

  <script>
    const tpl = document.getElementById('panel-template').content;
    ['light', 'light-toc', 'light-book', 'light-toc-book', 'dark', 'dark-toc', 'dark-book', 'dark-toc-book'].forEach(id => {
      document.getElementById(id).appendChild(tpl.cloneNode(true));
    });
  </script>
</body>

2 같이 보기

• 제타위키
• 2017년 제타위키 디자인
• 2020년 제타위키 디자인