kimsi519 · suminjeff · Sep 10, 2024 · Sep 10, 2024 · Sep 11, 2024 · Sep 11, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,5 +11,12 @@
     "TS"
   ],
   "author": "indiflex",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "@types/node": "^22.5.4",
+    "package.json": "^2.0.1"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.11"
+  }
 }
diff --git a/이수민/ex1/book-edit.html b/이수민/ex1/book-edit.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BookMark</title>
+    <link href="output.css" rel="stylesheet" />
+    <meta property="og:image" content="static/ryan.jpg" />
+    <meta property="og:title" content="55BookMark BookMark BookMark" />
+    <meta
+      property="og:description"
+      content="55BookMark 나만의 북마크나만의 북마크"
+    />
+  </head>
+  <body class="min-h-screen flex flex-col">
+    <!-- 내브바 컴포넌트 -->
+    <nav class="flex justify-between border-b-2 h-16 px-8 py-1">
+      <!-- 북마크 로고 -->
+      <div
+        id="bookmark-logo"
+        class="flex justify-center bg-gray-100 rounded p-3"
+      >
+        <img
+          src="static/bookmark.svg"
+          class="w-6 h-6 self-center icon-green"
+          alt=""
+        />
+        <a
+          href="javascript:location.reload()"
+          class="font-semibold text-2xl self-center text-green-500"
+          >BookMark</a
+        >
+      </div>
+      <!-- 북마크 로고 끝 -->
+      <div class="flex w-1/4 justify-between">
+        <!-- 깃허브 레포 -->
+        <div id="github-repo" class="self-center w-full">
+          <a href="http://www.github.com/suminjeff">Github Repo.</a>
+        </div>
+        <!-- 깃허브 레포 끝 -->
+        <!-- 회원가입/로그인 -->
+        <div class="flex gap-2">
+          <button id="sign-up" onclick="window.location.href='register.html'">
+            SignUp
+          </button>
+          <p class="self-center">|</p>
+          <button id="sign-in" onclick="window.location.href='register.html'">
+            SignIn
+          </button>
+        </div>
+        <!-- 회원가입/로그인 끝 -->
+      </div>
+    </nav>
+    <!-- 내브바 컴포넌트 끝 -->
+
+    <!-- 메인 콘텐츠 영역 -->
+    <div id="main-contents-area" class="grid grid-cols-5 gap-4 p-1">
+      <!-- 북마크 추가 창 -->
+      <div class="bg-gray-300 rounded p-3">
+        <!-- URL 입력창 -->
+        <div class="w-full max-w-xs">
+          <input
+            id="text-input"
+            type="text"
+            class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            placeholder="URL을 입력하세요."
+          />
+        </div>
+        <!-- URL 입력창 끝 -->
+        <!-- 자동 삭제 체크박스 -->
+        <div class="flex items-center my-3 cursor-pointer">
+          <input
+            id="auto-delete"
+            type="checkbox"
+            class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+          />
+          <label
+            for="auto-delete"
+            class="ml-2 block text-sm font-bold text-gray-900"
+            >이동 시 자동 삭제</label
+          >
+        </div>
+        <!-- 자동 삭제 체크박스 끝 -->
+        <!-- 새로고침, 저장 아이콘 -->
+        <div class="flex justify-end">
+          <div
+            class="w-12 h-10 rounded p-2 bg-gray-50 mx-3 flex justify-center cursor-pointer"
+          >
+            <img src="static/reload.svg" alt="reload icon" />
+          </div>
+          <div
+            class="w-12 h-10 rounded p-2 bg-gray-50 mx-3 flex justify-center cursor-pointer"
+          >
+            <img src="static/save.svg" alt="save icon" />
+          </div>
+        </div>
+        <!-- 새로고침, 저장 아이콘 끝 -->
+        <div class="my-3">
+          <p class="text-center">There are no marks</p>
+        </div>
+      </div>
+      <!-- 북마크 추가 창 끝 -->
+      <!-- 북마크 추가 창 옆 -->
+      <div>
+        <button class="bg-gray-800 text-gray-50 p-3 rounded-lg w-1/2">
+          + Add Book
+        </button>
+      </div>
+      <!-- 북마크 추가 창 옆 끝 -->
+    </div>
+    <!-- 메인 콘텐츠 영역 끝 -->
+    <hr />
+    <!-- 푸터 영역 -->
+    <footer>
+      <p class="text-center text-gray-500">ⓒ Hanaro 2024</p>
+    </footer>
+    <!-- 푸터 영역 끝 -->
+  </body>
+</html>
diff --git a/이수민/ex1/index.html b/이수민/ex1/index.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BookMark</title>
+    <link href="output.css" rel="stylesheet" />
+    <meta property="og:image" content="static/ryan.jpg" />
+    <meta property="og:title" content="55BookMark BookMark BookMark" />
+    <meta
+      property="og:description"
+      content="55BookMark 나만의 북마크나만의 북마크"
+    />
+  </head>
+  <body class="min-h-screen flex flex-col">
+    <!-- 내브바 컴포넌트 -->
+    <nav class="flex justify-between border-b-2 h-16 px-8 py-1">
+      <!-- 북마크 로고 -->
+      <div
+        id="bookmark-logo"
+        class="flex justify-center bg-gray-100 rounded p-3"
+      >
+        <img
+          src="static/bookmark.svg"
+          class="w-6 h-6 self-center icon-green"
+          alt=""
+        />
+        <a
+          href="javascript:location.reload()"
+          class="font-semibold text-2xl self-center text-green-500"
+          >BookMark</a
+        >
+      </div>
+      <!-- 북마크 로고 끝 -->
+      <div class="flex w-1/4 justify-between">
+        <!-- 깃허브 레포 -->
+        <div id="github-repo" class="self-center w-full">
+          <a href="http://www.github.com/suminjeff">Github Repo.</a>
+        </div>
+        <!-- 깃허브 레포 끝 -->
+        <!-- 프로필 사진 -->
+        <div class="flex justify-end p-2">
+          <img src="static/ryan.jpg" class="rounded-full" alt="" />
+        </div>
+        <!-- 프로필 사진 끝 -->
+      </div>
+    </nav>
+    <!-- 내브바 컴포넌트 끝 -->
+
+    <!-- 메인 콘텐츠 영역 -->
+    <div id="main-contents-area" class="grid grid-cols-5 gap-4 p-1">
+      <!-- BookMark BookMark 창 -->
+      <div class="bg-gray-300 rounded p-3">
+        <!-- 제목 창 -->
+        <div class="w-full max-w-xs mb-3">
+          <p class="text-xl font-bold text-center truncate">
+            BookMark BookMark BookMark BookMark
+          </p>
+        </div>
+        <!-- 제목창 끝 -->
+        <!-- 북마크 개별 컴포넌트 -->
+        <!-- 인디플렉스 -->
+        <div
+          class="flex min-h-20 min-w-full p-3 cursor-pointer h-12 border-2 border-white mb-3 gap-3"
+        >
+          <img
+            src="static/indiflex.jpg"
+            alt="indiflex"
+            class="w-12 h-12 rounded"
+          />
+          <div class="flex flex-col max-w-full overflow-hidden">
+            <p class="font-bold truncate">55BookMark BookMark BookMark</p>
+            <p class="truncate">55BookMark 나만의 북마크나만의 북마크</p>
+          </div>
+          <img src="static/settings.svg" alt="" class="w-6 h-6" />
+        </div>
+        <!-- 네이버 -->
+        <div
+          class="flex min-h-20 min-w-full p-3 cursor-pointer h-12 border-2 border-white mb-3 gap-3"
+        >
+          <img
+            src="static/naver.png"
+            alt="indiflex"
+            class="w-12 h-12 rounded"
+          />
+          <div class="flex flex-col max-w-full overflow-hidden">
+            <p class="font-bold truncate">네이버</p>
+            <p class="truncate">
+              네이버 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요.
+            </p>
+          </div>
+          <img src="static/settings.svg" alt="" class="w-6 h-6" />
+        </div>
+        <!-- 카카오 -->
+        <div
+          class="flex min-h-20 min-w-full p-3 cursor-pointer h-12 border-2 border-white mb-3 gap-3"
+        >
+          <img
+            src="static/kakao.png"
+            alt="indiflex"
+            class="w-12 h-12 rounded"
+          />
+          <div class="flex flex-col max-w-full overflow-hidden">
+            <p class="font-bold truncate">Kakao</p>
+            <p class="truncate">
+              더 나은 세상을 만드는 카카오 서비스 · 커뮤니케이션. 카카오톡다음
+              커뮤니케이션더보기새창열림 · 비즈니스. 카카오톡 채널카카오
+              클라우드 비즈니스더보기 · 일상편의.
+            </p>
+          </div>
+          <img src="static/settings.svg" alt="" class="w-6 h-6" />
+        </div>
+        <!-- 유튜브 -->
+        <div
+          class="flex min-h-20 min-w-full p-3 cursor-pointer h-12 border-2 border-white mb-3 gap-3"
+        >
+          <img
+            src="static/youtube.png"
+            alt="indiflex"
+            class="w-12 h-12 rounded"
+          />
+          <div class="flex flex-col max-w-full overflow-hidden">
+            <p class="font-bold truncate">Youtube</p>
+            <p class="truncate">
+              YouTube에서 마음에 드는 동영상과 음악을 감상하고, 직접 만든
+              콘텐츠를 업로드하여 친구, 가족뿐 아니라 전 세계 사람들과 콘텐츠를
+              공유할 수 있습니다.
+            </p>
+          </div>
+          <img src="static/settings.svg" alt="" class="w-6 h-6" />
+        </div>
+        <div class="flex justify-end">
+          <button class="bg-gray-800 text-gray-50 p-3 rounded-lg w-1/2">
+            + Add Mark
+          </button>
+        </div>
+        <!-- 북마크 개별 컴포넌트 끝 -->
+      </div>
+      <!-- BookMark BookMark 창 끝 -->
+      <!-- Study 창 -->
+      <div class="bg-gray-300 rounded p-3">
+        <!-- 제목 창 -->
+        <div class="w-full max-w-xs mb-3">
+          <p class="text-xl font-bold text-center truncate">Study</p>
+        </div>
+        <!-- 제목창 끝 -->
+        <!-- 북마크 개별 컴포넌트 -->
+        <!-- tailwind -->
+        <div
+          class="flex min-h-20 min-w-full p-3 cursor-pointer h-12 border-2 border-white mb-3 gap-3"
+        >
+          <img
+            src="static/tailwind.png"
+            alt="indiflex"
+            class="w-12 h-12 rounded"
+          />
+          <div class="flex flex-col max-w-full overflow-hidden">
+            <p class="font-bold truncate">Tailwind CSS - Tailwind CSS</p>
+            <p class="truncate">
+              Tailwind CSS is a utility-first CSS framework for rapidly building
+              modern websites without ever leaving your HTML.
+            </p>
+          </div>
+          <img src="static/settings.svg" alt="" class="w-6 h-6" />
+        </div>
+        <!-- next js -->
+        <div
+          class="flex min-h-20 min-w-full p-3 cursor-pointer h-12 border-2 border-white mb-3 gap-3"
+        >
+          <img
+            src="static/nextjs.png"
+            alt="indiflex"
+            class="w-12 h-12 rounded"
+          />
+          <div class="flex flex-col max-w-full overflow-hidden">
+            <p class="font-bold truncate">Create Next.js App</p>
+            <p class="truncate">
+              Used by some of the world's largest companies, Next.js enables you
+              to create high-quality web applications with the power of React
+              components.
+            </p>
+          </div>
+          <img src="static/settings.svg" alt="" class="w-6 h-6" />
+        </div>
+        <div class="flex justify-end">
+          <button class="bg-gray-800 text-gray-50 p-3 rounded-lg w-1/2">
+            + Add Mark
+          </button>
+        </div>
+        <!-- 북마크 개별 컴포넌트 끝 -->
+      </div>
+      <!-- Study 창 옆 끝 -->
+    </div>
+    <!-- 메인 콘텐츠 영역 끝 -->
+    <hr />
+    <!-- 푸터 영역 -->
+    <footer>
+      <p class="text-center text-gray-500">ⓒ Hanaro 2024</p>
+    </footer>
+    <!-- 푸터 영역 끝 -->
+  </body>
+</html>
diff --git a/이수민/ex1/input.css b/이수민/ex1/input.css
@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0%;
+  height: 100vh;
+}
+#main-contents-area {
+  height: 80vh; /* 80%의 화면 높이 */
+  overflow-y: auto; /* 콘텐츠가 넘칠 경우 스크롤 추가 */
+}
+.icon-green {
+  filter: invert(50%) sepia(100%) saturate(5300%) hue-rotate(90deg)
+    brightness(100%) contrast(100%);
+}
+#signup-card {
+  width: 30%;
+}