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

[2주차 기본과제] 마켓페이지 만들기 #5

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

[2주차 기본과제] 마켓페이지 만들기 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fb800ea
feat.기본과제완료
eastlaw80 Apr 7, 2023
f70027b
init. todomate 시작
eastlaw80 Apr 7, 2023
becf177
feat.기본과제완료
eastlaw80 Apr 7, 2023
805f43f
Merge branch 'week1-shoppingmall' into week1
eastlaw80 Apr 7, 2023
45a7179
Merge branch 'week1-todomate' into week1
eastlaw80 Apr 7, 2023
5b30abd
feat : marketpage refactoring
eastlaw80 Apr 17, 2023
05cfe78
fix : 폴더이름 변경
eastlaw80 Apr 17, 2023
31f61cb
feat : 상품데이터 상수파일로 표현
eastlaw80 Apr 18, 2023
3080167
feat : 체크박스 태그에 따라 데이터 정렬
eastlaw80 Apr 21, 2023
973456c
feat : 해시태그 모달 기능 추가
eastlaw80 Apr 21, 2023
b41f15e
feat : 상단에 체크된 태그 노출 기능 추가
eastlaw80 Apr 21, 2023
125fa67
fix : 자잘한 오타 수정
eastlaw80 Apr 21, 2023
3c4b3c5
fix : 오타수정 2
eastlaw80 Apr 21, 2023
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.
7 changes: 7 additions & 0 deletions WebOptimize.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
## 웹최적화란 무엇인가

## 최적화가 필요한 이유는 무엇일까?

## 이를 위해 어떤 개발을 해야할까?

## 최적화를 위한 개발을 꼭 해야할까?
Binary file added Week2/.DS_Store
View file
Open in desktop
Binary file not shown.
90 changes: 90 additions & 0 deletions Week2/Calender/4th_assginment.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
@import "../reset.css";

body {
background-color: azure;
}

header {
display: flex;
justify-content: center;
}

.header_title {
font-size: 2rem;
margin: 1rem;
}

.weekly {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: repeat(7, 1fr);
height: 8rem;
background-color: skyblue;
margin: 0 3rem;
}

.weekly_date {
display: grid;
justify-content: center;
text-align: center;
align-items: center;
grid-template-rows: repeat(3, 1fr);
}

.weekly_icon {
position: relative;
}

.weekly_todonum {
color: white;
position: absolute;
top: 31%;
left: 34%;
}

.weekly_icon > i {
font-size: 1.7rem;
}

.todo {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 25rem;
margin: 1rem 3rem;
}

.todo_list {
width: fit-content;
margin-bottom: 2rem;
}
.list_title {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
padding: 0.2rem 0.5rem;
margin-bottom: 0.5rem;
}
.list_title > button {
border: none;
background-color: transparent;
color: white;
}
.list_content {
display: flex;
margin-bottom: 0.5rem;
}

footer {
display: flex;
justify-content: center;
align-items: center;
}
.footer_btn {
padding: 0.5rem 0.7rem;
margin: 1rem;
background-color: skyblue;
border: none;
}
149 changes: 149 additions & 0 deletions Week2/Calender/4th_assignment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 lang = "ko" 로 바꿔주면 좋겠다!!

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web_TO-DO_MATE</title>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

title 지정해주는 디테일 대박~!

<link rel="stylesheet" href="4th_assginment.css" />
<script
src="https://kit.fontawesome.com/67f5caa03d.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<h1 class="header_title">WEB TO DO MATE</h1>
</header>
<main>
<section class="weekly">
<!--월-->
<div class="weekly_date">
<h4 class="weekly_day">월</h4>
<div class="weekly_icon">
<i class="fa-solid fa-heart"></i>
<p class="weekly_todonum">6</p>
</div>
<p class="weekly_datenum">27</p>
</div>
<!--화-->
<div class="weekly_date">
<h4 class="weekly_day">화</h4>
<div class="weekly_icon">
<i class="fa-solid fa-heart"></i>
<p class="weekly_todonum">6</p>
</div>
<p class="weekly_datenum">28</p>
</div>
<!--수-->
<div class="weekly_date">
<h4 class="weekly_day">수</h4>
<div class="weekly_icon">
<i class="fa-solid fa-heart"></i>
<p class="weekly_todonum">6</p>
</div>
<p class="weekly_datenum">29</p>
</div>
<!--목-->
<div class="weekly_date">
<h4 class="weekly_day">목</h4>
<div class="weekly_icon">
<i class="fa-solid fa-heart" style="color: aqua"></i>
<p class="weekly_todonum">6</p>
</div>
<p class="weekly_datenum">30</p>
</div>
<!--금-->
<div class="weekly_date">
<h4 class="weekly_day">금</h4>
<div class="weekly_icon">
<i class="fa-solid fa-heart"></i>
<p class="weekly_todonum">6</p>
</div>
<p class="weekly_datenum">31</p>
</div>
<!--토-->
<div class="weekly_date">
<h4 class="weekly_day">토</h4>
<div class="weekly_icon">
<i class="fa-solid fa-heart"></i>
<p class="weekly_todonum">9</p>
</div>
<p class="weekly_datenum">1</p>
</div>
<!--일-->
<div class="weekly_date">
<h4 class="weekly_day">일</h4>
<div class="weekly_icon">
<i class="fa-solid fa-heart"></i>
<p class="weekly_todonum">6</p>
</div>
<p class="weekly_datenum">2</p>
</div>
</section>
<section class="todo">
<!--1번째 리스트-->
<article class="todo_list">
<div class="list_title" style="background-color: burlywood">
<h3 class="list_title_name">Wanna do</h3>
<button><i class="fa-solid fa-circle-plus"></i></button>
</div>
<p class="list_content">
<i class="fa-solid fa-heart" style="color: pink"></i> 테라스에서
커피마시기
</p>
<p class="list_content"><i class="fa-solid fa-heart"></i> 풋살하기</p>
<p class="list_content">
<i class="fa-solid fa-heart"></i> 브이로그찍기
</p>
</article>
<!--2번째 리스트-->
<article class="todo_list">
<div class="list_title" style="background-color: orange">
<h3 class="list_title_name">Have to do</h3>
<button><i class="fa-solid fa-circle-plus"></i></button>
</div>
<p class="list_content"><i class="fa-solid fa-heart"></i> 운동가기</p>
<p class="list_content"><i class="fa-solid fa-heart"></i> 시험공부</p>
<p class="list_content">
<i class="fa-solid fa-heart"></i> 졸업논문 가안잡기
</p>
</article>
<!--3번째 리스트-->
<article class="todo_list">
<div class="list_title" style="background-color: brown">
<h3 class="list_title_name">Urgent!</h3>
<button><i class="fa-solid fa-circle-plus"></i></button>
</div>
<p class="list_content">
<i class="fa-solid fa-heart"></i> 자료구조 강의수강
</p>
<p class="list_content">
<i class="fa-solid fa-heart" style="color: pink"></i> SOPT과제
</p>
</article>
<!--4번째 리스트-->
<article class="todo_list">
<div class="list_title" style="background-color: grey">
<h3 class="list_title_name">Not to do</h3>
<button><i class="fa-solid fa-circle-plus"></i></button>
</div>
<p class="list_content">
<i class="fa-solid fa-heart"></i> 유튜브보기
</p>
<p class="list_content"><i class="fa-solid fa-heart"></i> 늦잠자기</p>
</article>
</section>
</main>
<footer>
<button class="footer_btn">
<i class="fa-solid fa-house"></i>
<p class="footer_txt">달력</p>
</button>
<button class="footer_btn">
<i class="fa-solid fa-user"></i>
<p class="footer_txt">MY</p>
</button>
</footer>
</body>
</html>
108 changes: 108 additions & 0 deletions Week2/Market/3rd_assginment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Heon's Camera</title>
<link rel="stylesheet" href="3rd_assignment.css" />
</head>
<body>
<header class="header">
<h1 class="header_title">Heon's Camera</h1>
<button class="header_btn" type="button">
<i class="fa-solid fa-bars"></i>
</button>
</header>
<main>
<nav class="nav">
<h3 class="nav_title">종류</h3>
<div>
<div class="nav_content">
<label
><input
class="nav_check"
type="checkbox"
id="check_all"
/>전체</label
>
</div>
<div class="nav_content">
<label
><input
class="nav_check"
type="checkbox"
id="check_full"
/>풀프레임</label
>
</div>
<div class="nav_content">
<label
><input
class="nav_check"
type="checkbox"
id="check_crop"
/>크롭센서</label
>
</div>
<div class="nav_content">
<label
><input
class="nav_check"
type="checkbox"
id="check_ddok"
/>똑딱이</label
>
</div>

<div class="nav_content">
<label
><input
class="nav_check"
type="checkbox"
id="check_action"
/>액션캠</label
>
</div>
</div>
</nav>
<div class="main_content">
<section id="checked_tags"></section>
<section id="cards"></section>
</div>
</main>
<!--카드 템플릿-->
<template id="cards_template">
<article class="cards_content">
<div class="cards_modal">
<div class="cards_modal_tags">
<button class="tag_cls_btn" type="button">
<i class="fa-solid fa-x"></i></button
>{modal_tags}
</div>
</div>
<h3>{card_name}</h3>
<div class="cards_sub">
<div class="cards_tagbox">{card_tags}</div>
<button class="cards_tag_btn" type="button">+</button>
</div>
<img class="cards_img" src="{card_img}" alt="{card_alt}" />
<button class="cards_btn" type="button">
<i class="fa-solid fa-heart"></i>
</button>
</article>
</template>
<!--해시태그 템플릿-->
<template id="checked_tags_template">
<span class="checked_tag" id="{checked_tag_id}"
>{checked_tag_name}<label for="{checkbox_id}">
<i class="fa-solid fa-x"></i></label
></span>
</template>
<script
src="https://kit.fontawesome.com/67f5caa03d.js"
crossorigin="anonymous"
></script>
<script defer type="module" src="./3rd_assginment.js"></script>
</body>
</html>
Loading