[ 1주차 기본/심화/생각 과제 종합 ]

Week1-0401/MyStore.css

@@ -0,0 +1,259 @@
+@font-face {
+    font-family: 'NeoDunggeunmoPro-Regular';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NeoDunggeunmoPro-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* body CSS */
+body {
+    font-family: 'NeoDunggeunmoPro-Regular';
+    background-color: rgb(252, 233, 233);
+
+}
+
+/* HeaderBar 관련 CSS */
+header {
+    display: flex;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f8f8f8;
+    padding: 20px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+.logo {
+    font-size: 28px;
+    color: #333;
+}
+
+#hamberger {
+    display: none;
+    cursor: pointer;
+    color: #333;
+    font-size: 24px;
+    font-weight: bold;
+    user-select: none;
+}
+
+header menu {
+    display: flex;
+    flex-direction: row;
+
+}
+
+header menu a {
+    margin: 0 10px;
+}
+
+header menu a:hover {
+    color: plum;
+}
+
+@media (max-width: 1000px) {
+    header {
+        padding: 20px;
+    }
+
+    header>menu {
+        display: none;
+    }
+
+    header>menu a {
+        margin: 1rem;
+    }
+
+    #hamberger {
+        display: block;
+    }
+
+    #hamberger:hover+menu,
+    menu:hover {
+        display: flex;
+        flex-direction: column;
+        position: fixed;
+        height: 100vh;
+        width: 250px;
+        top: 0;
+        right: 0;
+        background-color: #f8f8f8;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+        padding: 1rem;
+    }
+}
+
+/* Main파트 CSS */
+
+/* 메인파트1 : nav */
+main {
+    display: flex;
+    flex-direction: row;
+
+    margin: 10px;
+    margin-top: 5rem;
+    padding: 10px;
+}
+
+main nav {
+    display: flex;
+    padding: 10px;
+    position: sticky;
+    top: 5rem;
+    flex-direction: column;
+    min-width: 150px;
+    height: fit-content;
+    background-color: #f1f1f1;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}
+
+main nav .category {
+    margin: 5px;
+    padding: 10px;
+    border-radius: 10%;
+}
+
+main nav .category:hover {
+    background-color: palevioletred;
+    color: white;
+}
+
+/* 메인파트2 : cardSection */
+#cardSection {
+
+    width: 100%;
+    height: 1000px;
+    padding: 5px 100px;
+
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: repeat(5, 1fr);
+    grid-auto-rows: 300px;
+}
+
+@media screen and (max-width: 1400px) {
+    #cardSection {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+@media screen and (max-width: 1200px) {
+    #cardSection {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media screen and (max-width:1000px) {
+    #cardSection {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width: 800px) {
+    #cardSection {
+        grid-template-columns: repeat(1, 1fr);
+    }
+}
+
+/* 메인파트3 : cardSection > Card CSS */
+
+#cardSection .card {
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    border-radius: 5px;
+    transform-style: preserve-3d;
+    background-color: white;
+
+}
+
+#cardSection .card::before {
+    position: absolute;
+    content: ' ';
+    display: block;
+    width: 160px;
+    height: 500px;
+    background: linear-gradient(90deg, transparent, purple, transparent);
+    animation: rotation_border 5000ms infinite linear;
+    z-index: -1;
+}
+
+#cardSection .card .card-content {
+    width: 98%;
+    height: 98%;
+    border: 1px solid purple;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 5px;
+    background-color: white;
+}
+
+
+@keyframes rotation_border {
+    0% {
+        transform: rotateZ(0deg);
+    }
+
+    0% {
+        transform: rotateZ(360deg);
+    }
+}
+
+.tagContainer {
+    width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+}
+
+.tagContainer .tag::before {
+    content: "#";
+}
+
+.pokemonName {
+    font-size: 25px;
+}
+
+.JJim {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.favorite {
+    padding: 5px;
+    width: fit-content;
+    height: fit-content;
+}
+
+.heart {
+    display: none;
+}
+
+#cardSection label::before {
+    content: '🤍';
+    display: block;
+}
+
+#cardSection .heart:hover+label::before {
+    content: '❤️';
+    cursor: pointer;
+}
+
+#cardSection .heart:checked+label::before {
+    content: '❤️';
+}