diff --git a/week1/shopping list/img/a1.jpg b/week1/shopping list/img/a1.jpg
new file mode 100644
index 0000000..7939b8c
Binary files /dev/null and b/week1/shopping list/img/a1.jpg differ
diff --git a/week1/shopping list/img/a2.jpg b/week1/shopping list/img/a2.jpg
new file mode 100644
index 0000000..e38d94e
Binary files /dev/null and b/week1/shopping list/img/a2.jpg differ
diff --git a/week1/shopping list/img/a3.jpg b/week1/shopping list/img/a3.jpg
new file mode 100644
index 0000000..f0a95cb
Binary files /dev/null and b/week1/shopping list/img/a3.jpg differ
diff --git a/week1/shopping list/img/s1.jpg b/week1/shopping list/img/s1.jpg
new file mode 100644
index 0000000..6eac638
Binary files /dev/null and b/week1/shopping list/img/s1.jpg differ
diff --git a/week1/shopping list/img/s2.jpg b/week1/shopping list/img/s2.jpg
new file mode 100644
index 0000000..d837fc1
Binary files /dev/null and b/week1/shopping list/img/s2.jpg differ
diff --git a/week1/shopping list/img/s3.jpg b/week1/shopping list/img/s3.jpg
new file mode 100644
index 0000000..f784cdd
Binary files /dev/null and b/week1/shopping list/img/s3.jpg differ
diff --git a/week1/shopping list/img/t1.jpg b/week1/shopping list/img/t1.jpg
new file mode 100644
index 0000000..2eabb5c
Binary files /dev/null and b/week1/shopping list/img/t1.jpg differ
diff --git a/week1/shopping list/img/t2.jpg b/week1/shopping list/img/t2.jpg
new file mode 100644
index 0000000..3568416
Binary files /dev/null and b/week1/shopping list/img/t2.jpg differ
diff --git a/week1/shopping list/img/t3.jpg b/week1/shopping list/img/t3.jpg
new file mode 100644
index 0000000..342afa8
Binary files /dev/null and b/week1/shopping list/img/t3.jpg differ
diff --git a/week1/shopping list/img/t4.jpg b/week1/shopping list/img/t4.jpg
new file mode 100644
index 0000000..55e7941
Binary files /dev/null and b/week1/shopping list/img/t4.jpg differ
diff --git a/week1/shopping list/img/t5.jpg b/week1/shopping list/img/t5.jpg
new file mode 100644
index 0000000..5e7139b
Binary files /dev/null and b/week1/shopping list/img/t5.jpg differ
diff --git a/week1/shopping list/index.html b/week1/shopping list/index.html
new file mode 100644
index 0000000..971dfa8
--- /dev/null
+++ b/week1/shopping list/index.html
@@ -0,0 +1,225 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ webbie's shop list
+
+
+
+
+ ♡
+ 보운이의 찜리스트
+
+
+
+
+
+
+
+
+ 전체
+
+
+
+ 🤍
+ 강아지 폰케이스
+ 5,900
+
+
+
+ 🤍
+ 쪼꼬미 미니 리본핀
+ 6,900
+
+
+
+ 🤍
+ 행운의 네잎 클로버 지비츠
+ 12,900
+
+
+
+ 🤍
+ 레거시 플리츠 스커트
+ 26,040
+
+
+
+ 🤍
+ 리본 다트 밴딩 미니스커트
+ 13,850
+
+
+
+ 🤍
+ 스위티 프릴 스커트
+ 16,740
+
+
+
+ 🤍
+ 프릴 슈 블라우스
+ 22,620
+
+
+
+ 🤍
+ 인디 잔꽃 원피스 세트
+ 37,900
+
+
+
+ 🤍
+ 레이어드 뷔스티에 미니원피스
+ 16,020
+
+
+
+ 🤍
+ 프린지 후크 트위드자켓
+ 38,610
+
+
+
+ 🤍
+ 리본 오프숄더
+ 37,640
+
+
+
+
+ 상의
+
+
+
+ 🤍
+ 프릴 슈 블라우스
+ 22,620
+
+
+
+ 🤍
+ 인디 잔꽃 원피스 세트
+ 37,900
+
+
+
+ 🤍
+ 레이어드 뷔스티에 미니원피스
+ 16,020
+
+
+
+ 🤍
+ 프린지 후크 트위드자켓
+ 38,610
+
+
+
+ 🤍
+ 리본 오프숄더
+ 37,640
+
+
+
+
+ 하의
+
+
+
+ 🤍
+ 레거시 플리츠 스커트
+ 26,040
+
+
+
+ 🤍
+ 리본 다트 밴딩 미니스커트
+ 13,850
+
+
+
+ 🤍
+ 스위티 프릴 스커트
+ 16,740
+
+
+
+
+ 악세서리
+
+
+
+ 🤍
+ 강아지 폰케이스
+ 5,900
+
+
+
+ 🤍
+ 쪼꼬미 미니 리본핀
+ 6,900
+
+
+
+ 🤍
+ 행운의 네잎 클로버 지비츠
+ 12,900
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week1/shopping list/style.css b/week1/shopping list/style.css
new file mode 100644
index 0000000..df3bab5
--- /dev/null
+++ b/week1/shopping list/style.css
@@ -0,0 +1,186 @@
+/*모두 적용- 전체*/
+.gaegu-regular {
+ font-family: "Gaegu", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+ line-height: 1px;
+ }
+
+
+ /*제목*/
+ .big_title{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: fixed;
+ top:0;
+ left:0;
+ width: 100%;
+ height: 5rem;
+ background-color: lightgreen;
+ z-index: 10;
+ }
+ .big_title > h1 {
+ display: inline-block;
+ color: darkgreen;
+ font-size: 3rem;
+}
+.big_title > h1 + label > span {
+ display: block;
+ width: 3rem;
+ height: 0.3rem;
+ margin: 0.5rem;
+ border-radius: 1rem;
+ background: darkgreen;
+}
+/*메뉴 바*/
+nav{
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ position: fixed;
+ top:30%;
+ left:3rem;
+ width: 9rem;
+ padding: 0.8rem;
+ border-radius: 2rem;
+ background-color: lightgreen;
+}
+nav > span {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ gap: 1rem;
+ width: 80%;
+ margin-top: 1rem;
+ padding: 0.8rem;
+ border-radius: 2rem;
+ background-color: white;
+}
+ /*focus 넣으려고 버튼으로 함 -> h2일때는 focus안됨 ㅠ*/
+nav > span > button {
+ border: 0;
+ background-color: transparent;
+ font-family: "Gaegu", sans-serif;
+ font-weight: 550;
+ font-size: 1.5rem;
+ font-style: normal;
+}
+nav > span > button:focus, nav > span > button:hover {
+ width: 100%;
+ border-radius: 1.5rem;
+ background-color: lightgreen;
+ color: white;
+}
+nav > span > button > a {
+ text-decoration:none;
+ color: black;
+}
+
+
+/*메인*/
+main{
+ position: relative;
+ left: 15rem;
+ width: 80%;
+ height: 100%; /*footer 하단 고정에 필요*/
+ margin-bottom: 10rem;
+ overflow: hidden;
+}
+
+.banner-container{
+ display: flex;
+ width: 100%;
+ animation: slide 5s linear infinite;
+}
+@keyframes slide {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-100%);
+ }
+}
+.banner {
+ display: flex;
+ flex: 0 0 auto;
+ flex-wrap: nowrap;
+ margin-top: 8rem;
+ gap: 0.7rem;
+ width: 100%;
+}
+
+main > section > h1 {
+ display: flex;
+ align-items: end;
+ height: 8rem;
+ font-size: 1.875rem;
+}
+
+ /*화면 크기 줄일 때 반응형.. 수동으로 했다...! ㅋㅋ */
+@media screen and (max-width: 1255px) {
+ .container > span{
+ min-width: 18.75rem;
+ }
+}
+@media screen and (max-width: 992px) {
+ .container > span{
+ min-width: 31.25rem;
+ }
+}
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ gap: 0.625rem;
+}
+
+.container > span {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ max-width: 15.625rem;
+ padding: 0.938rem;
+ border-radius: 1.25rem;
+ background-color: rgb(227, 253, 227);
+}
+.container > span:hover {
+ animation-name: demo;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ animation-direction: alternate;
+}
+@keyframes demo {
+ from{
+ transform: scale(1);
+ }
+ to{
+ transform: scale(1.04);
+ }
+}
+.heart:hover {
+ filter: invert(100%) ;
+}
+img {
+ display: flex;
+ width: 80%;
+ min-width: 12.5rem;
+ margin-bottom: 0.625rem;
+ border-radius: 1.25rem;
+}
+.container > span > h3 {
+ margin: 0.625rem;
+}
+/*FOOTER*/
+footer {
+ display: flex;
+ justify-content: center;
+ position: relative; /*하단 고정위함*/
+ transform: translateY(100%);
+ width: 100%;
+ padding-bottom: 6.25rem;
+ background-color: darkgreen;
+ color: lightgreen
+}
+
diff --git a/week1/todo list/style.css b/week1/todo list/style.css
new file mode 100644
index 0000000..d4bd9ce
--- /dev/null
+++ b/week1/todo list/style.css
@@ -0,0 +1,109 @@
+*{
+ font-family: "Hi Melody", sans-serif;
+ font-weight: 700;
+ font-style: normal;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ background-image: linear-gradient(to bottom, rgb(146, 242, 255), rgb(255, 219, 247));
+ height: 100vh;
+}
+
+/*header*/
+header {
+ position: absolute;
+ top:50px;
+ width: 100%;
+}
+header > h1 {
+ display: flex;
+ justify-content: center;
+ color: blue;
+ font-size: 50px;
+}
+header > form {
+ display: flex;
+ justify-content: center;
+ gap:5px;
+}
+input {
+ border: 0px;
+ border-radius: 30px;
+ width: 20%;
+ height: 40px;
+
+}
+input::placeholder{
+ padding-left: 10px;
+ color: rgb(180, 180, 180);
+ font-size: 20px;
+}
+input:focus {
+ outline: none;
+}
+#inputButton {
+ width: 40px;
+ cursor: pointer;
+ border-radius: 30px;
+ border-color: transparent;
+ background-color: rgb(155, 227, 255);
+}
+
+/*main*/
+main {
+ position: absolute;
+ bottom: 0px;
+ display:flex;
+ justify-content: center;
+ align-items: start;
+ height: 60%;
+ gap:100px
+}
+.sectionTitle{
+ position: relative;
+ top:0px;
+ display: flex;
+ justify-content: center;
+ font-size: 30px;
+}
+#todo {
+ display: flex;
+ align-items: center;
+ border-radius: 30px;
+ background-color: white;
+ margin-top: 20px;
+ padding-left: 20px;
+
+ animation-name: guemtle;
+ animation-duration: 2s;
+ animation-direction: alternate;
+ animation-iteration-count: infinite;
+
+}
+@-webkit-keyframes guemtle {
+ 0%{
+ transform: scale(1);
+ }
+ 50%{
+ transform: scale(1.05);
+ }
+}
+#todo h2{
+ display: -webkit-box;/*말줄임표 쓰기 위함*/
+ white-space: normal;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ width: 200px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+#todo button {
+ border-color: transparent;
+ border-radius: 20px;
+ height: 30px;
+ width: 30px;
+}
\ No newline at end of file
diff --git a/week1/todo list/todolist.html b/week1/todo list/todolist.html
new file mode 100644
index 0000000..73ce740
--- /dev/null
+++ b/week1/todo list/todolist.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+ Todo list
+
+
+
+
+
+ Doing . . .
+
+
솝트 과제 하지만 하난줄알았지 키키
+
+
+
+
학교 과제 하기
+
+
+
+
학교 강의 듣기
+
+
+
+
+
+ Done
+
+
웨비들이랑 인사하고 한강도 가고
+
+
+
+
1차 세미나 듣기
+
+
+
+
학교 수업 듣기
+
+
+
+
1차 세미나 듣기
+
+
+
+
+
+
\ No newline at end of file