ជង់កាត

កាត់អេក្រង់វែងជាកាតៗ ដើម្បីឲ្យភ្នែកដឹងថាខ្លឹមសារមួយកំណាត់ចប់ត្រង់ណា។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<div class="dc-stack">
  <a class="dc-stack__card" href="#">
    <span class="dc-stack__kicker">오늘 마감</span>
    <span class="dc-stack__title">식품 포장 · 평택</span>
    <span class="dc-stack__meta">일당 130,000원 · 08:00~17:00</span>
    <span class="dc-stack__foot">
      <span class="dc-stack__tag">초보 가능</span>
      <span class="dc-stack__tag">기숙사</span>
    </span>
  </a>
  <a class="dc-stack__card" href="#">
    <span class="dc-stack__title">용접 보조 · 김해</span>
    <span class="dc-stack__meta">일당 160,000원 · 주 5일</span>
    <span class="dc-stack__foot">
      <span class="dc-stack__tag">경력 1년</span>
      <span class="dc-stack__tag">통근 버스</span>
    </span>
  </a>
  <a class="dc-stack__card" href="#">
    <span class="dc-stack__title">호텔 객실 정리 · 제주</span>
    <span class="dc-stack__meta">월급 2,450,000원 · 4대 보험</span>
    <span class="dc-stack__foot">
      <span class="dc-stack__tag">숙식 제공</span>
    </span>
  </a>
</div>

.dc-stack {
  display: flex; flex-direction: column; gap: var(--dc-3);
  font-family: var(--dc-font);
}
.dc-stack__card {
  display: flex; flex-direction: column; gap: var(--dc-1);
  min-height: 72px; padding: var(--dc-4);
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-surface); box-shadow: var(--dc-sh-1);
  color: var(--dc-text); text-decoration: none;
  transition: background var(--dc-fast);
}
.dc-stack__card:active { background: var(--dc-sunken); }
.dc-stack__kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  color: var(--dc-danger);
}
.dc-stack__title { font-size: 16px; font-weight: 700; }
.dc-stack__meta { font-size: 13px; color: var(--dc-text-sub); }
.dc-stack__foot {
  display: flex; flex-wrap: wrap; gap: var(--dc-1);
  margin-top: var(--dc-2);
}
.dc-stack__tag {
  padding: 3px var(--dc-2);
  border-radius: var(--dc-r-full);
  background: var(--dc-sunken);
  font-size: 11px; font-weight: 700; color: var(--dc-text-sub);
}
.dc-stack--overlap { gap: 0; }
.dc-stack--overlap .dc-stack__card {
  border-radius: var(--dc-r-lg);
  border-color: var(--dc-line-bold);
  box-shadow: var(--dc-sh-2);
}
.dc-stack--overlap .dc-stack__card:not(:last-child) {
  /* 겹치는 24px 은 아래 여백으로만 덮는다 — 글자가 가려지면 스택이 아니라 버그다 */
  padding-bottom: calc(var(--dc-4) + var(--dc-6));
}
.dc-stack--overlap .dc-stack__card + .dc-stack__card {
  margin-top: calc(var(--dc-6) * -1);
  padding-top: var(--dc-6);
}
.dc-stack--overlap .dc-stack__kicker {
  /* 쿠폰 유효기간은 급한 일이 아니다 — 빨강은 '오늘 마감' 에만 쓴다 */
  color: var(--dc-text-sub);
}
.dc-stack--grouped {
  gap: 0; overflow: hidden;
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-surface);
}
.dc-stack--grouped .dc-stack__card {
  border: 0; border-radius: 0; box-shadow: none;
  min-height: 64px; padding: var(--dc-3) var(--dc-4);
}
.dc-stack--grouped .dc-stack__card + .dc-stack__card {
  border-top: 1px solid var(--dc-line);
}

របៀបប្រើ

កាតមួយ ដាក់រឿងតែមួយ — បើត្រូវការចំណងជើងទីពីរ មានន័យថាត្រូវការកាតទីពីរ
ចន្លោះរវាងកាត មិនត្រូវតូចជាងចន្លោះខាងក្នុងកាតទេ បើមិនដូច្នោះវាមើលទៅដូចកាតតែមួយ
បញ្ជីវែង គួររៀបកាតតៗគ្នា មិនត្រូវដាក់ជ្រួតគ្នា; ការដាក់ជ្រួតសមតែពេលមានកាតតិច ដូចជាប័ណ្ណបញ្ចុះតម្លៃ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

បើចុចបានទាំងកាត មិនត្រូវដាក់តំណផ្សេងនៅខាងក្នុងទេ
ប្រើស្រមោលដូចគ្នាគ្រប់កាត — ស្រមោលខុសគ្នាបង្ហាញលំដាប់ដែលអ្នកមិនបានចង់
ពេលដាក់ជ្រួត មិនត្រូវបិទបន្ទាត់ចំណងជើងរបស់កាតខាងក្រោមទេ

បន្ទាប់

គ្រោងអេក្រង់កម្មវិធី ប្លង់ កម្មវិធី

ក្បាលទំព័របត់ពេលរំកិល ប្លង់ កម្មវិធី

ជួរដេករំកិលផ្ដេក ប្លង់ កម្មវិធី

ស្រោមតំបន់សុវត្ថិភាព ប្លង់ កម្មវិធី