2025년 제타위키 디자인

1 개요

제타위키 디자인 2026

<style>
:root {
  --bg: #fff;
  --text: #222;
  --link: #339;
  --link-ext: #366;
  --link-new: #933;
  --border: rgb(120 120 120 / 0.5);
  --nav-bg: #345;
  --nav-text: #fff;
  --nav-hover-bg: rgb(0 0 0 / 0.2);
  --page-max-width: 800px;
  --page-h-pad: 16px;
}
.theme-dark {
  --bg: #222;
  --text: #fff;
  --link: #7af;
  --link-ext: #7aa;
  --link-new: #faa;
}
.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, .site-header-inner, .layout-outer, .site-footer-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 { 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 { background: var(--nav-hover-bg); }
.brand {
  padding: 0 12px;
  color: #e77;
  font-size: 18px;
  font-weight: 900;
}
.is-current { 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 {
  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);
}
.side-nav {
  flex: 0 0 auto;
  width: 160px;
  border-right: 1px solid var(--border);
  padding: 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  box-sizing: border-box;
}
.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 {
  flex: 0 0 auto;
  width: 160px;
  border-left: 1px solid var(--border);
  padding: 16px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  box-sizing: border-box;
}
.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;
  margin-left: 8px;
  font-size: 12px;
}
.meta-link:hover { text-decoration: underline; }
.text-block {
  font-size: 14px;
  margin: 0 0 12px;
  line-height: 1.5;
  color: var(--text);
}
.inlink { color: var(--link); text-decoration: none; }
.inlink:hover { text-decoration: underline; }
.ext { color: var(--link-ext); }
.new { color: var(--link-new); }
.toc-heading, .nav-heading {
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 8px;
  color: var(--text);
}
.toc-list, .nav-list { list-style: none; margin: 0; padding: 0; }
.toc-item, .nav-item { margin: 0 0 6px; }
.toc-link, .nav-item-link {
  color: var(--link);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
}
.toc-link:hover, .nav-item-link:hover { text-decoration: underline; }
.site-footer {
  font-size: 12px;
  line-height: 1.4;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-top: 1px solid var(--border);
}
.site-footer-inner { padding: 12px var(--page-h-pad); text-align: center; }
@media (max-width: 800px) {
  .side-nav, .side-toc { display: none; }
  .layout { border-left: 0; border-right: 0; }
}
</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 is-current">위키</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="side-nav">
        <p class="nav-heading">탐색</p>
        <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>
      </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>
            </span>
          </p>
          <p class="text-block">
            <a href="#" class="inlink">한산섬</a> 달 밝은 밤에
            <a href="#" class="inlink ext">수루</a>에 홀로 앉아 큰 칼 옆에 차고 깊은
            시름 하는 차에 어디서 <a href="#" class="inlink new">일성호가</a>는 남의
            애를 끊나니
          </p>
        </div>
        <aside class="side-toc">
          <p class="toc-heading">목차</p>
          <ul class="toc-list">
            <li class="toc-item"><a class="toc-link" href="#">1. 개요</a></li>
            <li class="toc-item"><a class="toc-link" href="#">2. 본문</a></li>
            <li class="toc-item"><a class="toc-link" href="#">3. 같이 보기</a></li>
          </ul>
        </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 theme-dark" id="dark"></section>
</div>

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

2 같이 보기

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