Skip to content

[프론트엔드 기초 과제 1] 박시홍 #18

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

[프론트엔드 기초 과제 1] 박시홍 #18

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
7411143
setting
Fresh-hongsi Sep 10, 2024
17b9292
final - submit
Fresh-hongsi 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
Empty file removed 박시홍/ex1/book-edit.html
View file
Open in desktop
Empty file.
Empty file removed 박시홍/ex1/index.html
View file
Open in desktop
Empty file.
Empty file removed 박시홍/ex1/register.html
View file
Open in desktop
Empty file.
Binary file added 박시홍/ex1/src/arrow.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.
116 changes: 116 additions & 0 deletions 박시홍/ex1/src/book-edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
<title>book_edit</title>

<style>
/* 인풋박스 커스텀 세팅 */
.input-field {
border: 2px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
font-size: 1rem;
color: #4a4a4a;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 이미지 둘러싼 배경 조정 */
.img-wrapper {
background-color: #ffffff;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #d1d5db;
border-radius: 0.375rem;
margin: 10px auto;
}

/* 이미지 크기 조정 */
.img-wrapper img {
width: 20px;
height: 20px;

}
</style>
</head>

<body class="h-screen flex flex-col">

<!-- 네비게이션 바 -->
<nav class="bg-white shadow-md">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">

<!-- 로고 -->
<div class="flex items-center space-x-4">
<img class="h-10 w-10" src="./icon.png" alt="Icon">
<a href="index.html" class="text-2xl font-bold text-gray-900">BookMark</a>
</div>

<!-- 깃허브 링크, sign up, sign in 링크 -->
<div class="flex items-center space-x-4 ml-auto">
<strong><a href="https://github.com/Fresh-hongsi" class="text-gray-900 hover:text-gray-700">Github
Repo.</a></strong>
<strong><a href=register.html>SignUp</a></strong>
<strong>|</strong>
<strong><a href=register.html>SignIn</a></strong>
</div>
</div>
</div>
</nav>

<!-- 메인 화면 -->
<main class="flex-grow flex">
<div class="flex w-full">

<!-- 왼쪽 컨텐츠 -->
<div class="bg-gray-300 w-1/3 h-full p-4 mr-4">

<!-- 인풋 박스 -->
<div class="mb-4">
<input class=" input-field w-full" type="text" placeholder="https://naver.com">
</div>

<!-- 체크 박스 -->
<div class="flex items-center">
<input type="checkbox" id="auto-delete" class="mr-2" style="margin-top: 10px;">
<label for="auto-delete" class="text-gray-700"
style="margin-left: 10px; margin-top: 10px;"><strong>이동 시 자동
삭제</strong></label>
</div>

<!-- 이미지 삽입 -->
<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px;">
<div
style="width: 40px; height: 40px; background-color: #ffffff; border: 2px solid #d1d5db; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center;">
<img src="arrow.png" alt="Arrow" style="width: 20px; height: 20px; cursor: pointer;">
</div>
<div
style="width: 40px; height: 40px; background-color: #ffffff; border: 2px solid #d1d5db; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center;">
<img src="disk.png" alt="Disk" style="width: 20px; height: 20px; cursor: pointer;">
</div>
</div>
<div style="text-align: center;"><strong>There is no marks.</strong></div>


</div>

</div>
</main>

<!-- 푸터 -->
<footer class="bg-gray-800 text-white py-2 text-sm fixed bottom-0 w-full">
<div class="max-w-7xl mx-auto px-4 text-center">
<p>&copy; Hanaro 2024</p>
</div>
</footer>

</body>

</html>
Binary file added 박시홍/ex1/src/disk.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/icon.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.
154 changes: 154 additions & 0 deletions 박시홍/ex1/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
<title>index</title>
</head>

<body class="h-screen flex flex-col">

<!-- 네비게이션 바 -->
<nav class="bg-white shadow-md">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- 로고 -->
<div class="flex items-center space-x-4">
<img class="h-10 w-10" src="./icon.png" alt="Icon">
<a href="index.html" class="text-2xl font-bold text-gray-900">BookMark</a>
</div>

<!-- 깃허브 링크, 프로필 사진 -->
<div class="ml-auto flex items-center space-x-4">
<strong><a href="https://github.com/Fresh-hongsi" class="text-gray-900 hover:text-gray-700">Github
Repo.</a></strong>
<div class="relative">
<img class="h-10 w-10 rounded-full" src="./photo.png" alt="User Profile">
</div>
</div>
</div>
</div>
</nav>

<!-- 메인 화면 -->
<main class="flex-grow flex">
<div class="flex w-full">

<!-- 왼쪽 북마크 영역 -->
<div class="bg-gray-300 w-1/2 h-full p-4 mr-4">
<h2 class="text-xl font-bold text-center">BookMark</h2>
<div>&nbsp;</div>

<!-- 카드 그룹 영역 -->
<div class="grid grid-cols-2 gap-4">

<!-- 카드 1 -->
<div class="relative bg-gray-100 shadow flex border-4 p-4">
<img class="w-16 h-16 mr-4" src="./유튜브2.png" alt="Image 1">
<div class="flex-grow">
<h3 class="font-semibold text-lg">Youtube</h3>
<p>친구, 가족을 비롯해 전 세계 사람들과 동영상 공유.</p>
</div>
<img class="h-10 w-10" src="./setting.png" alt="Settings">
</div>
<div>&nbsp</div>

<!-- 카드 2 -->
<div class="relative bg-gray-100 shadow flex border-4 p-4">
<img class="w-16 h-16 mr-4" src="./인스타그램1.png" alt="Image 2">
<div class="flex-grow">
<h3 class="font-semibold text-lg">Instagram</h3>
<p>Share Everyday Moments — Share the beauty of everyday moments with friends on Instagram.</p>
</div>
<img class="h-10 w-10" src="./setting.png" alt="Settings">
</div>
<div>&nbsp</div>

<!-- 카드 3 -->
<div class="relative bg-gray-100 shadow flex border-4 p-4">
<img class="w-16 h-16 mr-4" src="./카카오톡.png" alt="Image 3">
<div class="flex-grow">
<h3 class="font-semibold text-lg">Kakao Talk</h3>
<p>사람과 세상을 향한 모든 연결의 시작, 카카오톡</p>
</div>
<img class="h-10 w-10" src="./setting.png" alt="Settings">
</div>
<div>&nbsp</div>

<!-- 카드 4 -->
<div class="relative bg-gray-100 shadow flex border-4 p-4">
<img class="w-16 h-16 mr-4" src="./페이스북.png" alt="Image 4">
<div class="flex-grow">
<h3 class="font-semibold text-lg">Facebook</h3>
<p>친구, 가족, 아는 사람들과 사진과 동영상을 공유하고 메시지를 보내며 서로의 소식을 확인할 수 있습니다.</p>
</div>
<img class="h-10 w-10" src="./setting.png" alt="Settings">
</div>
</div>
<div>&nbsp</div>

<!-- 하단 버튼 -->
<div class="flex justify-end" style="color: azure; justify-content: end;">
<strong style="background-color: black; padding:10px; cursor: pointer; border-radius: 10px;">
+ Add Mark
</strong>
</div>


</div>

<!-- 오른쪽 스터디 영역 -->
<div class="bg-gray-300 w-1/2 h-full p-4">
<h1 class="text-xl font-bold text-center">Study</h1>
<div>&nbsp;</div>

<!-- 카드 그룹 영격 -->
<div class="grid grid-cols-2 gap-4">

<!-- 카드 1 -->
<div class="relative bg-gray-100 shadow flex border-4 p-4">
<img class="w-16 h-16 mr-4" src="./트위터1.png" alt="Image 1">
<div class="flex-grow">
<h3 class="font-semibold text-lg">Twitter</h3>
<p>뉴스 속보와 엔터테인먼트부터 스포츠와 정치까지, 실시간 코멘터리와 함께 이야기의 전말을 확인해 보세요.</p>
</div>
<img class="h-10 w-10" src="./setting.png" alt="Settings">
</div>
<div>&nbsp</div>

<!-- 카드 2 -->
<div class="relative bg-gray-100 shadow flex border-4 p-4">
<img class="w-16 h-16 mr-4" src="네이버밴드.png" alt="Image 2">
<div class="flex-grow">
<h3 class="font-semibold text-lg">Naver Band</h3>
<p>BAND는 모바일과 PC에서 모두 이용할 수 있어요. BAND 앱 다운로드..
...</p>
</div>
<img class="h-10 w-10" src="./setting.png" alt="Settings">
</div>
<div>&nbsp</div>
</div>

<!-- 하단 버튼 -->
<div class="flex justify-end" style="color: azure; justify-content: end;">
<strong style="background-color: black; padding:10px; cursor: pointer; border-radius: 10px;">
+ Add Mark
</strong>
</div>

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

<!-- 푸터 -->
<footer class=" bg-gray-800 text-white py-2 text-sm fixed bottom-0 w-full">
<div class="max-w-7xl mx-auto px-4 text-center">
<p>&copy; Hanaro 2024</p>
</div>
</footer>

</body>

</html>
3 changes: 3 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,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
Loading