រំលងទៅខ្លឹមសារ
EN KO VI NE KM ID
រចនានាមប័ណ្ណ English បណ្តុំតួអង្គ ១៦ ការរចនា · PNG / SVG / PDF

ទំព័រដើមកម្មវិធី (បន្ទះកាត)

អេក្រង់ដំបូងពេលបើកកម្មវិធី — សម្រាប់អ្នកដែលមិនទាន់សម្រេចថាទិញអ្វី វាត្រូវដាក់ជម្រើសជូនភ្លាម។

អេក្រង់គំរូ

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

ប្រភព

<script>document.body.className="dc-bleed"</script>
<div class="dc-hm">

  <header class="dc-hm__bar">
    <button class="dc-hm__place" type="button">
      <svg class="dc-hm__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
      <span class="dc-hm__place-name">망원동 2가</span>
      <svg class="dc-hm__ic dc-hm__ic--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9.5l6 6 6-6"/></svg>
      <span class="dc-sr">배송지 바꾸기</span>
    </button>
    <div class="dc-hm__bar-act">
      <a class="dc-hm__btn-ic" href="#dc-hm-alarm">
        <svg class="dc-hm__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0-6 6c0 4-2 5-2 5h16s-2-1-2-5a6 6 0 0 0-6-6z"/><path d="M10 18a2 2 0 0 0 4 0"/></svg>
        <span class="dc-hm__dot" aria-hidden="true"></span>
        <span class="dc-sr">알림 (읽지 않음 3건)</span>
      </a>
      <a class="dc-hm__btn-ic" href="#dc-hm-cart">
        <svg class="dc-hm__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.6"/><circle cx="18" cy="20" r="1.6"/><path d="M3 4h2l2.6 11h11L21 7H6"/></svg>
        <span class="dc-hm__count" aria-hidden="true">2</span>
        <span class="dc-sr">장바구니 (2개 담김)</span>
      </a>
    </div>
  </header>

  <main class="dc-hm__body" id="dc-hm-body">
    <form class="dc-hm__search" action="#dc-hm-search" method="get">
      <label class="dc-sr" for="dc-hm-q">상품 검색</label>
      <svg class="dc-hm__ic dc-hm__ic--mute" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></svg>
      <input class="dc-hm__search-in" id="dc-hm-q" name="q" type="search" placeholder="한라봉, 두부, 샐러드 …">
    </form>

    <nav class="dc-hm__chips" aria-label="상품 분류">
      <a class="dc-hm__chip is-on" href="#dc-hm-body" aria-current="page">추천</a>
      <a class="dc-hm__chip" href="#dc-hm-fruit">과일·채소</a>
      <a class="dc-hm__chip" href="#dc-hm-meat">정육·수산</a>
      <a class="dc-hm__chip" href="#dc-hm-milk">유제품</a>
      <a class="dc-hm__chip" href="#dc-hm-deli">간편식</a>
    </nav>

    <a class="dc-hm__promo" href="#dc-hm-promo">
      <span class="dc-hm__promo-tag">첫 주문 혜택</span>
      <p class="dc-hm__promo-title">밤 11시까지 주문하면<br>내일 아침 7시 전 도착</p>
      <p class="dc-hm__promo-sub">망원동 새벽배송 · 15,000원 이상 무료</p>
    </a>

    <section class="dc-hm__sec">
      <div class="dc-hm__sec-head">
        <h2 class="dc-hm__sec-title">오늘의 특가</h2>
        <a class="dc-hm__more" href="#dc-hm-deal">전체 보기<svg class="dc-hm__ic dc-hm__ic--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg></a>
      </div>
      <ul class="dc-hm__list">
        <li>
          <a class="dc-hm__card" href="#dc-hm-p1">
            <span class="dc-hm__thumb dc-hm__thumb--a" aria-hidden="true"></span>
            <span class="dc-hm__card-in">
              <span class="dc-hm__tag">새벽배송</span>
              <span class="dc-hm__name">제주 한라봉 2.5kg (8~11과)</span>
              <span class="dc-hm__price"><span class="dc-hm__off">33%</span> <s class="dc-hm__was">19,900원</s> <strong class="dc-hm__now">13,300원</strong></span>
              <span class="dc-hm__meta">별점 4.8 · 후기 1,204개</span>
            </span>
          </a>
        </li>
        <li>
          <a class="dc-hm__card" href="#dc-hm-p2">
            <span class="dc-hm__thumb dc-hm__thumb--b" aria-hidden="true"></span>
            <span class="dc-hm__card-in">
              <span class="dc-hm__tag">새벽배송</span>
              <span class="dc-hm__name">유기농 베이비채소 믹스 200g</span>
              <span class="dc-hm__price"><span class="dc-hm__off">18%</span> <s class="dc-hm__was">5,980원</s> <strong class="dc-hm__now">4,900원</strong></span>
              <span class="dc-hm__meta">별점 4.6 · 후기 512개</span>
            </span>
          </a>
        </li>
        <li>
          <a class="dc-hm__card" href="#dc-hm-p3">
            <span class="dc-hm__thumb dc-hm__thumb--c" aria-hidden="true"></span>
            <span class="dc-hm__card-in">
              <span class="dc-hm__tag">1+1</span>
              <span class="dc-hm__name">한살림 국산콩 두부 300g</span>
              <span class="dc-hm__price"><strong class="dc-hm__now">2,480원</strong></span>
              <span class="dc-hm__meta">별점 4.9 · 후기 3,021개</span>
            </span>
          </a>
        </li>
      </ul>
    </section>

    <section class="dc-hm__sec">
      <div class="dc-hm__sec-head">
        <h2 class="dc-hm__sec-title">다시 구매하기</h2>
        <a class="dc-hm__more" href="#dc-hm-again">전체 보기<svg class="dc-hm__ic dc-hm__ic--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg></a>
      </div>
      <ul class="dc-hm__row">
        <li class="dc-hm__row-item">
          <a class="dc-hm__mini" href="#dc-hm-p4">
            <span class="dc-hm__mini-thumb dc-hm__thumb--b" aria-hidden="true"></span>
            <span class="dc-hm__mini-name">서울우유 1L</span>
            <span class="dc-hm__mini-price">2,980원</span>
            <span class="dc-hm__mini-meta">8월 28일 구매</span>
          </a>
        </li>
        <li class="dc-hm__row-item">
          <a class="dc-hm__mini" href="#dc-hm-p5">
            <span class="dc-hm__mini-thumb dc-hm__thumb--c" aria-hidden="true"></span>
            <span class="dc-hm__mini-name">곰곰 무항생제 대란 15구</span>
            <span class="dc-hm__mini-price">5,490원</span>
            <span class="dc-hm__mini-meta">8월 21일 구매</span>
          </a>
        </li>
        <li class="dc-hm__row-item">
          <a class="dc-hm__mini" href="#dc-hm-p6">
            <span class="dc-hm__mini-thumb dc-hm__thumb--a" aria-hidden="true"></span>
            <span class="dc-hm__mini-name">청우 발아현미밥 12입</span>
            <span class="dc-hm__mini-price">9,900원</span>
            <span class="dc-hm__mini-meta">8월 14일 구매</span>
          </a>
        </li>
      </ul>
    </section>
  </main>

  <nav class="dc-hm__tabs" aria-label="주요 화면">
    <a class="dc-hm__tab is-on" href="#dc-hm-body" aria-current="page">
      <svg class="dc-hm__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6.5 8 6.5"/><path d="M6 10v9h12v-9"/></svg>
      <span class="dc-hm__tab-t">홈</span>
    </a>
    <a class="dc-hm__tab" href="#dc-hm-cat">
      <svg class="dc-hm__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg>
      <span class="dc-hm__tab-t">카테고리</span>
    </a>
    <a class="dc-hm__tab" href="#dc-hm-search">
      <svg class="dc-hm__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4.5 4.5"/></svg>
      <span class="dc-hm__tab-t">검색</span>
    </a>
    <a class="dc-hm__tab" href="#dc-hm-cart">
      <svg class="dc-hm__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.6"/><circle cx="18" cy="20" r="1.6"/><path d="M3 4h2l2.6 11h11L21 7H6"/></svg>
      <span class="dc-hm__tab-t">장바구니</span>
      <span class="dc-hm__tab-badge" aria-hidden="true">2</span>
      <span class="dc-sr">2개 담김</span>
    </a>
    <a class="dc-hm__tab" href="#dc-hm-my">
      <svg class="dc-hm__ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8.5" r="3.5"/><path d="M5 20c1.4-3.4 4-5 7-5s5.6 1.6 7 5"/></svg>
      <span class="dc-hm__tab-t">마이</span>
    </a>
  </nav>
</div>
.dc-hm { display:flex; flex-direction:column; min-height:100vh; background:var(--dc-sunken); color:var(--dc-text); font-family:var(--dc-font); }
.dc-hm__bar { position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:var(--dc-2); padding:calc(var(--dc-safe-top) + var(--dc-2)) var(--dc-3) var(--dc-2) var(--dc-4); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-hm__place { display:flex; align-items:center; gap:var(--dc-1); min-height:44px; margin-right:auto; padding:0; border:0; background:none; font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); }
.dc-hm__place-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-hm__ic { width:22px; height:22px; flex:none; }
.dc-hm__ic--sm { width:16px; height:16px; }
.dc-hm__ic--mute { color:var(--dc-text-mute); }
.dc-hm__bar-act { display:flex; align-items:center; }
.dc-hm__btn-ic { position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:var(--dc-r-full); color:var(--dc-text); text-decoration:none; }
.dc-hm__btn-ic:active { background:var(--dc-sunken); }
.dc-hm__dot { position:absolute; top:10px; right:11px; width:7px; height:7px; border-radius:var(--dc-r-full); background:var(--dc-danger); box-shadow:0 0 0 2px var(--dc-surface); }
.dc-hm__count { position:absolute; top:5px; right:4px; min-width:18px; padding:0 4px; border-radius:var(--dc-r-full); background:var(--dc-brand); color:var(--dc-text-on); font-size:11px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--dc-surface); }
.dc-hm__body { flex:1; padding:var(--dc-4) 0 var(--dc-6); }
.dc-hm__search { display:flex; align-items:center; gap:var(--dc-2); margin:0 var(--dc-4) var(--dc-4); padding:0 var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-surface); }
.dc-hm__search-in { width:100%; min-height:46px; border:0; background:none; font-size:15px; }
.dc-hm__chips { display:flex; gap:var(--dc-2); padding:0 var(--dc-4) var(--dc-5); overflow-x:auto; scrollbar-width:none; }
.dc-hm__chip { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-full); background:var(--dc-surface); font-size:14px; color:var(--dc-text-sub); text-decoration:none; white-space:nowrap; }
.dc-hm__chip.is-on { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-weight:700; }
.dc-hm__promo { display:block; margin:0 var(--dc-4) var(--dc-6); padding:var(--dc-5); border-radius:var(--dc-r-lg); background:linear-gradient(135deg, var(--dc-brand-soft), color-mix(in srgb, var(--dc-brand-soft) 45%, var(--dc-surface))); color:var(--dc-text); text-decoration:none; box-shadow:var(--dc-sh-1); }
.dc-hm__promo-tag { display:inline-block; margin-bottom:var(--dc-2); padding:2px var(--dc-2); border-radius:var(--dc-r-xs); background:var(--dc-brand); color:var(--dc-text-on); font-size:11px; font-weight:700; }
.dc-hm__promo-title { font-size:18px; font-weight:800; line-height:1.4; letter-spacing:-.02em; }
.dc-hm__promo-sub { margin-top:var(--dc-2); font-size:13px; color:var(--dc-text-sub); }
.dc-hm__sec { margin-bottom:var(--dc-6); }
.dc-hm__sec-head { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); padding:0 var(--dc-4); }
.dc-hm__sec-title { font-size:17px; font-weight:800; letter-spacing:-.02em; }
.dc-hm__more { display:inline-flex; align-items:center; gap:2px; min-height:44px; padding-left:var(--dc-2); font-size:13px; color:var(--dc-text-sub); text-decoration:none; white-space:nowrap; }
.dc-hm__list { display:flex; flex-direction:column; gap:var(--dc-2); padding:0 var(--dc-4); }
.dc-hm__card { display:flex; gap:var(--dc-3); padding:var(--dc-3); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); color:var(--dc-text); text-decoration:none; }
.dc-hm__thumb { width:84px; height:84px; flex:none; border-radius:var(--dc-r-sm); }
.dc-hm__thumb--a { background:linear-gradient(135deg, var(--dc-warn-soft), var(--dc-sunken)); }
.dc-hm__thumb--b { background:linear-gradient(135deg, var(--dc-ok-soft), var(--dc-sunken)); }
.dc-hm__thumb--c { background:linear-gradient(135deg, var(--dc-info-soft), var(--dc-sunken)); }
.dc-hm__card-in { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dc-hm__tag { align-self:flex-start; padding:1px var(--dc-2); border-radius:var(--dc-r-xs); background:var(--dc-ok-soft); color:var(--dc-ok); font-size:11px; font-weight:700; }
.dc-hm__name { font-size:14px; line-height:1.4; }
.dc-hm__price { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--dc-1); margin-top:2px; }
.dc-hm__off { color:var(--dc-danger); font-size:15px; font-weight:800; }
.dc-hm__was { color:var(--dc-text-mute); font-size:12px; }
.dc-hm__now { font-size:17px; font-weight:800; letter-spacing:-.01em; }
.dc-hm__meta { color:var(--dc-text-mute); font-size:12px; }
.dc-hm__row { display:flex; gap:var(--dc-3); padding:0 var(--dc-4); overflow-x:auto; scrollbar-width:none; }
.dc-hm__row-item { flex:none; width:124px; }
.dc-hm__mini { display:flex; flex-direction:column; gap:2px; color:var(--dc-text); text-decoration:none; }
.dc-hm__mini-thumb { width:124px; height:124px; border-radius:var(--dc-r-md); }
.dc-hm__mini-name { margin-top:var(--dc-1); font-size:13px; line-height:1.35; }
.dc-hm__mini-price { font-size:14px; font-weight:800; }
.dc-hm__mini-meta { color:var(--dc-text-mute); font-size:11px; }
.dc-hm__tabs { position:sticky; bottom:0; z-index:4; display:flex; padding-bottom:var(--dc-safe-bottom); border-top:1px solid var(--dc-line); background:var(--dc-surface); }
.dc-hm__tab { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:54px; color:var(--dc-text-mute); text-decoration:none; }
.dc-hm__tab.is-on { color:var(--dc-brand); }
.dc-hm__tab-t { font-size:11px; font-weight:600; }
.dc-hm__tab-badge { position:absolute; top:5px; left:calc(50% + 7px); min-width:16px; padding:0 3px; border-radius:var(--dc-r-full); background:var(--dc-danger); color:var(--dc-text-on); font-size:10px; font-weight:700; line-height:16px; text-align:center; }

របៀបប្រើ

  • អាសយដ្ឋានដឹកជញ្ជូននិងប្រអប់ស្វែងរកនៅខាងលើ; ពាក់កណ្ដាលនៃមូលហេតុបើកកម្មវិធីគឺ 'ទំនិញមកដល់ពេលណា'
  • កាតមួយត្រឹមបីបន្ទាត់ — ឈ្មោះ តម្លៃ និងមូលហេតុមួយដើម្បីទិញ (បញ្ចុះតម្លៃ ការវាយតម្លៃ)
  • ដាក់ឈ្មោះឲ្យផ្នែកនីមួយៗ។ បញ្ជី 'ណែនាំ' វែងគ្មានទីបញ្ចប់ធ្វើឲ្យភ្នែកគ្មានកន្លែងឈប់

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

  • ទុកចន្លោះក្រោមបញ្ជីកាត ដើម្បីរបារថេបមិនបិទកាតចុងក្រោយ
  • កាត់ជួររំកិលផ្ដេកឲ្យកាតបន្ទាប់លេចពាក់កណ្ដាល — នោះជាសញ្ញាតែមួយថាមានបន្ថែម
  • តំបន់ចុចរបស់ឈីបនិងប៊ូតុងរូបសញ្ញាត្រូវមាន ៤៤px

បន្ទាប់