Skip to content

프론트엔드 개발 기초 과제_5기 유유정 제출합니다. #25

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
oU-Ua wants to merge 3 commits into
base: main
Choose a base branch
from
Open

프론트엔드 개발 기초 과제_5기 유유정 제출합니다. #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
30fccf9
feat: ex1-10 추가
oU-Ua Sep 12, 2024
44d7c4c
fix : ex1, ex5, ex10 수정
oU-Ua Sep 13, 2024
6fea146
fix : ex1 수정
oU-Ua 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
1,706 changes: 1,706 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 9 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,13 @@
"TS"
],
"author": "indiflex",
"license": "ISC"
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.4.10",
"ts-node": "^10.9.2",
"typescript": "^5.6.2"
},
"dependencies": {
"@types/node": "^22.5.4"
}
}
91 changes: 91 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,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>BookMark</title>
</head>
<body class="flex flex-col min-h-screen">
<nav class="flex items-center justify-between flex-wrap bg-white p-6 border-b-2 border-neutral-300">
<div class="flex items-center flex-shrink-0 text-white mr-6 bg-slate-100 rounded-md px-4">
<?xml version="1.0" encoding="utf-8"?>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-3">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 11.1184 2 10.3192 2.00958 9.59291C2.06596 9.39805 2.13335 9.2273 2.21322 9.07054C2.62068 8.27085 3.27085 7.62068 4.07054 7.21322C4.48197 7.00359 4.9897 6.87996 5.77708 6.81563C5.92663 6.80341 6.08387 6.79347 6.25 6.78538V10.831C6.25 11.2986 6.24999 11.6821 6.26739 11.9839C6.28454 12.2816 6.32145 12.5899 6.44371 12.8652C6.88513 13.859 7.97413 14.3949 9.03086 14.1383C9.32356 14.0673 9.59039 13.9084 9.83671 13.7404C10.0864 13.57 10.3903 13.336 10.7608 13.0508L10.7793 13.0365C11.2486 12.6751 11.3808 12.5804 11.5019 12.5277C11.8196 12.3897 12.1804 12.3897 12.4981 12.5277C12.6192 12.5804 12.7513 12.6751 13.2207 13.0365L13.2392 13.0507C13.6097 13.336 13.9135 13.57 14.1633 13.7404C14.4096 13.9084 14.6764 14.0673 14.9691 14.1383C16.0259 14.3949 17.1149 13.859 17.5563 12.8652C17.6786 12.5899 17.7155 12.2816 17.7326 11.9839C17.75 11.6821 17.75 11.2985 17.75 10.831V6.78538C17.9161 6.79347 18.0734 6.80341 18.2229 6.81563C19.0103 6.87996 19.518 7.00359 19.9295 7.21322C20.7291 7.62068 21.3793 8.27085 21.7868 9.07054C21.8667 9.2273 21.934 9.39805 21.9904 9.59292C22 10.3192 22 11.1184 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12ZM21.8433 6.72315C21.6699 5.24918 21.3048 4.23369 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2.69524 4.23369 2.33006 5.24918 2.15669 6.72315C2.52685 6.39051 2.9408 6.10536 3.38955 5.87671C4.04768 5.54138 4.77479 5.39252 5.65494 5.32061C6.51929 5.24999 7.59472 5.25 8.96644 5.25H15.0336C16.4053 5.25 17.4807 5.24999 18.3451 5.32061C19.2252 5.39252 19.9523 5.54138 20.6104 5.87671C21.0592 6.10536 21.4732 6.39051 21.8433 6.72315Z" fill="#1C274D"/>
<path d="M7.75 10.8076V6.75233C8.12917 6.75006 8.54382 6.75 9 6.75H15C15.4562 6.75 15.8708 6.75006 16.25 6.75233V10.8076C16.25 11.3043 16.2497 11.6442 16.2351 11.8976C16.22 12.1601 16.1923 12.2408 16.1854 12.2563C16.0383 12.5876 15.6753 12.7662 15.323 12.6807C15.3066 12.6767 15.2257 12.6493 15.0085 12.5012C14.7989 12.3582 14.5294 12.151 14.1358 11.848L14.0688 11.7964C13.6986 11.5109 13.4101 11.2885 13.0958 11.152C12.3968 10.8483 11.6032 10.8483 10.9042 11.152C10.5899 11.2885 10.3014 11.511 9.9312 11.7964L9.86419 11.848C9.47062 12.151 9.20112 12.3582 8.99148 12.5012C8.77428 12.6493 8.69342 12.6767 8.67695 12.6807C8.32471 12.7662 7.96171 12.5876 7.81457 12.2563C7.80769 12.2408 7.78003 12.1601 7.7649 11.8976C7.7503 11.6442 7.75 11.3043 7.75 10.8076Z" fill="#01DF3A"/>
</svg>

<span class="font-semibold text-xl tracking-tight text-green-400 py-2">BookMark</span>
</div>

<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">

</div>
<div>
<a href="https://github.com/oU-Ua" class="inline-block px-4 mx-4 py-2 leading-none rounded text-black hover:border-transparent hover:text-green-400 hover:bg-slate-100 mt-4 lg:mt-0 ">Github Repo.</a>
<a href="register.html" class="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-slate-500 mr-4">
SignUp
</a>

|

<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-slate-500 mx-4">
SignIn
</a>
</div>
</div>
</nav>

<div class="flex h-screen">
<!-- 사이드바 -->
<div class="flex h-screen">
<div class="w-64 bg-white p-4 shadow-lg">
<h2 class="text-2xl font-bold text-gray-700 mb-6">북마크 등록하기</h2>
<form>

<div class="mb-4">
<label for="link" class="block text-gray-600 text-sm font-semibold mb-2">등록할 링크를 입력하세요</label>
<input type="text" id="link" name="link" placeholder="https://example.com"
class="w-full px-4 py-2 border rounded-lg text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>


<div class="mb-4">
<input type="checkbox" id="valid" name="valid" class="mr-2">
<label for="valid" class="text-sm text-gray-600 font-semibold">이동시 자동 삭제</label>
</div>

<div class="flex justify-between">
<button type="button"
class="w-1/3 bg-yellow-500 text-white font-bold py-2 rounded-lg hover:bg-yellow-600 focus:outline-none focus:bg-yellow-600">
Edit
</button>
<button type="submit"
class="w-1/3 bg-green-500 text-white font-bold py-2 rounded-lg hover:bg-green-600 focus:outline-none focus:bg-green-600 mr-2">
Submit
</button>
</div>

</form>
</div>
</div>

<!-- 메인 콘텐츠 영역 -->
<main class="flex-1 bg-gray-100 p-8">
<div class="flex justify-center items-center h-full">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg">
+ Add Book
</button>
</div>
</main>
</div>

<footer class="bg-gray-100 text-gray-700 w-full bottom-0">
<div class="container mx-auto text-center">
<p>&copy; Hanaro 2024.</p>
</div>
</footer>

</body>
</html>
145 changes: 145 additions & 0 deletions 유유정/ex1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="프론트엔드 개발 기초 과제">
<meta property="og:description" content="하나로 5기 유유정의 프론트엔드 개발 기초 과제입니다.">
<meta property="og:image" content="https://mblogthumb-phinf.pstatic.net/MjAyMzEwMjFfNTMg/MDAxNjk3ODQ1NDI4NDk5.lz4l9LSm-znlfXxHK4ekPLjWmkAEfp-xMFTEuwy_8iwg.OHD1H2cwkXQ7nZtETfjgdELxhKWxElNXjlCyVpwOWLsg.PNG.ghkdwjdtka/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-10-20_224405.png?type=w800">
<title>Index</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white">

<nav class="flex items-center justify-between flex-wrap bg-white p-6 border-b-2 border-neutral-300">
<div class="flex items-center flex-shrink-0 text-white mr-6 bg-slate-100 rounded-md px-4">
<?xml version="1.0" encoding="utf-8"?>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-3">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 11.1184 2 10.3192 2.00958 9.59291C2.06596 9.39805 2.13335 9.2273 2.21322 9.07054C2.62068 8.27085 3.27085 7.62068 4.07054 7.21322C4.48197 7.00359 4.9897 6.87996 5.77708 6.81563C5.92663 6.80341 6.08387 6.79347 6.25 6.78538V10.831C6.25 11.2986 6.24999 11.6821 6.26739 11.9839C6.28454 12.2816 6.32145 12.5899 6.44371 12.8652C6.88513 13.859 7.97413 14.3949 9.03086 14.1383C9.32356 14.0673 9.59039 13.9084 9.83671 13.7404C10.0864 13.57 10.3903 13.336 10.7608 13.0508L10.7793 13.0365C11.2486 12.6751 11.3808 12.5804 11.5019 12.5277C11.8196 12.3897 12.1804 12.3897 12.4981 12.5277C12.6192 12.5804 12.7513 12.6751 13.2207 13.0365L13.2392 13.0507C13.6097 13.336 13.9135 13.57 14.1633 13.7404C14.4096 13.9084 14.6764 14.0673 14.9691 14.1383C16.0259 14.3949 17.1149 13.859 17.5563 12.8652C17.6786 12.5899 17.7155 12.2816 17.7326 11.9839C17.75 11.6821 17.75 11.2985 17.75 10.831V6.78538C17.9161 6.79347 18.0734 6.80341 18.2229 6.81563C19.0103 6.87996 19.518 7.00359 19.9295 7.21322C20.7291 7.62068 21.3793 8.27085 21.7868 9.07054C21.8667 9.2273 21.934 9.39805 21.9904 9.59292C22 10.3192 22 11.1184 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12ZM21.8433 6.72315C21.6699 5.24918 21.3048 4.23369 20.5355 3.46447C19.0711 2 16.714 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2.69524 4.23369 2.33006 5.24918 2.15669 6.72315C2.52685 6.39051 2.9408 6.10536 3.38955 5.87671C4.04768 5.54138 4.77479 5.39252 5.65494 5.32061C6.51929 5.24999 7.59472 5.25 8.96644 5.25H15.0336C16.4053 5.25 17.4807 5.24999 18.3451 5.32061C19.2252 5.39252 19.9523 5.54138 20.6104 5.87671C21.0592 6.10536 21.4732 6.39051 21.8433 6.72315Z" fill="#1C274D"/>
<path d="M7.75 10.8076V6.75233C8.12917 6.75006 8.54382 6.75 9 6.75H15C15.4562 6.75 15.8708 6.75006 16.25 6.75233V10.8076C16.25 11.3043 16.2497 11.6442 16.2351 11.8976C16.22 12.1601 16.1923 12.2408 16.1854 12.2563C16.0383 12.5876 15.6753 12.7662 15.323 12.6807C15.3066 12.6767 15.2257 12.6493 15.0085 12.5012C14.7989 12.3582 14.5294 12.151 14.1358 11.848L14.0688 11.7964C13.6986 11.5109 13.4101 11.2885 13.0958 11.152C12.3968 10.8483 11.6032 10.8483 10.9042 11.152C10.5899 11.2885 10.3014 11.511 9.9312 11.7964L9.86419 11.848C9.47062 12.151 9.20112 12.3582 8.99148 12.5012C8.77428 12.6493 8.69342 12.6767 8.67695 12.6807C8.32471 12.7662 7.96171 12.5876 7.81457 12.2563C7.80769 12.2408 7.78003 12.1601 7.7649 11.8976C7.7503 11.6442 7.75 11.3043 7.75 10.8076Z" fill="#01DF3A"/>
</svg>

<span class="font-semibold text-xl tracking-tight text-green-400 py-2">BookMark</span>
</div>

<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">

</div>
<div class="flex items-center space-x-4">
<a href="https://github.com/oU-Ua" class="inline-block px-4 mx-4 py-2 leading-none rounded text-black hover:border-transparent hover:text-green-400 hover:bg-slate-100 mt-4 lg:mt-0">Github Repo.</a>


<div class="relative">
<img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/965/1b3d7a543d81d5a3087e5e086fa25c9f_res.jpeg" class="w-10 h-10 rounded-full border-2 border-white">
</div>
</div>
</div>
</nav>

<!-- 북마크 그룹 -->
<div class="flex justify-center space-x-10 overflow-x-auto max-w-screen-lg mx-auto mt-2">

<!-- 북마크 그룹 1 -->
<div class="bg-gray-100 border border-gray-200 rounded-lg shadow-lg p-4 w-100">
<h2 class="text-xl font-bold text-gray-700 mb-4">북마크 그룹 1</h2>
<div class="flex flex-col space-y-4">

<!-- Card 1 -->
<div class="bg-gray-50 border border-gray-200 rounded-lg shadow-lg flex items-center w-96">
<a href="https://www.tving.com/onboarding">
<img src="https://blog.kakaocdn.net/dn/ejB6gz/btrbljBlAK9/cKb8PmW2fgRMmGJI4WTykk/img.jpg" class="w-20 h-20 object-cover rounded-lg m-4 mr-10">
</a>
<div class="p-4">
<a href="https://naver.com" class="text-lg font-semibold text-indigo-600 hover:underline">55BookMark</a>
<p class="text-gray-600 text-sm mt-2">55나만의 북마크 나만의 북마크</p>
</div>
</div>

<!-- Card 2 -->
<div class="bg-gray-50 border border-gray-200 rounded-lg shadow-lg flex items-center w-96">
<a href="https://www.naver.com/">
<img src="https://i.namu.wiki/i/p_1IEyQ8rYenO9YgAFp_LHIAW46kn6DXT0VKmZ_jKNijvYth9DieYZuJX_E_H_4GkCER_sVKhMqSyQYoW94JKA.svg" class="w-20 h-20 object-cover rounded-lg m-4 mr-20">
</a>
<div class="p-4">
<a href="https://naver.com" class="text-lg font-semibold text-indigo-600 hover:underline">네이버</a>
<p class="text-gray-600 text-sm mt-2">네이버 메인에서 다양한 서비스를 이용해 보세요</p>
</div>
</div>

<!-- Card 3 -->
<div class="bg-gray-50 border border-gray-200 rounded-lg shadow-lg flex items-center w-96">
<a href="https://www.kakaocorp.com/page">
<img src="https://t1.kakaocdn.net/kakaocorp/corp_thumbnail/Kakao.png" class="w-20 h-20 object-cover rounded-lg m-4 mr-10">
</a>
<div class="p-4">
<a href="https://naver.com" class="text-lg font-semibold text-indigo-600 hover:underline">KaKao</a>
<p class="text-gray-600 text-sm mt-2">기술과 사람으로 더 나은 세상을 위해 </p>
</div>
</div>

<!-- Card 4 -->
<div class="bg-gray-50 border border-gray-200 rounded-lg shadow-lg flex items-center w-96">
<a href="https://naver.com">
<img src="https://blog.kakaocdn.net/dn/biCIvw/btrTMZ8UGUs/FyYM2MFgUjK9fsY8FgYeb0/img.png" class="w-20 h-20 object-cover rounded-lg m-4 mr-10">
</a>
<div class="p-4">
<a href="https://naver.com" class="text-lg font-semibold text-indigo-600 hover:underline">YouTube</a>
<p class="text-gray-600 text-sm mt-2">Youtube에서 마음에 드는 영상을 골라보세요.</p>
</div>
</div>

<button class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg">
+ Add Mark
</button>

</div>
</div>

<!-- 북마크 그룹 2 -->
<div class="bg-gray-100 border border-gray-200 rounded-lg shadow-lg p-4 w-100">
<h2 class="text-xl font-bold text-gray-700 mb-4">북마크 그룹 2</h2>
<div class="flex flex-col space-y-4">

<!-- Card 5 -->
<div class="bg-gray-50 border border-gray-200 rounded-lg shadow-lg flex items-center w-96">
<a href="https://naver.com">
<img src="https://velog.velcdn.com/images/js43o/post/3ab8d087-c4f4-46b5-8f65-6d5e1736b58e/image.png" class="w-20 h-20 object-cover rounded-lg m-4 mr-10">
</a>
<div class="p-4">
<a href="https://naver.com" class="text-lg font-semibold text-indigo-600 hover:underline">Tailwind CSS</a>
<p class="text-gray-600 text-sm mt-2">Tailwind CSS is a utillity</p>
</div>
</div>

<!-- Card 6 -->
<div class="bg-gray-50 border border-gray-200 rounded-lg shadow-lg flex items-center w-96">
<a href="https://naver.com">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYYS6zmAGzPyPH-4m3PeC4ZOITrNPi2EIhZg&s" class="w-20 h-20 object-cover rounded-lg m-4 mr-10">
</a>
<div class="p-4">
<a href="https://naver.com" class="text-lg font-semibold text-indigo-600 hover:underline">Create Next</a>
<p class="text-gray-600 text-sm mt-2">Generated by create</p>
</div>
</div>

<button class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg">
+ Add Mark
</button>

</div>
</div>
</div>



</div>

<footer class="bg-gray-100 text-gray-700 w-full bottom-0">
<div class="container mx-auto text-center">
<p>&copy; Hanaro 2024.</p>
</div>
</footer>

</body>
</html>
Loading