Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

My page

The screen people enter to find their orders and their perks — even a long list must say where things are through its headings.

Example screens

Live preview

Source

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

  <header class="dc-my__bar">
    <h1 class="dc-my__bar-t">마이</h1>
    <a class="dc-my__ic-btn" href="#dc-my-set">
      <svg class="dc-my__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="12" r="3"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M18.4 5.6l-1.8 1.8M7.4 16.6l-1.8 1.8"/></svg>
      <span class="dc-sr">설정</span>
    </a>
  </header>

  <main class="dc-my__body" id="dc-my-body">
    <section class="dc-my__card">
      <span class="dc-my__avatar" aria-hidden="true">박</span>
      <div class="dc-my__who">
        <p class="dc-my__name">박서연<span class="dc-my__grade">VIP</span></p>
        <p class="dc-my__mail">[email protected]</p>
      </div>
      <a class="dc-my__edit" href="#dc-my-edit">프로필 수정</a>
    </section>

    <ul class="dc-my__stats">
      <li class="dc-my__stat">
        <a class="dc-my__stat-a" href="#dc-my-order">
          <strong class="dc-my__stat-n">12</strong>
          <span class="dc-my__stat-k">주문</span>
        </a>
      </li>
      <li class="dc-my__stat">
        <a class="dc-my__stat-a" href="#dc-my-coupon">
          <strong class="dc-my__stat-n">4</strong>
          <span class="dc-my__stat-k">쿠폰</span>
        </a>
      </li>
      <li class="dc-my__stat">
        <a class="dc-my__stat-a" href="#dc-my-point">
          <strong class="dc-my__stat-n">3,240</strong>
          <span class="dc-my__stat-k">적립금</span>
        </a>
      </li>
    </ul>

    <section class="dc-my__group">
      <h2 class="dc-my__group-t">주문 내역</h2>
      <ul class="dc-my__menu">
        <li>
          <a class="dc-my__link" href="#dc-my-order">
            <span class="dc-my__link-t">주문·배송 조회</span>
            <span class="dc-my__link-v">배송 중 1건</span>
            <svg class="dc-my__chev" 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>
        </li>
        <li>
          <a class="dc-my__link" href="#dc-my-review">
            <span class="dc-my__link-t">작성할 후기</span>
            <span class="dc-my__link-v">2건 · 최대 1,000원 적립</span>
            <svg class="dc-my__chev" 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>
        </li>
        <li>
          <a class="dc-my__link" href="#dc-my-fav">
            <span class="dc-my__link-t">찜한 상품</span>
            <span class="dc-my__link-v">18개</span>
            <svg class="dc-my__chev" 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>
        </li>
      </ul>
    </section>

    <section class="dc-my__group">
      <h2 class="dc-my__group-t">설정</h2>
      <ul class="dc-my__menu">
        <li>
          <a class="dc-my__link" href="#dc-my-addr">
            <span class="dc-my__link-t">배송지 관리</span>
            <span class="dc-my__link-v">망원동 2가 · 공동현관 비밀번호 저장</span>
            <svg class="dc-my__chev" 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>
        </li>
        <li class="dc-my__row">
          <label class="dc-my__sw-lab" for="dc-my-push">주문·배송 알림 받기</label>
          <input class="dc-my__sw" id="dc-my-push" type="checkbox" role="switch" checked>
        </li>
        <li>
          <a class="dc-my__link" href="#dc-my-help">
            <span class="dc-my__link-t">고객센터</span>
            <span class="dc-my__link-v">오전 9시~오후 6시</span>
            <svg class="dc-my__chev" 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>
        </li>
      </ul>
    </section>

    <a class="dc-my__out" href="#dc-my-logout">로그아웃</a>
    <p class="dc-my__ver">마켓온 4.12.0 · <a class="dc-my__ver-a" href="#dc-my-terms">이용약관</a> · <a class="dc-my__ver-a" href="#dc-my-privacy">개인정보 처리방침</a></p>
  </main>

  <nav class="dc-my__tabs" aria-label="주요 화면">
    <a class="dc-my__tab" href="#dc-my-home">
      <svg class="dc-my__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-my__tab-t">홈</span>
    </a>
    <a class="dc-my__tab" href="#dc-my-cat">
      <svg class="dc-my__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-my__tab-t">카테고리</span>
    </a>
    <a class="dc-my__tab" href="#dc-my-search">
      <svg class="dc-my__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-my__tab-t">검색</span>
    </a>
    <a class="dc-my__tab" href="#dc-my-cart">
      <svg class="dc-my__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-my__tab-t">장바구니</span>
    </a>
    <a class="dc-my__tab is-on" href="#dc-my-body" aria-current="page">
      <svg class="dc-my__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-my__tab-t">마이</span>
    </a>
  </nav>
</div>
.dc-my { display:flex; flex-direction:column; min-height:100vh; background:var(--dc-sunken); color:var(--dc-text); font-family:var(--dc-font); }
.dc-my__bar { position:sticky; top:0; z-index:4; display:flex; align-items:center; justify-content:space-between; padding:calc(var(--dc-safe-top) + var(--dc-2)) var(--dc-2) var(--dc-2) var(--dc-4); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-my__bar-t { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.dc-my__ic-btn { 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-my__ic { width:22px; height:22px; flex:none; }
.dc-my__body { flex:1; padding:var(--dc-4) var(--dc-3) var(--dc-6); }
.dc-my__card { display:flex; align-items:center; gap:var(--dc-3); padding:var(--dc-4); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-my__avatar { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; flex:none; border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:19px; font-weight:800; }
.dc-my__who { flex:1; min-width:0; }
.dc-my__name { display:flex; align-items:center; gap:var(--dc-2); font-size:17px; font-weight:800; letter-spacing:-.01em; }
.dc-my__grade { padding:1px var(--dc-2); border-radius:var(--dc-r-xs); background:var(--dc-brand); color:var(--dc-text-on); font-size:11px; font-weight:700; letter-spacing:0; }
.dc-my__mail { margin-top:2px; font-size:13px; color:var(--dc-text-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-my__edit { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); color:var(--dc-text); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.dc-my__stats { display:flex; margin-top:var(--dc-2); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-my__stat { flex:1; }
.dc-my__stat + .dc-my__stat { border-left:1px solid var(--dc-line); }
.dc-my__stat-a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:68px; color:var(--dc-text); text-decoration:none; }
.dc-my__stat-n { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.dc-my__stat-k { font-size:12px; color:var(--dc-text-sub); }
.dc-my__group { margin-top:var(--dc-6); }
.dc-my__group-t { padding:0 var(--dc-2) var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-my__menu { border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); overflow:hidden; }
.dc-my__menu > li + li { border-top:1px solid var(--dc-line); }
.dc-my__link { display:flex; align-items:center; gap:var(--dc-3); min-height:56px; padding:var(--dc-2) var(--dc-3) var(--dc-2) var(--dc-4); color:var(--dc-text); text-decoration:none; }
.dc-my__link:active { background:var(--dc-sunken); }
.dc-my__link-t { flex:none; font-size:15px; }
.dc-my__link-v { flex:1; min-width:0; font-size:13px; color:var(--dc-text-mute); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-my__chev { width:18px; height:18px; flex:none; color:var(--dc-text-mute); }
.dc-my__row { display:flex; align-items:center; gap:var(--dc-3); padding:0 var(--dc-4); }
.dc-my__sw-lab { flex:1; display:flex; align-items:center; min-height:56px; font-size:15px; cursor:pointer; }
.dc-my__sw { appearance:none; position:relative; width:52px; height:32px; flex:none; margin:0; border:0; border-radius:var(--dc-r-full); background:var(--dc-line-bold); transition:background var(--dc-fast); }
.dc-my__sw::after { content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:var(--dc-r-full); background:var(--dc-surface); box-shadow:var(--dc-sh-1); transition:transform var(--dc-fast); }
.dc-my__sw:checked { background:var(--dc-brand); }
.dc-my__sw:checked::after { transform:translateX(20px); }
.dc-my__out { display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:var(--dc-6); font-size:14px; color:var(--dc-text-sub); text-decoration:underline; text-underline-offset:.2em; }
.dc-my__ver { margin-top:var(--dc-2); font-size:12px; color:var(--dc-text-mute); text-align:center; }
.dc-my__ver-a { display:inline-block; padding:var(--dc-2) 2px; color:var(--dc-text-sub); text-underline-offset:.2em; }
.dc-my__tabs { position:sticky; bottom:0; z-index:4; display:flex; padding-bottom:var(--dc-safe-bottom); background:var(--dc-surface); border-top:1px solid var(--dc-line); }
.dc-my__tab { 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-my__tab.is-on { color:var(--dc-brand); }
.dc-my__tab-t { font-size:11px; font-weight:600; }

How to use it

  • Put what is in progress first: the order being delivered and the coupons waiting, ahead of the name
  • Group menu rows three or four at a time under a heading; twelve rows in one block get skipped
  • Show the value on the right of each row, so nobody has to tap in to learn they have four coupons

Watch out for

  • A toggle row needs its whole text as the <label>; the switch alone is too small a target
  • Keep sign-out at the very end and never as a primary button — a mis-tap cannot be undone

Next