Skip to content

[프론트엔드 기초 과제] 박지환 #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
parkjaaaaan wants to merge 6 commits into
base: main
Choose a base branch
from
Open

[프론트엔드 기초 과제] 박지환 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
875c5c3
HW-0913
parkjaaaaan Sep 13, 2024
defcb79
1435
parkjaaaaan Sep 13, 2024
48fa9c2
1453
parkjaaaaan Sep 13, 2024
bb8e0ee
1500
parkjaaaaan Sep 13, 2024
33376a7
ex1 최종
parkjaaaaan Sep 13, 2024
d87aa9c
final
parkjaaaaan Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions 박지환/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
테스트 코드에서 아래 문장 때문에 오류가 발생하여 2번 문장으로 수정했습니다.

before) import assert from 'assert';

after) import * as assert from 'assert';
121 changes: 121 additions & 0 deletions 박지환/ex1/book-edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/output.css">
</head>
<body class="flex flex-col min-h-screen bg-gray-100 font-hana_regular">
<header class="flex justify-between p-4 bg-white shadow-md border-b-4 border-hana-green">
<a href="index.html">
<div class="flex space-x-2 font-bold text-hana-green items-end">
<span><img class="w-8 h-8" src="src/img_hana.svg"></span>
<span class="text-3xl leading-none">BookMark </span>
<span class="font-hana_regular text-xs leading-none"> for Digital Hana路</span>
</div>
</a>
<div class="flex space-x-4 text-gray-600 font-semibold items-center">
<div class="hover:text-hana-green"><a href="https://github.com/parkjaaaaan">Github Repo.</a></div>
<div class="flex space-x-4">
<img src="src/img_alpaca.jpg" class="h-8 w-8 rounded-full">
</div>
</div>
</header>

<main class="flex-1 flex justify-center p-5 space-x-5">
<div class="w-1/4 bg-white shadow-lg rounded-lg p-5 border-t-4 border-hana-green">
<h2 class="text-lg font-semibold mb-4 text-gray-700">Categories</h2>
<div class="space-y-3">
<a href="https://www.naver.com" class="block group hover:shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center justify-between bg-gray-100 p-3 rounded bookmark-item">
<img src="src/img_naver.png" alt="네이버" class="w-10 h-10 rounded-md">
<div class="flex flex-col ml-3 flex-1">
<div class="font-bold">네이버</div>
<div class="text-sm text-gray-500 line-clamp-1 group-hover:line-clamp-3 transition-all duration-300 bookmark-description">
네이버 북마크 설명이 길어질 경우에도 일정 길이까지만 표시됩니다. 호버 시 전체 내용이 표시됩니다.
</div>
</div>
<div>⚙️</div>
</div>
</a>
<a href="https://www.kakao.com" class="block group hover:shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center justify-between bg-gray-100 p-3 rounded bookmark-item">
<img src="src/img_kakao.png" alt="Kakao" class="w-10 h-10 rounded-md">
<div class="flex flex-col ml-3 flex-1">
<div class="font-bold">카카오</div>
<div class="text-sm text-gray-500 line-clamp-1 group-hover:line-clamp-3 transition-all duration-300 bookmark-description">
카카오 북마크 설명이 길어질 경우에도 일정 길이까지만 표시됩니다. 호버 시 전체 내용이 표시됩니다.
</div>
</div>
<div>⚙️</div>
</div>
</a>
<a href="https://www.coupang.com" class="block group hover:shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center justify-between bg-gray-100 p-3 rounded bookmark-item">
<img src="src/img_coupang.png" alt="Coupang" class="w-10 h-10 rounded-md bg-white">
<div class="flex flex-col ml-3 flex-1">
<div class="font-bold">쿠팡</div>
<div class="text-sm text-gray-500 line-clamp-1 group-hover:line-clamp-3 transition-all duration-300 bookmark-description">
쿠팡 북마크 설명이 길어질 경우에도 일정 길이까지만 표시됩니다. 호버 시 전체 내용이 표시됩니다.
</div>
</div>
<div>⚙️</div>
</div>
</a>
<a href="https://www.youtube.com" class="block group hover:shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center justify-between bg-gray-100 p-3 rounded bookmark-item">
<img src="src/img_youtube.png" alt="Youtube" class="w-10 h-10 rounded-md">
<div class="flex flex-col ml-3 flex-1">
<div class="font-bold">유튜브</div>
<div class="text-sm text-gray-500 line-clamp-1 group-hover:line-clamp-3 transition-all duration-300 bookmark-description">
유튜브 북마크 설명이 길어질 경우에도 일정 길이까지만 표시됩니다. 호버 시 전체 내용이 표시됩니다.
</div>
</div>
<div>⚙️</div>
</div>
</a>
</div>
<div class="flex justify-end mt-4">
<button class="bg-hana-green text-white py-2 px-4 rounded hover:bg-green-900 transition">+ Add Mark</button>
</div>
</div>

<div class="w-1/4 bg-white shadow-lg rounded-lg p-5 border-t-4 border-hana-green">
<h2 class="text-lg font-semibold text-gray-700 mb-4">Study</h2>
<div class="space-y-3">
<a href="https://www.javascript.com" class="block group hover:shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center justify-between bg-gray-100 p-3 rounded bookmark-item">
<img src="src/img_js.png" alt="js" class="w-10 h-10 rounded-md">
<div class="flex flex-col ml-3 flex-1">
<div class="font-bold">JS</div>
<div class="text-sm text-gray-500 line-clamp-1 group-hover:line-clamp-3 transition-all duration-300 bookmark-description">
JS 북마크 설명이 길어질 경우에도 일정 길이까지만 표시됩니다. 호버 시 전체 내용이 표시됩니다.
</div>
</div>
<div>⚙️</div>
</div>
</a>
<a href="https://www.typescriptlang.org" class="block group hover:shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center justify-between bg-gray-100 p-3 rounded bookmark-item">
<img src="src/img_ts.png" alt="ts" class="w-10 h-10 rounded-md">
<div class="flex flex-col ml-3 flex-1">
<div class="font-bold">TS</div>
<div class="text-sm text-gray-500 line-clamp-1 group-hover:line-clamp-3 transition-all duration-300 bookmark-description">
TS 북마크 설명이 길어질 경우에도 일정 길이까지만 표시됩니다. 호버 시 전체 내용이 표시됩니다.
</div>
</div>
<div>⚙️</div>
</div>
</a>
</div>
<div class="flex justify-end mt-4">
<button class="bg-hana-green text-white py-2 px-4 rounded hover:bg-green-900 transition">+ Add Mark</button>
</div>
</div>
</main>

<footer class="bg-white border-t-2 text-xs border-gray-300 shadow-md p-4 text-center text-gray-400">
<p>&copy; 2024 Digital Hana路. All rights reserved.</p>
</footer>
</body>
</html>
58 changes: 58 additions & 0 deletions 박지환/ex1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/output.css">
</head>
<body class="flex flex-col min-h-screen bg-gray-100 font-hana_regular">
<header class="flex justify-between p-4 bg-white shadow-md border-b-4 border-hana-green">
<div class="flex space-x-2 font-bold text-hana-green items-end">
<div><img class="w-8 h-8" src="src/img_hana.svg"></div>
<div class="text-3xl leading-none">BookMark</div>
<div class="font-hana_regular text-xs"> for Digital Hana路</div>
</div>
<div class="flex space-x-4 text-gray-600 font-semibold items-center">
<div class="hover:text-hana-green"><a href="https://github.com/parkjaaaaan">Github Repo.</a></div>
<div class="flex space-x-4">
<div class="hover:text-hana-green"><a href="register.html">SignUp</a></div>
<div>|</div>
<div class="hover:text-hana-green">SignIn</div>
</div>
</div>
</header>

<main class="flex-1 flex justify-start p-5 space-x-5">
<div class="w-1/4 bg-white shadow-lg rounded-lg p-5 border-t-4 border-hana-green">
<form class="space-y-4 p-4 border border-gray-300 rounded-lg bg-white">
<div>
<label for="bookmark-title" class="block text-sm font-medium text-gray-700">Title</label>
<input type="text" id="bookmark-title" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-hana-green focus:border-hana-green" placeholder="Enter title">
</div>
<div>
<label for="bookmark-url" class="block text-sm font-medium text-gray-700">URL</label>
<input type="url" id="bookmark-url" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-hana-green focus:border-hana-green" placeholder="Enter URL">
</div>
<div class="flex items-center">
<input type="checkbox" id="auto-delete" class="h-4 w-4 text-hana-green border-gray-300 rounded focus:ring-hana-green">
<label for="auto-delete" class="ml-2 block text-sm text-gray-700">이동 시 자동 삭제</label>
</div>
<div class="flex space-x-2">
<button type="button" class="flex items-center justify-center w-1/2 bg-gray-200 text-gray-700 py-2 px-4 rounded-md shadow-sm hover:bg-gray-300">
<img class="h-5 w-5" src="src/img_reset.png">
</button>
<button type="button" class="flex items-center justify-center w-1/2 bg-gray-200 text-gray-700 py-2 px-4 rounded-md shadow-sm hover:bg-gray-300">
<img class="h-5 w-5" src="src/img_save.png">
</button>
</div>
<button type="submit" class="w-full bg-hana-green text-white py-2 px-4 rounded-md shadow-sm hover:bg-green-900">Add Bookmark</button>
</form>
<p class="mt-2 text-sm text-gray-500 text-center">There is no marks.</p>
</div>
</main>

<footer class="bg-white border-t-2 text-xs border-gray-300 shadow-md p-4 text-center text-gray-400">
<p>&copy; 2024 Digital Hana路. All rights reserved.</p>
</footer>
</body>
</html>
35 changes: 35 additions & 0 deletions 박지환/ex1/register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/output.css">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg w-1/3 border-t-4 border-hana-green">
<h2 class="text-3xl font-bold mb-6 text-center text-hana-green">회원가입</h2>
<form>
<div class="mb-6">
<label for="nickname" class="block text-gray-700 font-semibold mb-2">닉네임</label>
<input type="text" id="nickname" class="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-hana-green" placeholder="닉네임 입력">
</div>
<div class="mb-6">
<label for="email" class="block text-gray-700 font-semibold mb-2">이메일</label>
<input type="email" id="email" class="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-hana-green" placeholder="이메일 입력">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 font-semibold mb-2">비밀번호</label>
<input type="password" id="password" class="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-hana-green" placeholder="비밀번호 입력">
</div>
<div class="mb-6">
<label for="password-confirm" class="block text-gray-700 font-semibold mb-2">비밀번호 확인</label>
<input type="password" id="password-confirm" class="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-hana-green" placeholder="비밀번호 확인">
</div>
<div class="flex items-center justify-between mb-6">
<button type="button" class="bg-hana-green text-white py-2 px-4 rounded hover:bg-green-900 transition w-full font-bold" onclick="window.location.href='book-edit.html'">가입하기</button>
</div>
<p class="text-center text-gray-600">이미 계정이 있으신가요? <a href="#" class="text-hana-green hover:text-green-900 font-semibold">로그인</a></p>
</form>
</div>
</body>
</html>
Binary file added 박지환/ex1/src/Hana2.0_TTF/Hana2-Bold.ttf
View file
Open in desktop
Binary file not shown.
Binary file added 박지환/ex1/src/Hana2.0_TTF/Hana2-CM.ttf
View file
Open in desktop
Binary file not shown.
Binary file added 박지환/ex1/src/Hana2.0_TTF/Hana2-Heavy.ttf
View file
Open in desktop
Binary file not shown.
Binary file added 박지환/ex1/src/Hana2.0_TTF/Hana2-Light.ttf
View file
Open in desktop
Binary file not shown.
Binary file added 박지환/ex1/src/Hana2.0_TTF/Hana2-Medium.ttf
View file
Open in desktop
Binary file not shown.
Binary file added 박지환/ex1/src/Hana2.0_TTF/Hana2-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file added 박지환/ex1/src/img_alpaca.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 박지환/ex1/src/img_coupang.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions 박지환/ex1/src/img_hana.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 박지환/ex1/src/img_js.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 박지환/ex1/src/img_kakao.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 박지환/ex1/src/img_naver.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 박지환/ex1/src/img_reset.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 박지환/ex1/src/img_save.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 박지환/ex1/src/img_ts.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 박지환/ex1/src/img_youtube.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions 박지환/ex1/src/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: "hana-regular";
src: url("Hana2.0_TTF/Hana2-Regular.ttf")
format("truetype");
}
@font-face {
font-family: "hana-bold";
src: url("Hana2.0_TTF/Hana2-Bold.ttf")
format("truetype");
}
Loading