Skip to content
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

Jump to bottom

Week03/chaeyeon #15

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

Week03/chaeyeon #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
a277421
feat:인스타그램 기본 틀
qkrcodus May 11, 2024
bc7423c
feat: aside, header,timeline 추가
qkrcodus May 12, 2024
ca611ff
반응형 전까지 완성
qkrcodus May 12, 2024
58a567b
반응형 추가
qkrcodus May 13, 2024
3de1aee
feat: Add HTML and CSS files
qkrcodus May 14, 2024
949143b
feat: renderCalendar, goToPreviousMonth, goToNextMonth 함수 추가
qkrcodus May 18, 2024
8b8a4a8
feat: html css 수정
qkrcodus May 18, 2024
717f623
feat: 현재 날짜 강조표시
qkrcodus May 18, 2024
8d29954
feat: section1 html css 파일 추가
qkrcodus May 19, 2024
a545664
feat: section2~5 html css 파일 추가
qkrcodus May 19, 2024
a3ac542
feat:footer html css 파일 추가
qkrcodus May 19, 2024
a59bada
feat:html css 수정
qkrcodus May 19, 2024
0a926b3
반응형 추가
qkrcodus May 20, 2024
0357c33
feat: css 파일과 반응형 수정
qkrcodus May 20, 2024
7a0e711
토글 구현중
qkrcodus May 20, 2024
a3cf07e
feat: vite-project 세팅, Navbar.jsx 추가
qkrcodus May 25, 2024
c6e8a9a
feat: Navbar css 수정, Sidebar component 추가
qkrcodus May 26, 2024
596181a
feat: Navbar css 수정
qkrcodus May 26, 2024
5ab12a2
feat: Main 컴포넌트 추가,Sidebar Navbar css 수정
qkrcodus May 26, 2024
75f7b16
eslint, reset, prettier 설정
qkrcodus May 26, 2024
ed2ff80
feature: Sidebox 스크롤 hover시 생기고 그 안에서만 작동되게 설정, Sidebox Navbox 컴포넌트 f…
qkrcodus May 26, 2024
46f1478
useState, useEffect 이용해서 코드 수정
qkrcodus May 27, 2024
f881667
feature: main.jsx 수정,husky 설치
qkrcodus May 27, 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
15 changes: 15 additions & 0 deletions node_modules/.bin/husky
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions node_modules/.bin/husky.cmd
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 16 additions & 0 deletions node_modules/.yarn-integrity
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions node_modules/husky/LICENSE
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/husky/README.md
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 26 additions & 0 deletions node_modules/husky/bin.mjs
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 20 additions & 0 deletions node_modules/husky/husky
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions node_modules/husky/index.d.mts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 23 additions & 0 deletions node_modules/husky/index.mjs
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 24 additions & 0 deletions node_modules/husky/package.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"devDependencies": {
"husky": "^9.0.11"
}
}
Binary file added week01/chaeyeon/img/스크린샷 2024-01-22 191621.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 week01/chaeyeon/img/스크린샷 2024-05-13 001320.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 week01/chaeyeon/img/스크린샷 2024-05-13 001957.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 week01/chaeyeon/img/스크린샷 2024-05-13 003320.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.
163 changes: 163 additions & 0 deletions week01/chaeyeon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="whole-container">
<header>
<nav>
<img src="img/스크린샷 2024-05-13 003320.png">
<div class="hidden-logo-wrapper"><i class="fa-brands fa-instagram"></i></div>
<li> <a class="side-bar"href="#"><i class="fa-solid fa-house"></i><div class="side-bar-menu">홈</div></a></li>
<li> <a class="side-bar" href="#"><i class="fa-solid fa-magnifying-glass"></i><div class="side-bar-menu">검색</div></a></li>
<li> <a class="side-bar" href="#"><i class="fa-brands fa-searchengin"></i><div class="side-bar-menu">탐색 탭</div></a></li>
<li> <a class="side-bar" href="#"><i class="fa-solid fa-video"></i><div class="side-bar-menu">릴스</div></a></li>
<li> <a class="side-bar" href="#"><i class="fa-solid fa-message"></i><div class="side-bar-menu">메시지</div></a></li>
<li> <a class="side-bar" href="#"><i class="fa-regular fa-heart"></i><div class="side-bar-menu">알림</div></a></li>
<li> <a class="side-bar" href="#"><i class="fa-solid fa-square-plus"></i><div class="side-bar-menu">만들기</div></a></li>
<li> <a class="side-bar" href="#"><i class="fa-regular fa-user"></i><div class="side-bar-menu">프로필</div></a></li>

<div class="left-down-container">
<li> <a class="side-bar" href="#"><i class="fa-brands fa-threads"></i><div class="side-bar-menu">Threads</div></a></li>
<li> <a class="side-bar" href="#"><i class="fa-solid fa-bars"></i><div class="side-bar-menu">더 보기</div></a></li>
</div>
</nav>
</header>
<main>
<div class="hidden-nav-bar1">
<img src="img/스크린샷 2024-05-13 003320.png">
<form>
<div>
<i class="fa-solid fa-magnifying-glass"></i>
<input placeholder="">
<i class="fa-regular fa-heart"></i>
</div>

</form>
</div>
<div class="hidden-nav-bar2">
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-brands fa-searchengin"></i>
<i class="fa-solid fa-video"></i>
<i class="fa-solid fa-square-plus"></i>
<i class="fa-solid fa-message"></i>
<i class="fa-regular fa-user"></i>
</div>
<section>
<li><div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"></div><p>mnu_0722</p></li>
<li><div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"></div><p>mnu_0722</p></li>
<li><div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"></div><p>mnu_0722</p></li>
<li><div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"></div><p>mnu_0722</p></li>
<li><div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"></div><p>mnu_0722</p></li>
<li><div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"></div><p>mnu_0722</p></li>
<li class="profile-hidden"><div ><img class="profile-img " src="img/스크린샷 2024-01-22 191621.png"></div><p>mnu_0722</p></li>
<li class="profile-hidden"><div ><img class="profile-img " src="img/스크린샷 2024-01-22 191621.png"></div><p>mnu_0722</p></li>
<i class="fa-solid fa-circle-arrow-right"></i>
</section>
<article class="post-wrapper">
<div class="post">
<div class="post-profile">
<img class="profile-img" src="img/스크린샷 2024-05-13 001957.png">
<div>
<p>boby_kurwa_curling_daily
5주
팔로우
</p>
<p class="class-for-margin font-gray">원본 오디오</p>
</div>
</div>
<img class="post-img"src="img/스크린샷 2024-05-13 001320.png">
<div class="icons-wrapper">
<div>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-solid fa-share"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<p>mnu_0722님 여러명이 좋아합니다</p>
</div>
<div class="post">
<div class="post-profile">
<img class="profile-img" src="img/스크린샷 2024-05-13 001957.png">
<div>
<p>boby_kurwa_curling_daily
5주
팔로우
</p>
<p class="class-for-margin font-gray">원본 오디오</p>
</div>
</div>
<img class="post-img"src="img/스크린샷 2024-05-13 001320.png">
<div class="icons-wrapper">
<div>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-solid fa-share"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<p>mnu_0722님 여러명이 좋아합니다</p>
</div>
<div class="post">
<div class="post-profile">
<img class="profile-img" src="img/스크린샷 2024-05-13 001957.png">
<div>
<p>boby_kurwa_curling_daily
5주
팔로우
</p>
<p class="class-for-margin font-gray">원본 오디오</p>
</div>
</div>
<img class="post-img"src="img/스크린샷 2024-05-13 001320.png">
<div class="icons-wrapper">
<div>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-solid fa-share"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<p>mnu_0722님 여러명이 좋아합니다</p>
</div>

</article>
</main>
<div class="right-container">
<aside>
<div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"><div><p>mnu_0722</p><p>박채연</p></div><button class="font-blue"> 전환</button></div>
<div class="follower-recommendation"><p>회원님을 위한 추천</p><p>모두 보기</p></div>
<div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"><div><p>mnu_0722</p><p>박채연</p></div><button class="font-blue">팔로우</button></div>
<div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"><div><p>mnu_0722</p><p>박채연</p></div><button class="font-blue">팔로우</button></div>
<div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"><div><p>mnu_0722</p><p>박채연</p></div><button class="font-blue">팔로우</button></div>
<div><img class="profile-img" src="img/스크린샷 2024-01-22 191621.png"><div><p>mnu_0722</p><p>박채연</p></div><button class="font-blue">팔로우</button></div>
</aside>
<footer>
<div>
<p class="font-gray" class="fontsize-s">소개
도움말
홍보 센터
API
채용 정보
개인정보처리방침
약관
위치
언어
Meta Verified</p>
<p class="font-gray">@ 2024 INSTAGRAM FROM META</p>
</div>
</footer>
</div>
</div>


</body>
</html>
51 changes: 51 additions & 0 deletions week01/chaeyeon/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html { font-size: 62.5%;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
list-style: none;
text-decoration-line: none;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Loading