diff --git a/week1/assign3(myShop)/font/musinsa-Medium.ttf b/week1/assign3(myShop)/font/musinsa-Medium.ttf new file mode 100644 index 0000000..1a19c90 Binary files /dev/null and b/week1/assign3(myShop)/font/musinsa-Medium.ttf differ diff --git a/week1/assign3(myShop)/img/addidas.jpg b/week1/assign3(myShop)/img/addidas.jpg new file mode 100644 index 0000000..1162ffc Binary files /dev/null and b/week1/assign3(myShop)/img/addidas.jpg differ diff --git a/week1/assign3(myShop)/img/aeae.jpg b/week1/assign3(myShop)/img/aeae.jpg new file mode 100644 index 0000000..e76c850 Binary files /dev/null and b/week1/assign3(myShop)/img/aeae.jpg differ diff --git a/week1/assign3(myShop)/img/disel.jpg b/week1/assign3(myShop)/img/disel.jpg new file mode 100644 index 0000000..59d025c Binary files /dev/null and b/week1/assign3(myShop)/img/disel.jpg differ diff --git a/week1/assign3(myShop)/img/kasina.jpg b/week1/assign3(myShop)/img/kasina.jpg new file mode 100644 index 0000000..925e0b8 Binary files /dev/null and b/week1/assign3(myShop)/img/kasina.jpg differ diff --git a/week1/assign3(myShop)/img/keen.jpg b/week1/assign3(myShop)/img/keen.jpg new file mode 100644 index 0000000..b1cf7a4 Binary files /dev/null and b/week1/assign3(myShop)/img/keen.jpg differ diff --git a/week1/assign3(myShop)/img/matinkim.jpg b/week1/assign3(myShop)/img/matinkim.jpg new file mode 100644 index 0000000..666c3bf Binary files /dev/null and b/week1/assign3(myShop)/img/matinkim.jpg differ diff --git a/week1/assign3(myShop)/img/nike.jpg b/week1/assign3(myShop)/img/nike.jpg new file mode 100644 index 0000000..5c921c6 Binary files /dev/null and b/week1/assign3(myShop)/img/nike.jpg differ diff --git a/week1/assign3(myShop)/img/poter.jpg b/week1/assign3(myShop)/img/poter.jpg new file mode 100644 index 0000000..27452d3 Binary files /dev/null and b/week1/assign3(myShop)/img/poter.jpg differ diff --git a/week1/assign3(myShop)/img/vivien.jpg b/week1/assign3(myShop)/img/vivien.jpg new file mode 100644 index 0000000..c2b7428 Binary files /dev/null and b/week1/assign3(myShop)/img/vivien.jpg differ diff --git a/week1/assign3(myShop)/index.html b/week1/assign3(myShop)/index.html new file mode 100644 index 0000000..32fd620 --- /dev/null +++ b/week1/assign3(myShop)/index.html @@ -0,0 +1,202 @@ + + + + + + + YEONSINSA + + + + + + + +
+

YEONSINSA

+ +
+ +
+ + +
+ +
+
+

WishList 1

+
+
    +
  • #디젤피카부
    • + +
  • #태그길게길게넘치나안넘치나테스트
    • +
+ 디젤 반팔티 + +
+ + +
+
+

WishList 2

+
+
    +
  • #가젤볼드핑크글로우
    • +
  • #사고싶은데못구하는거
    • +
+ 아디다스 신발 + +
+ + +
+
+

WishList 3

+
+
    +
  • #마뗑킴가방
    • +
  • #실내화주머니
    • +
+ 마뗑킴 가방 + +
+ + +
+
+

WishList 4

+
+
    +
  • #카시나
    • +
  • #덩크
    • +
+ 카시나 신발 + +
+ + +
+
+

WishList 5

+
+
    +
  • #aeae모자
    • +
  • #재입고해주세요
    • +
+ aeae 모자 + +
+ + +
+
+

WishList 6

+
+
    +
  • #덩크남고래
    • +
  • #범고래는질려요
    • +
+ 나이키 덩크 + +
+ + +
+
+

WishList 7

+
+
    +
  • #베아니트탑
    • +
  • #비비안웨스트우드🫶🏻
    • +
+ 비비안웨스트우드 니트탑 + +
+ + +
+
+

WishList 8

+
+
    +
  • #킨재스퍼락
    • +
  • #예쁘지만안어울릴듯
    • +
+ 킨 신발 + +
+ + +
+
+

WishList 9

+
+
    +
  • #포터탱커가방
    • +
  • #일본에서사올걸
    • +
+ 포터 가방 + +
+
+
+ + diff --git a/week1/assign3(myShop)/style.css b/week1/assign3(myShop)/style.css new file mode 100644 index 0000000..ae56111 --- /dev/null +++ b/week1/assign3(myShop)/style.css @@ -0,0 +1,220 @@ +@font-face { + font-family: "musinsa-Medium"; + src: url("./font/musinsa-Medium.ttf"); + font-weight: normal; + font-style: normal; +} + +* { + box-sizing: border-box; + font-family: "musinsa-Medium"; +} + +h1, +h2, +h3 { + font-weight: 700; +} + +/* header */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + width: 100%; + height: 5rem; + padding: 0 1.5rem; + background-color: black; +} + +.header__title, +.header__button > i { + font-size: 1.5rem; + color: white; + height: fit-content; +} + +.header__button { + border: none; + background-color: black; +} + +.header__menu { + display: none; + position: absolute; + top: 0; + right: 0; + height: 100vh; + width: 13rem; + background-color: #dddddd; + color: black; + z-index: 10; +} + +.header__button:hover + .header__menu, +.header__menu:hover { + display: block; +} + +.header__list { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 2rem 1rem; +} + +.header__sublist-title, +.header__sublist { + margin-bottom: 1.5rem; + font-size: 2rem; + font-weight: 700; + text-decoration: none; + color: black; +} + +.header__sublist { + text-decoration: underline 0.1rem; + text-underline-position: under; +} + +.header__sublist:hover { + text-decoration: underline dotted 0.1rem; + text-underline-position: under; + color: grey; +} + +main { + display: flex; + padding: 6rem 1.5rem 0 1.5rem; +} + +/* nav */ +.nav { + height: fit-content; + background-color: black; + color: white; + border-radius: 0.7rem; +} + +.nav_content { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1rem; +} + +.nav__title { + padding: 1rem; + margin-top: 0.4rem; + font-size: 1.2rem; +} + +.nav__category { + display: flex; + align-items: flex-end; + width: 12rem; + padding: 0.7rem; + margin: 0.7rem; + background-color: white; + color: black; + border-radius: 1rem; +} + +.nav__category:hover { + background-color: #dddddd; + color: grey; + cursor: pointer; +} + +/* card section */ +.cards { + display: grid; + grid-template-columns: repeat(6, 1fr); + width: 100%; + padding: 0 1.5rem; +} + +/* 반응형 구현 */ +@media screen and (max-width: 1500px) { + .cards { + grid-template-columns: repeat(5, 1fr); + } +} + +@media screen and (max-width: 1280px) { + .cards { + grid-template-columns: repeat(4, 1fr); + } +} + +@media screen and (max-width: 1024px) { + .cards { + grid-template-columns: repeat(3, 1fr); + } +} + +@media screen and (max-width: 780px) { + .cards { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (max-width: 670px) { + .cards { + grid-template-columns: repeat(1, 1fr); + place-items: center; + } +} + +.cards__card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 18rem; + padding: 1rem; + border: 0.01rem solid #dddddd; +} + +.cards__card > * { + margin-bottom: 0.7rem; +} + +.cards__tagwrapper { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + overflow: hidden; + word-break: keep-all; + width: 9rem; + height: 0.7rem; + margin: 0.5rem 0; +} + +.cards__tag { + display: inline-block; + font-size: 0.7rem; + margin: 0 0.2rem; + width: fit-content; + text-align: center; +} + +.cards__img { + width: 10rem; + height: 9rem; +} + +.cards__button { + padding-right: 0.5rem; + border: none; + align-self: flex-end; + background-color: white; + color: red; +} + +.cards__button:hover { + color: #dddddd; + cursor: pointer; +} diff --git a/week1/assign4(toDoMate)/index.html b/week1/assign4(toDoMate)/index.html new file mode 100644 index 0000000..e69de29 diff --git a/week1/assign4(toDoMate)/style.css b/week1/assign4(toDoMate)/style.css new file mode 100644 index 0000000..e69de29