Skip to content

๐Ÿ’… ๊น€๋ฒ„๊ทธ์˜ UI ๊ฐœ๋ฐœ ๋ถ€ํŠธ์บ ํ”„ - ๊ฒฝ๋ ฅ๊ฐ™์€ ์‹ ์ž…์œผ๋กœ ๋ ˆ๋ฒจ์—…

Notifications You must be signed in to change notification settings

rohjs/tomorrow-house

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๋‚ด์ผ์˜ ์ง‘

1. GNB

  • ๋กœ๊ทธ์ธ์„ ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ
<div class="button-group">
  <button
    class="gnb-icon-button is-search lg-hidden"
    type="button"
    aria-label="๊ฒ€์ƒ‰์ฐฝ ์—ด๊ธฐ ๋ฒ„ํŠผ"
  >
    <i class="ic-search"></i>
  </button>
  <a
    class="gnb-icon-button is-cart"
    href="/"
    aria-label="์žฅ๋ฐ”๊ตฌ๋‹ˆ ํŽ˜์ด์ง€๋กœ ์ด๋™"
  >
    <i class="ic-cart"></i>
  </a>

  <div class="gnb-auth sm-hidden">
    <a href="/">๋กœ๊ทธ์ธ</a>
    <a href="/">ํšŒ์›๊ฐ€์ž…</a>
  </div>
</div>
  • ๋กœ๊ทธ์ธ์„ ํ•œ ๊ฒฝ์šฐ
<div class="button-group">
  <button
    class="gnb-icon-button is-search lg-hidden"
    type="button"
    aria-label="๊ฒ€์ƒ‰์ฐฝ ์—ด๊ธฐ ๋ฒ„ํŠผ"
  >
    <i class="ic-search"></i>
  </button>

  <a
    class="gnb-icon-button sm-hidden"
    href="/"
    aria-label="์Šคํฌ๋žฉ๋ถ ํŽ˜์ด์ง€๋กœ ์ด๋™"
  >
    <i class="ic-bookmark"></i>
  </a>

  <a
    class="gnb-icon-button sm-hidden"
    href="/"
    aria-label="๋‚ด ์†Œ์‹ ํŽ˜์ด์ง€๋กœ ์ด๋™"
  >
    <i class="ic-bell"></i>
  </a>

  <a
    class="gnb-icon-button is-cart"
    href="/"
    aria-label="์žฅ๋ฐ”๊ตฌ๋‹ˆ ํŽ˜์ด์ง€๋กœ ์ด๋™"
  >
    <i class="ic-cart"></i>
    <strong class="badge">5</strong>
  </a>

  <button
    class="gnb-avatar-button sm-hidden"
    type="button"
    aria-label="๋งˆ์ด๋ฉ”๋‰ด ์—ด๊ธฐ ๋ฒ„ํŠผ"
  >
    <div class="avatar-32">
      <img src="./assets/images/img-user-01.jpg" alt="์‚ฌ๋‹ฌ๋ผ ์•„์ €์”จ" />
    </div>
  </button>
</div>

2. Sidebar

  • ๋กœ๊ทธ์ธ์„ ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ
<div class="sidebar-auth">
  <a class="btn-outlined btn-40" href="/">๋กœ๊ทธ์ธ</a>
  <a class="btn-primary btn-40" href="/">ํšŒ์›๊ฐ€์ž…</a>
</div>
  • ๋กœ๊ทธ์ธ์„ ํ•œ ๊ฒฝ์šฐ
<div class="sidebar-user">
  <a href="/">
    <div class="avatar-24">
      <img src="./assets/images/img-user-01.jpg" alt="์‚ฌ๋‹ฌ๋ผ ์•„์ €์”จ" />
    </div>
    <strong class="username">์‚ฌ๋‹ฌ๋ผ</strong>
  </a>
</div>

About

๐Ÿ’… ๊น€๋ฒ„๊ทธ์˜ UI ๊ฐœ๋ฐœ ๋ถ€ํŠธ์บ ํ”„ - ๊ฒฝ๋ ฅ๊ฐ™์€ ์‹ ์ž…์œผ๋กœ ๋ ˆ๋ฒจ์—…

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published