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 + + + +
+

♡

+

보운이의 찜리스트

+ +
+ + + +
+ +
+

전체

+
+ + acc +

🤍

+

강아지 폰케이스

+

5,900

+ + + acc +

🤍

+

쪼꼬미 미니 리본핀

+

6,900

+ + + acc +

🤍

+

행운의 네잎 클로버 지비츠

+

12,900

+ + + skirt +

🤍

+

레거시 플리츠 스커트

+

26,040

+ + + skirt +

🤍

+

리본 다트 밴딩 미니스커트

+

13,850

+ + + skirt +

🤍

+

스위티 프릴 스커트

+

16,740

+ + + T-shirt +

🤍

+

프릴 슈 블라우스

+

22,620

+ + + T-shirt +

🤍

+

인디 잔꽃 원피스 세트

+

37,900

+ + + T-shirt +

🤍

+

레이어드 뷔스티에 미니원피스

+

16,020

+ + + T-shirt +

🤍

+

프린지 후크 트위드자켓

+

38,610

+ + + T-shirt +

🤍

+

리본 오프숄더

+

37,640

+ +
+
+
+

상의

+
+ + T-shirt +

🤍

+

프릴 슈 블라우스

+

22,620

+ + + T-shirt +

🤍

+

인디 잔꽃 원피스 세트

+

37,900

+ + + T-shirt +

🤍

+

레이어드 뷔스티에 미니원피스

+

16,020

+ + + T-shirt +

🤍

+

프린지 후크 트위드자켓

+

38,610

+ + + T-shirt +

🤍

+

리본 오프숄더

+

37,640

+ +
+
+
+

하의

+
+ + skirt +

🤍

+

레거시 플리츠 스커트

+

26,040

+ + + skirt +

🤍

+

리본 다트 밴딩 미니스커트

+

13,850

+ + + skirt +

🤍

+

스위티 프릴 스커트

+

16,740

+ +
+
+
+

악세서리

+
+ + acc +

🤍

+

강아지 폰케이스

+

5,900

+ + + acc +

🤍

+

쪼꼬미 미니 리본핀

+

6,900

+ + + acc +

🤍

+

행운의 네잎 클로버 지비츠

+

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 + + +
+

BW To Do

+
+ + +
+
+
+
+

Doing . . .

+
+

솝트 과제 하지만 하난줄알았지 키키

+ +
+
+

학교 과제 하기

+ +
+
+

학교 강의 듣기

+ +
+
+ +
+

Done

+
+

웨비들이랑 인사하고 한강도 가고

+ +
+
+

1차 세미나 듣기

+ +
+
+

학교 수업 듣기

+ +
+
+

1차 세미나 듣기

+ +
+
+
+ + \ No newline at end of file