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

2025년 11월 1일 (토) 14:41 판

1 개요

제타위키 디자인 2026
구분	Light	Dark
배경색	white	#222
글자색	#222	white
<style>
  :root {
    --bg: white;
    --text: #1d1d1d;
    --link: #03e;
    --link-ext: #066;
    --link-new: #833;
    --border: rgb(120 120 120 / 0.5);
  }

  .theme-dark {
    --bg: #1d1d1d;
    --text: white;
    --link: #7af;
    --link-ext: #7aa;
    --link-new: #eaa;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
    background: #777;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
  }

  .panel {
    background: var(--bg);
    color: var(--text);
    padding: 24px;
    min-height: 260px;
  }

  .label {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: inline-block;
    margin-bottom: 16px;
  }

  h1 {
    font-size: 20px;
    margin: 0 0 12px;
  }

  p {
    font-size: 14px;
    margin: 0 0 12px;
  }

  a {
    color: var(--link);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  a.ext {
    color: var(--link-ext);
  }
  a.new {
    color: var(--link-new);
  }
</style>
</head>
<body>
  <div class="grid">
    <!-- LIGHT -->
    <section class="panel">
      <div class="label">LIGHT</div>
      <h1>한산섬 달 밝은 밤에</h1>
      <p>
        <a href="#">한산섬</a> 달 밝은 밤에 <a href="#" class="ext">수루</a>에 홀로 앉아 큰 칼 옆에 차고 깊은 시름 하는 차에 어디서 <a href="#" class="new">일성호가</a>는 남의 애를 끊나니
      </p>
    </section>

    <!-- DARK -->
    <section class="panel theme-dark">
      <div class="label">DARK</div>
      <h1>한산섬 달 밝은 밤에</h1>
      <p>
        <a href="#">한산섬</a> 달 밝은 밤에 <a href="#" class="ext">수루</a>에 홀로 앉아 큰 칼 옆에 차고 깊은 시름 하는 차에 어디서 <a href="#" class="new">일성호가</a>는 남의 애를 끊나니
      </p>
    </section>
  </div>
</body>
2 같이 보기
