diff --git a/week1/assign3/index.html b/week1/assign3/index.html new file mode 100644 index 0000000..d3f7c0b --- /dev/null +++ b/week1/assign3/index.html @@ -0,0 +1,173 @@ + + + + + + + 은서네 마라마라탕 + + + + +
+

은서네 마라마라탕 🥬🍄🍡

+ +
+

메뉴

+

새 상품 추가

+

찜 목록

+
+
+
+ +
+ +
+
+ + diff --git a/week1/assign3/style.css b/week1/assign3/style.css new file mode 100644 index 0000000..f78e741 --- /dev/null +++ b/week1/assign3/style.css @@ -0,0 +1,357 @@ +/* basic setting */ +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; +} + +button { + background: inherit; + border: none; + box-shadow: none; + border-radius: 0; + padding: 0; + overflow: visible; + cursor: pointer; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; + background-color: black; + color: white; +} +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; +} + +:root { + --main-color: rgb(141, 19, 19); /* CSS 전역 변수 선언 */ +} + +/* font setting */ +@font-face { + font-family: "Pretendard-Regular"; + src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") + format("woff"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "EBSHunminjeongeumSBA"; + src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/EBSHunminjeongeum.woff") + format("woff"); + font-weight: normal; + font-style: normal; +} + +body { + font-family: "Pretendard-Regular", sans-serif; +} + +h1 { + font-family: EBSHunminjeongeumSBA; + font-size: 2rem; +} +h2 { + font-family: EBSHunminjeongeumSBA; + font-size: 1.8rem; +} +h3 { + font-size: 1.3rem; +} +small { + font-size: 0.8rem; +} + +/* header */ +header { + padding: 2rem; + width: -webkit-fill-available; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + background-color: var(--main-color); + color: white; +} + +#header__menu { + display: none; +} + +#header__button { + width: 2rem; + height: 2rem; +} + +#header__button i { + color: white; + font-size: 1.2rem; +} + +#header__button:hover + #header__menu, +#header__menu:hover { + display: block; +} + +#header__menu { + background-color: white; + color: black; + height: 100vh; + position: absolute; + right: 0; + top: 0; + padding: 2rem; + width: 10rem; +} + +#header__menu > h1 { + padding-bottom: 2rem; + font-weight: bold; +} + +#header__menu > h3 { + padding-bottom: 1.5rem; + cursor: pointer; +} + +#header__menu > h3:hover { + text-decoration-line: underline; + text-decoration-style: wavy; + text-decoration-color: var(--main-color); + text-underline-offset: 0.3rem; +} + +/* nav */ +main { + padding: 2rem; + padding-top: 8rem; + display: grid; + grid-gap: 2rem; + grid-template-columns: 1fr 6fr; +} + +nav { + background-color: var(--main-color); + color: white; + padding: 2rem; + width: 10rem; + height: fit-content; + border-radius: 1rem; +} + +nav h2 { + margin-bottom: 2rem; +} + +nav li { + display: flex; + background-color: white; + color: var(--main-color); + padding: 1rem; + margin-bottom: 1rem; + border-radius: 1rem; +} + +nav li:hover { + background-color: black; + color: white; +} + +nav h3 { + padding-left: 0.5rem; +} +nav li:last-child { + margin-bottom: 0; +} + +/* cards */ +img { + width: 100%; + height: 8rem; + object-fit: cover; +} + +#cards ul { + display: grid; + grid-template-columns: repeat(5, 13rem); +} + +@media screen and (max-width: 1330px) { + #cards ul { + grid-template-columns: repeat(4, 13rem); + } +} + +@media screen and (max-width: 1120px) { + #cards ul { + grid-template-columns: repeat(3, 13rem); + } +} + +@media screen and (max-width: 900px) { + #cards ul { + grid-template-columns: repeat(2, 13rem); + } +} + +@media screen and (max-width: 690px) { + #cards ul { + grid-template-columns: repeat(1, 13rem); + } + #cards { + justify-self: center; + } +} + +.cards__card { + display: flex; + flex-direction: column; + align-items: center; + background-color: white; + border-radius: 1rem; + color: black; + padding: 2rem 1rem; + margin: 0.5rem; +} + +.cards__card > * { + margin-bottom: 1rem; +} + +.cards__card i { + margin-bottom: 0; + align-self: flex-end; + padding-right: 0.5rem; + cursor: pointer; +} + +.cards__card i:hover { + color: var(--main-color); +} + +.cards__card__tags { + width: 9rem; + height: 1rem; + overflow: hidden; + word-break: keep-all; + text-align: center; +} + +.cards__card__tags > small::before { + content: "#"; +}