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

[2주차 과제] 당근마켓 랜딩 페이지 클론 / javascript로 달력 만들기 #13

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
+1,442 −0
Open

[2주차 과제] 당근마켓 랜딩 페이지 클론 / javascript로 달력 만들기 #13

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
12eed6d
init: week01과제 초기세팅
KIMGEONHWI May 2, 2024
7f06496
feat: 헤더 구현
KIMGEONHWI May 3, 2024
02218ee
feat: 수직선 긋기
KIMGEONHWI May 3, 2024
d128025
feat: 스토리 section 구현
KIMGEONHWI May 6, 2024
91c5775
rename: 스토리 이미지 이름 변경
KIMGEONHWI May 6, 2024
9e8aa7f
rename: 변경 안된 스토리 이미지 경로 변경
KIMGEONHWI May 6, 2024
af3f9b5
refactor: header 버튼내 간격 margin 대신 padding으로 적용
KIMGEONHWI May 12, 2024
49c12a9
refactor: story section 높이, 너비 지정 및 margin에서 padding으로 조정
KIMGEONHWI May 12, 2024
965a749
feat: 메인 article 완성
KIMGEONHWI May 12, 2024
2a0f1b2
rename: week1 폴더 안에 내 폴더 생성
KIMGEONHWI May 12, 2024
f221a5d
feat: aside, footer 구현
KIMGEONHWI May 12, 2024
1ad9e8f
fix: 너비 조정
KIMGEONHWI May 12, 2024
d04f1e3
refactor: 세로 수직선 수정
KIMGEONHWI May 12, 2024
68a0650
init: 초기세팅
KIMGEONHWI May 19, 2024
87dc48e
feat: main-top 구현
KIMGEONHWI May 19, 2024
ac8e722
feat: 세번째 section 구현
KIMGEONHWI May 24, 2024
0ec4a8f
feat: 네번째 section 구현
KIMGEONHWI May 24, 2024
6b41906
feat: 다섯번쨰 section 구현
KIMGEONHWI May 24, 2024
ee96079
feat: footer 구현
KIMGEONHWI May 24, 2024
157966d
init: calendar 과제 초기세팅
KIMGEONHWI May 24, 2024
c68e179
feat: html틀 구현
KIMGEONHWI May 26, 2024
b0d4cbf
feat: calendar 구현
KIMGEONHWI May 26, 2024
c19507d
fix: 변수명 오타 수정
KIMGEONHWI May 26, 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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added week01/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added week01/week01_geonhwi/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added week01/week01_geonhwi/assets/header_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.
Binary file added week01/week01_geonhwi/assets/main_img.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/week01_geonhwi/assets/main_section_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.
Binary file added week01/week01_geonhwi/assets/story_img.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.
234 changes: 234 additions & 0 deletions week01/week01_geonhwi/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/455c79571e.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./style.css" />
<title>instagram</title>
</head>
<body>
<header class="header">
<a href="./index.html">
<img
class="img_header_logo"
src="./assets/header_logo.png"
alt="헤더 로고 이미지"
/>
</a>
<ul class="header_ul_first">
<li>
<button class="header_btn">
<i class="fa-solid fa-house"></i>
<span class="header_home_span">홈</span>
</button>
</li>
<li>
<button class="header_btn">
<i class="fa-solid fa-magnifying-glass"></i>
<span class="header_home_span">검색</span>
</button>
</li>
<li>
<button class="header_btn">
<i class="fa-regular fa-compass"></i>
<span class="header_home_span">탐색 탭</span>
</button>
</li>
<li>
<button class="header_btn">
<i class="fa-solid fa-paper-plane"></i>
<span class="header_home_span">메시지</span>
</button>
</li>
<li>
<button class="header_btn">
<i class="fa-regular fa-heart"></i>
<span class="header_home_span">알림</span>
</button>
</li>
<li>
<button class="header_btn">
<i class="fa-regular fa-square-plus"></i>
<span class="header_home_span">만들기</span>
</button>
</li>
<li>
<button class="header_btn">
<i class="fa-regular fa-user"></i>
<span class="header_home_span">프로필</span>
</button>
</li>
</ul>
<ul class="heaer_ul_second">
<li>
<button class="header_btn">
<i class="fa-solid fa-ear-listen"></i>
<span class="header_home_span">Thread</span>
</button>
</li>
<li>
<button class="header_btn">
<i class="fa-solid fa-bars"></i>
<span class="header_home_span">더 보기</span>
</button>
</li>
</ul>
</header>
<!-- 세로 수직선 긋기 -->
<vr />
<main>
<div class="content_container">
<div class="main_wrapper">
<section class="story_section">
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
<div class="story_div">
<img src="./assets/story_img.png" alt="스토리 이미지" />
<p>story_id</p>
</div>
</section>
<article class="main_article">
<div class="main_title">
<div class="three_elements_div">
<img
src="./assets/main_section_logo.png"
alt="메인 프로필 로고"
/>
<p class="main_profile_name">obscura_store.kr</p>
<p class="main_time">2시간</p>
</div>
<div class="one_elements_div">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
<div class="main_img_div">
<img src="./assets/main_img.png" alt="메인 세션 이미지" />
</div>
<div class="main_fa">
<div class="three_fa_div">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-comment"></i>
<i class="fa-solid fa-paper-plane"></i>
</div>
<div class="one_fa_div">
<i class="fa-regular fa-bookmark"></i>
</div>
</div>
</article>
</div>
<div class="side_div">
<aside class="aside">
<ul>
<div class="aside_profile_container">
<div class="aside_profile_box">
<i class="fa-regular fa-user"></i>
<div class="aside_profile_info">
<p class="profile_id">hedgehxgh</p>
<p>김건휘</p>
</div>
<span class="aside_profile_span">전환</span>
</div>
</div>
<div class="aside_recommand_container">
<p class="recommand">회원님을 위한 추천</p>
<p>모두 보기</p>
</div>
<div class="aside_profile_container">
<div class="aside_profile_box">
<i class="fa-regular fa-user"></i>
<div class="aside_profile_info">
<p class="profile_id">hedgehxgh</p>
<p>김건휘</p>
</div>
<span class="aside_profile_span">팔로우</span>
</div>
</div>
<div class="aside_profile_container">
<div class="aside_profile_box">
<i class="fa-regular fa-user"></i>
<div class="aside_profile_info">
<p class="profile_id">hedgehxgh</p>
<p>김건휘</p>
</div>
<span class="aside_profile_span">팔로우</span>
</div>
</div>
<div class="aside_profile_container">
<div class="aside_profile_box">
<i class="fa-regular fa-user"></i>
<div class="aside_profile_info">
<p class="profile_id">hedgehxgh</p>
<p>김건휘</p>
</div>
<span class="aside_profile_span">팔로우</span>
</div>
</div>
<div class="aside_profile_container">
<div class="aside_profile_box">
<i class="fa-regular fa-user"></i>
<div class="aside_profile_info">
<p class="profile_id">hedgehxgh</p>
<p>김건휘</p>
</div>
<span class="aside_profile_span">팔로우</span>
</div>
</div>
<div class="aside_profile_container">
<div class="aside_profile_box">
<i class="fa-regular fa-user"></i>
<div class="aside_profile_info">
<p class="profile_id">hedgehxgh</p>
<p>김건휘</p>
</div>
<span class="aside_profile_span">팔로우</span>
</div>
</div>
</ul>
</aside>
<footer class="footer">
<ul class="footer_ul">
<li>소개 · 도움말 · 홍보 센터 · API · 채용 정보 ·</li>
<li>개인정보처리방침 · 약관 · 위치 · 언어 ·Meta</li>
<br />
<li>© 2024 INSTAGRAM FROM META</li>
</ul>
</footer>
</div>
</div>
</main>
</body>
</html>
43 changes: 43 additions & 0 deletions week01/week01_geonhwi/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
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;
}
/* 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