Skip to content

정연채 - 과제 제출 #20

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

정연채 - 과제 제출 #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5933ac0
1차 제출
yeonchae115 Sep 13, 2024
93b48df
수정 후 2차 제출
yeonchae115 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
68 changes: 68 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,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmark Edit</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<script>
function goToSignUp() {
window.location.href = 'register.html'; // Sign Up 클릭 시 이동
}

function clearInput() {
const urlInput = document.querySelector('#bookmark-url');
urlInput.value = ''; // 입력 필드 내용 지우기
}
</script>
</head>
<body class="bg-white flex flex-col min-h-screen">

<header class="bg-white p-4 shadow-md flex justify-between items-center">
<h1 class="text-2xl font-bold cursor-pointer text-green-600 flex items-center">
<img src="bookmark_logo.png" alt="BookMark Logo" class="w-8 h-8 mr-2"> <!-- 로고 이미지 -->
BookMark
</h1>
<nav class="ml-auto flex items-center space-x-6">
<a href="https://github.com/yeonchae115/test11" class="text-gray-600 hover:text-gray-800 font-bold">GitHub Repo.</a>
<button onclick="goToSignUp()" class="text-gray-600 hover:text-gray-800 font-bold">Sign up</button>
<span class="text-gray-300">|</span>
<button onclick="" class="text-gray-600 hover:text-gray-800 font-bold">Sign in</button>
</nav>
</header>

<main class="flex-1 flex">
<div class="w-1/4 bg-gray-200 p-6 flex flex-col justify-between rounded mt-2 mb-2">
<div>
<div class="border-2 border-blue-300 p-2 rounded">
<div class="mb-2">
<input id="bookmark-url" type="url" placeholder="https://naver.com" class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<div class="flex items-center mb-4">
<input type="checkbox" id="autoMove" class="mr-2">
<label for="autoMove" class="text-gray-700 font-bold">이동 시 자동 삭제</label>
</div>

<div class="flex justify-end space-x-8">
<div class="bg-gray-100 border border-gray-200 p-2 px-4 rounded">
<img src="undo.png" alt="Undo Icon" class="w-6 h-6 cursor-pointer" onclick="clearInput()">
</div>
<div class="bg-gray-100 border border-gray-200 p-2 px-4 rounded">
<img src="save2.png" alt="Save Icon" class="w-6 h-6 cursor-pointer" onclick="">
</div>
</div>
</div>

<p class="text-gray-600 text-center font-bold mt-0">There is no marks.</p>
</div>
</div>

</main>

<!-- Footer -->
<footer class="bg-white p-3 text-center text-gray-500 shadow-inner w-full border-t border-gray-300">
&copy; Hanaro 2024
</footer>

</body>
</html>
Binary file added 정연채/ex1/book.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/bookmark_logo.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.
144 changes: 144 additions & 0 deletions 정연채/ex1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}

.ellipsis-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}

.bookmark-image {
width: 40px;
height: 40px;
object-fit: cover;
}

.card-item {
background-color: gray-200;
border: 2px solid white;
border-radius: 8px;
}

.section-container {
background-color: #e5e7eb;
border: 1px solid gray-200;
border-radius: 4px;
padding: 20px;
min-height: calc(100vh - 85px);

}
</style>
</head>

<body class="bg-white flex flex-col min-h-screen">

<header class="bg-white p-4 shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="bookmark_logo.png" alt="BookMark Logo" class="w-8 h-8 mr-2">
<h1 class="text-2xl font-bold cursor-pointer text-green-600">BookMark</h1>
</div>
<nav class="ml-auto flex items-center space-x-6">
<a href="https://github.com/yeonchae115/test11" class="text-gray-600 hover:text-gray-800 font-bold">GitHub Repo.</a>
<img src="profile.png" alt="Profile" class="w-8 h-8 rounded-full">
</nav>
</header>

<div class="max-w-5xl w-full flex mx-auto mt-3 space-x-4">
<!-- 왼쪽 -->
<aside class="w-1/2 section-container">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold ellipsis" style="max-width: 500px;">BookMark BookMark BookMark BookMark BookMark</h2>
</div>
<ul class="space-y-4">
<!-- 북마크 -->
<li class="flex items-center justify-between p-4 rounded card-item">
<div class="flex items-center">
<img src="book.png" class="bookmark-image mr-3" alt="Profile">
<div class="ellipsis">
<span class="font-bold text-gray-800 ellipsis">55BookMark BookMark BookMark BookMark</span>
<p class="text-sm text-gray-500 ellipsis-text">55년 나만의 북마크 나만의 북마크 나만의 북마크</p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<img src="setting.png" alt="Settings" class="w-6 h-6">
</button>
</li>
<li class="flex items-center justify-between p-4 rounded card-item">
<div class="flex items-center">
<img src="naver.png" class="bookmark-image mr-3" alt="Profile">
<div class="ellipsis">
<span class="font-bold text-gray-800 ellipsis">네이버</span>
<p class="text-sm text-gray-500 ellipsis-text">네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나보세요</p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<img src="setting.png" alt="Settings" class="w-6 h-6">
</button>
</li>
<li class="flex items-center justify-between p-4 rounded card-item">
<div class="flex items-center">
<img src="kakao.png" class="bookmark-image mr-3" alt="Profile">
<div class="ellipsis">
<span class="font-bold text-gray-800 ellipsis">Kakao</span>
<p class="text-sm text-gray-500 ellipsis-text">기술과 사람이 만드는 더 나은 세상, 카카오 다양성 이야기</p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<img src="setting.png" alt="Settings" class="w-6 h-6">
</button>
</li>

<!-- Add Mark -->
<li class="flex justify-center">
<button class="bg-black text-white py-2 px-4 rounded">+ Add Mark</button>
</li>
</ul>
</aside>

<!-- 오른쪽 -->
<main class="w-1/2 section-container">
<h2 class="text-2xl font-bold mb-4">Study</h2>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 rounded card-item">
<div class="flex items-center">
<img src="tailwind.png" class="bookmark-image mr-3" alt="Study">
<div class="ellipsis">
<span class="font-bold text-gray-800 ellipsis">Tailwind CSS</span>
<p class="text-sm text-gray-500 ellipsis-text">Tailwind CSS is a utility-first CSS framework</p>
</div>
</div>
<button class="text-gray-500 hover:text-gray-700">
<img src="setting.png" alt="Settings" class="w-6 h-6">
</button>
</div>
<!-- + Add Mark -->
<div class="flex justify-center">
<button class="bg-black text-white py-2 px-4 rounded">+ Add Mark</button>
</div>
</div>
</main>
</div>

<script>
function goToSignUp() {
window.location.href = 'register.html'; // 회원가입 페이지로 이동
}

</script>
</body>

</html>
142 changes: 142 additions & 0 deletions 정연채/ex1/index2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}

.ellipsis-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}

.bookmark-image {
width: 40px;
height: 40px;
object-fit: cover;
}

.settings-button {
background-color: #f3f4f6;
border-radius: 50%;
padding: 6px;
}

.card-item {
background-color: white; /* 흰색 배경 */
border: 1px solid #d1d5db; /* 연한 회색 테두리 */
border-radius: 8px; /* 둥근 모서리 */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 가벼운 그림자 */
}

.bg-custom {
background-color: #f4f5f7; /* 연한 회색 배경 */
}
</style>
</head>

<body class="bg-custom flex flex-col min-h-screen">

<!-- Header -->
<header class="bg-white p-4 shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="bookmark_logo.png" alt="BookMark Logo" class="w-8 h-8 mr-2">
<h1 class="text-2xl font-bold cursor-pointer text-green-600">BookMark</h1>
</div>
<nav class="ml-auto flex items-center space-x-6">
<a href="https://github.com/" class="text-gray-600 hover:text-gray-800 font-bold">GitHub Repo.</a>
<img src="profile.png" alt="Profile" class="w-8 h-8 rounded-full">
</nav>
</header>

<!-- Main Content -->
<div class="max-w-5xl w-full rounded p-4 flex mx-auto mt-8 space-x-8">
<!-- Left Sidebar -->
<aside class="w-1/2 pr-4">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold ellipsis" style="max-width: 500px;">BookMark BookMark BookMark BookMark BookMark</h2>
</div>
<ul class="space-y-4">
<!-- Bookmark Item -->
<li class="flex items-center justify-between p-4 rounded card-item"> <!-- 카드 스타일 적용 -->
<div class="flex items-center">
<img src="book.png" class="bookmark-image mr-3" alt="Profile">
<div class="ellipsis">
<span class="font-bold text-gray-800 ellipsis">55BookMark BookMark BookMark BookMark</span>
<p class="text-sm text-gray-500 ellipsis-text">55년 나만의 북마크 나만의 북마크 나만의 북마크</p>
</div>
</div>
<button class="settings-button hover:bg-gray-300">
<img src="setting.png" alt="Settings" class="w-5 h-5">
</button>
</li>
<!-- Additional Bookmark Items -->
<li class="flex items-center justify-between p-4 rounded card-item">
<div class="flex items-center">
<img src="naver.png" class="bookmark-image mr-3" alt="Profile">
<div class="ellipsis">
<span class="font-bold text-gray-800 ellipsis">네이버</span>
<p class="text-sm text-gray-500 ellipsis-text">네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나보세요</p>
</div>
</div>
<button class="settings-button hover:bg-gray-300">
<img src="setting.png" alt="Settings" class="w-5 h-5">
</button>
</li>
<li class="flex items-center justify-between p-4 rounded card-item">
<div class="flex items-center">
<img src="kakao.png" class="bookmark-image mr-3" alt="Profile">
<div class="ellipsis">
<span class="font-bold text-gray-800 ellipsis">Kakao</span>
<p class="text-sm text-gray-500 ellipsis-text">기술과 사람이 만드는 더 나은 세상, 카카오 다양성 이야기</p>
</div>
</div>
<button class="settings-button hover:bg-gray-300">
<img src="setting.png" alt="Settings" class="w-5 h-5">
</button>
</li>
<!-- + Add Mark 버튼 -->
<li class="flex justify-center">
<button class="bg-gray-800 text-white py-2 px-4 rounded">+ Add Mark</button>
</li>
</ul>
</aside>

<!-- Right Content -->
<main class="flex-1 pl-4">
<h2 class="text-2xl font-bold mb-4">Study</h2>
<div class="space-y-4">
<!-- Study Item -->
<div class="flex items-center justify-between p-4 rounded card-item">
<div class="flex items-center">
<img src="tailwind.png" class="bookmark-image mr-3" alt="Study">
<div class="ellipsis">
<span class="font-bold text-gray-800 ellipsis">Tailwind CSS</span>
<p class="text-sm text-gray-500 ellipsis-text">Tailwind CSS is a utility-first CSS framework</p>
</div>
</div>
<button class="settings-button hover:bg-gray-300">
<img src="setting.png" alt="Settings" class="w-5 h-5">
</button>
</div>
<!-- + Add Mark 버튼 -->
<div class="flex justify-center">
<button class="bg-gray-800 text-white py-2 px-4 rounded">+ Add Mark</button>
</div>
</div>
</main>
</div>
</body>

</html>
Binary file added 정연채/ex1/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/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/profile.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.
Loading