위키
포럼
도구
바뀐글
랜덤

"2025년 제타위키 디자인"의 두 판 사이의 차이

2번째 줄: 2번째 줄:
;제타위키 디자인 2026
;제타위키 디자인 2026


<syntaxhighlight lang='html' run outheight='400'>
<syntaxhighlight lang='html' run outheight='600'>
<head>
<style>
<style>
   :root {
   :root {
     --bg: #fff;
     --bg: #fff;
     --text: #222;
     --text: #222;
     --link: #03e;
     --link: #339;
     --link-ext: #066;
     --link-ext: #366;
     --link-new: #833;
     --link-new: #933;
     --border: rgb(120 120 120 / 0.5);
     --border: rgb(120 120 120 / 0.5);


15번째 줄: 16번째 줄:
     --nav-text: #fff;
     --nav-text: #fff;
     --nav-hover-bg: rgb(0 0 0 / 0.2);
     --nav-hover-bg: rgb(0 0 0 / 0.2);
    /* 새로 추가: 전체 페이지 최대 폭 */
    --page-max-width: 800px;
    --page-h-pad: 16px; /* 좌우 여백 */
   }
   }


22번째 줄: 27번째 줄:
     --link: #7af;
     --link: #7af;
     --link-ext: #7aa;
     --link-ext: #7aa;
     --link-new: #eaa;
     --link-new: #faa;
   }
   }


33번째 줄: 38번째 줄:
   }
   }


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


   .theme-panel {
   .page {
     background: var(--bg);
     background: var(--bg);
     color: var(--text);
     color: var(--text);
46번째 줄: 51번째 줄:
   }
   }


   .nav {
   .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;
     font-size: 12px;
     line-height: 1.4;
     line-height: 1.4;
55번째 줄: 69번째 줄:
   }
   }


   .nav-top {
  /* header 안쪽 내용도 가운데 정렬 */
   .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;
     display: flex;
     justify-content: space-between;
     justify-content: space-between;
62번째 줄: 88번째 줄:
   }
   }


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


   .nav-link {
   .site-link {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
76번째 줄: 102번째 줄:
   }
   }


   .nav-link:hover {
   .site-link:hover {
     text-decoration: none;
     text-decoration: none;
     background: var(--nav-hover-bg);
     background: var(--nav-hover-bg);
88번째 줄: 114번째 줄:
   }
   }


   .nav-current {
   .is-current {
     color: #ff9;
     color: #ff9;
   }
   }


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


   .nav-search-wrapper {
   .search-area {
    padding: 8px 12px;
     flex: 1 1 auto;
     flex: 1 1 auto;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
    /* header-sub의 높이가 자연스럽게 나오도록 padding */
    padding: 8px 0;
   }
   }
   .nav-search {
 
   .search-box {
     flex: 1 1 auto;
     flex: 1 1 auto;
     display: flex;
     display: flex;
117번째 줄: 145번째 줄:
   }
   }


   .content {
  /* ===== LAYOUT ===== */
 
  /* 본문 영역 전체(사이드바+기사+TOC)를 감싸는 wrap */
   .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;
     flex: 1 1 auto;
     padding: 16px;
     display: flex;
    flex-direction: row;
    min-height: 200px;
     font-size: 14px;
     font-size: 14px;
     line-height: 1.5;
     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;
   }
   }


166번째 줄: 247번째 줄:
   }
   }


   .body-text {
   .text-block {
     font-size: 14px;
     font-size: 14px;
     margin: 0 0 12px;
     margin: 0 0 12px;
190번째 줄: 271번째 줄:
   }
   }


   .footer {
   .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;
  }
 
  /* ===== FOOTER ===== */
 
  .site-footer {
     font-size: 12px;
     font-size: 12px;
     line-height: 1.4;
     line-height: 1.4;
     background: var(--nav-bg);
     background: var(--nav-bg);
     color: var(--nav-text);
     color: var(--nav-text);
     padding: 12px 16px;
    border-top: 1px solid var(--border);
  }
 
  .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;
     text-align: center;
     border-top: 1px solid var(--border);
  }
 
  /* 반응형(선택): 좁은 화면에서 좌우 사이드바 숨기고 본문만 보여줄 수도 있음 */
  @media (max-width: 800px) {
    .side-nav,
    .side-toc {
      display: none;
    }
     .layout {
      border-left: 0;
      border-right: 0;
    }
   }
   }
</style>
</style>
</head>
<body class="page-bg">
<body class="page-bg">
   <template id="panel-template">
   <template id="panel-template">
     <header class="nav">
     <header class="site-header">
       <div class="nav-top">
       <div class="site-header-inner">
         <div class="nav-flex">
         <div class="site-header-top">
           <a href="#" class="nav-link brand">Z</a>
           <div class="row">
          <a href="#" class="nav-link nav-current">위키</a>
            <a href="#" class="site-link brand">Z</a>
          <a href="#" class="nav-link">포럼</a>
            <a href="#" class="site-link is-current">위키</a>
          <a href="#" class="nav-link">도구</a>
            <a href="#" class="site-link">포럼</a>
        </div>
            <a href="#" class="site-link">도구</a>
        <div class="nav-flex">
          </div>
          <a href="#" class="nav-link">로그인</a>
          <div class="row">
            <a href="#" class="site-link">로그인</a>
          </div>
         </div>
         </div>
      </div>


      <div class="nav-sub">
        <div class="site-header-sub">
        <div class="nav-search-wrapper">
          <div class="search-area">
          <div class="nav-flex nav-search">
            <div class="row search-box">
            <input class="search-input" type="search" placeholder="검색" />
              <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>
        <div class="nav-flex">
          <a href="#" class="nav-link">랜덤</a>
          <a href="#" class="nav-link">바뀐글</a>
         </div>
         </div>
       </div>
       </div>
     </header>
     </header>


     <main class="content">
     <section class="layout-outer">
       <h1 class="title">문서 제목</h1>
       <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>


      <p class="page-meta">
        <div class="page-main">
        <span class="meta-left">2025-10-31 · user1</span>
           <div class="article">
        <span class="meta-right">
            <h1 class="title">문서 제목</h1>
           <a href="#" class="meta-link">읽기</a>
          <a href="#" class="meta-link">편집</a>
        </span>
      </p>


      <p class="body-text">
            <p class="page-meta">
        <a href="#" class="inlink">한산섬</a> 달 밝은 밤에
              <span class="meta-left">2025-10-31 · user1</span>
        <a href="#" class="inlink ext">수루</a>에 홀로 앉아 큰 칼 옆에 차고 깊은
              <span class="meta-right">
        시름 하는 차에 어디서 <a href="#" class="inlink new">일성호가</a>는 남의
                <a href="#" class="meta-link">읽기</a>
        애를 끊나니
                <a href="#" class="meta-link">편집</a>
      </p>
              </span>
    </main>
            </p>


     <footer class="footer">© 2025 제타위키 · CC BY-SA 4.0</footer>
            <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>
   </template>


   <div class="theme-grid">
   <div class="themes">
     <section class="theme-panel" id="light"></section>
     <section class="page" id="light"></section>
     <section class="theme-panel theme-dark" id="dark"></section>
     <section class="page theme-dark" id="dark"></section>
   </div>
   </div>


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

2025년 11월 1일 (토) 17:09 판

1 개요

제타위키 디자인 2026
<head>
<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 {
    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;
  }

  /* header 안쪽 내용도 가운데 정렬 */
  .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: 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;
    /* header-sub의 높이가 자연스럽게 나오도록 padding */
    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 ===== */

  /* 본문 영역 전체(사이드바+기사+TOC)를 감싸는 wrap */
  .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);
  }

  .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;
  }

  /* ===== FOOTER ===== */

  .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 {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 12px var(--page-h-pad);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* 반응형(선택): 좁은 화면에서 좌우 사이드바 숨기고 본문만 보여줄 수도 있음 */
  @media (max-width: 800px) {
    .side-nav,
    .side-toc {
      display: none;
    }
    .layout {
      border-left: 0;
      border-right: 0;
    }
  }
</style>
</head>
<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 같이 보기

원본 주소 "https://zetawiki.com/w/index.php?title=2025년_제타위키_디자인&oldid=944813"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}