🧩 와이어 프레임

🧩 구현

html 코드/ css tail wind

<div id="homewrapper" class="w-[1200px] bg-slate-400 mx-auto list-none">
  <header class="h-[100px] items-center">
    <div
      id="login_list"
      class="flex justify-around justify-items-end ml-[500px] 
      mr-[20px] pt-[30px] w-[700px]"
    >
      <a
        href="#"
        class="w-[120px] bg-green-200 text-white font-serif
        ext-center font-bold text-xl"
        ><input
          class="size-[200px] h-[30px] text-center"
          type="text"
          placeholder="ID"
          id="id"
          name="userName"
      /></a>
      <a
        href="#"
        class="w-[150px] h-[30px] bg-green-950 text-white 
        font-serif text-center font-bold text-xl"
        ><input
          class="size-[200px] h-[30px] text-center"
          type="text"
          type="password"
          placeholder="password"
          id="pw"
      /></a>
      <a
        href="#"
        class="w-[120px] h-[30px] ml-[30px] pr-0 bg-green-950
         text-white font-serif text-center font-bold text-xl text-center"
        ><button>ID</button></a
      >
    </div>
  </header>
  <nav class="w-[1200px] items-center">
    <ul class="h-[243px] bg-green-100 flex items-center justify-center">
      <li>
        <a href="#"
          ><button
            class="w-[240px] h-[80px] bg-green-950 text-white 
            font-bold rounded-lg mr-[15px]"
          >
            제품관리
          </button></a
        >
      </li>
      <li>
        <a href="#"
          ><button
            class="w-[240px] h-[80px] bg-green-950 text-white
             font-bold rounded-lg mx-[15px]"
          >
            매출관리
          </button></a
        >
      </li>
      <li>
        <a href="#"
          ><button
            class="h-[80px] bg-green-950 text-white font-bold 
            rounded-lg mx-[15px] w-[240px]"
          >
            고객관리
          </button></a
        >
      </li>
      <li>
        <a href="#"
          ><button
            class="h-[80px] bg-green-950 text-white font-bold
             rounded-lg ml-[15px] w-[240px]"
          >
            시스템 설정
          </button></a
        >
      </li>
    </ul>
    <p class="border-8 border-green-400 border-solid mx-0 my-0 border-b-4"></p>
  </nav>
  <main>
    <article>
      <div
        id="content_1"
        class="flex mx-[20px] my-0 p-0 w-[1160px] h-[460px] bg-emerald-200"
      >
        @for (list of lists; track $index) {
          <div
            class="flex flex-col w-[1082px] h-[380px] items-center
             justify-center"
          >
            <img
              src="https://picsum.photos/510/280"
              alt="#"
              class="mt-[40px] pt-[40px]"
            />
            <h4 class="text-[24px] text-primary font-bold uppercase mb-5">
              {{ list.title }}
            </h4>
            <p class="leading-5 mb-5">
              {{ list.content }}
            </p>
          </div>
        }
      </div>
    </article>
  </main>
  <footer class="items-center w-[1200px] h-[138px] mx-[20px]">
    <div
      id="footer-info"
      class="flex justify-around w-[1160px] h-[138px] bg-amber-200 
      items-center"
    >
      <div>
        <p>copyright 2014 company.</p>
        <p>All rights reserved.</p>
      </div>

      <div class="info-1">
        <a href="#"> terms of service </a>

        <a href="#"> privacy </a>
      </div>
      <div id="footer-link">
        <ul class="footerlist">
          <a href="#" class="footlink">
            <li class="com">COMPANY</li>
            <li>about us</li>
            <li>meet the team</li>
            <li>what we do</li>
            <li>careers</li>
          </a>
        </ul>
      </div>
    </div>
  </footer>
</div>

🧩 브라우저