diff --git a/css/common.css b/css/common.css
index 8ba9a26..3a5b3b8 100644
--- a/css/common.css
+++ b/css/common.css
@@ -1,3 +1,6 @@
+@import "header.css";
+@import "footer.css";
+
body {
background-color: var(--background-color);
}
@@ -59,201 +62,6 @@ html {
transform: scale(1.05);
}
-.search-input-box {
- background-color: var(--main-color5);
- color: var(--main-color0);
- border-radius: 4px;
- font-size: 16px;
- top: 0;
- right: 0;
- width: 360px;
- height: 40px;
- padding: 0 40px;
- border: none;
- outline: none;
-}
-
-.search-input-icon {
- position: absolute;
- margin-left: 11px;
-}
-
-#searchDeleteBtn {
- position: absolute;
- top: 8px;
- right: 10px;
- transition: transform 0.2s ease-out;
- transform: scale(0);
-}
-
-.search-input-box:focus + #searchDeleteBtn,
-.search-input-box:active + #searchDeleteBtn,
-#searchDeleteBtn:focus,
-#searchDeleteBtn:active {
- transform: scale(1);
-}
-
-.header-nav {
- border-bottom: 1px solid var(--main-color5);
-}
-
-.header-nav-menu {
- display: flex;
- justify-content: flex-end;
- font-size: 12px;
- color: var(--main-color2);
- position: relative;
- height: 34px;
- align-items: center;
-}
-
-.header-nav-menu ul li {
- position: relative;
-}
-
-.header-nav-menu ul li::after {
- position: absolute;
- top: 2px;
- right: 0px;
- content: "";
- height: 8px;
- background-color: var(--main-color5);
- width: 1px;
-}
-
-.header-nav-menu ul li:last-child::after {
- display: none;
-}
-
-.header-section {
- color: var(--main-color0);
- display: flex;
- height: 74px;
- justify-content: space-between;
- align-items: center;
- position: relative;
-}
-
-.header-menu {
- flex-grow: 2;
-}
-
-#searchContainer {
- position: relative;
- display: flex;
- align-items: center;
- flex-shrink: 0;
-}
-
-.header-nav-menu ul {
- display: flex;
-}
-
-.header-menu > ul {
- display: flex;
- gap: 20px;
-}
-
-.header-nav ul li a {
- color: var(--main-color2);
- text-decoration: none;
- font-weight: 400;
- transition: color 0.3s ease;
- font-size: 12px;
- padding: 0 11px;
-}
-
-header nav > ul > li:first-child {
- margin-left: 0;
-}
-
-.header-menu > ul > li > a {
- text-decoration: none;
- transition: color 0.3s ease;
- font-size: 20px;
- padding: 0 10px;
- font-weight: 500;
-}
-
-header nav > ul > li:hover > a {
- color: var(--main-color0);
-}
-
-.header-menu > ul > li a.on {
- color: var(--main-color0);
-}
-
-header {
- background: var(--background-color);
- position: sticky;
- z-index: 100;
- top: 0;
- border-bottom: 1px solid var(--main-color7);
-}
-
-.header-wrap {
- max-width: 1240px;
- margin: 0 auto;
-}
-
-header .logo {
- flex-shrink: 0;
- margin-right: 78px;
- width: 108px;
- height: 24px;
- mask: url(../img/common/ci-wavve.svg) no-repeat center /cover;
- display: block;
- background: var(--main-color0);
-}
-
-#searchResultSection {
- margin-top: 80px;
-}
-
-/* ------------------------------ */
-
-#themeBtn {
- width: 30px;
- height: 25px;
- mask: url(../img/common/light-theme.svg) no-repeat center /16px auto;
- background: var(--main-color0);
-}
-
-.light-mode #themeBtn {
- mask-image: url(../img/common/dark-theme.svg);
-}
-
-.header-menu > ul > li {
- position: relative;
- height: 74px;
- display: flex;
- align-items: center;
-}
-
-.header-menu ul li .category {
- position: absolute;
- top: 100%;
- left: 10px;
- z-index: 5;
- width: 100px;
- color: #a5a5a5;
- display: none;
- min-width: 160px;
- padding: 20px;
- background: #101010;
-}
-
-.header-menu ul li:hover .category {
- display: block;
-}
-
-.header-menu .category a {
- font-size: 14px;
- line-height: 34px;
- color: #a5a5a5;
- display: block;
-}
-
-.header-menu .category a:hover {
- color: var(--fixed-color0);
+main {
+ min-height: 400px;
}
\ No newline at end of file
diff --git a/css/page/footer.css b/css/footer.css
similarity index 99%
rename from css/page/footer.css
rename to css/footer.css
index defc63e..96f7cf2 100644
--- a/css/page/footer.css
+++ b/css/footer.css
@@ -14,7 +14,7 @@
position: relative;
height: 50px;
line-height: 50px;
- z-index: 100;
+ z-index: 10;
}
.footer-notice-inner h2 {
margin-right: 23px;
diff --git a/css/header.css b/css/header.css
new file mode 100644
index 0000000..c22e776
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,192 @@
+.search-input-box {
+ background-color: var(--main-color5);
+ color: var(--main-color0);
+ border-radius: 4px;
+ font-size: 16px;
+ top: 0;
+ right: 0;
+ width: 360px;
+ height: 40px;
+ padding: 0 40px;
+ border: none;
+ outline: none;
+}
+
+.search-input-icon {
+ position: absolute;
+ margin-left: 11px;
+}
+
+#searchDeleteBtn {
+ position: absolute;
+ top: 8px;
+ right: 10px;
+ transition: transform 0.2s ease-out;
+ transform: scale(0);
+}
+
+.search-input-box:focus + #searchDeleteBtn,
+.search-input-box:active + #searchDeleteBtn,
+#searchDeleteBtn:focus,
+#searchDeleteBtn:active {
+ transform: scale(1);
+}
+
+.header-nav {
+ border-bottom: 1px solid var(--main-color5);
+}
+
+.header-nav-menu {
+ display: flex;
+ justify-content: flex-end;
+ font-size: 12px;
+ color: var(--main-color2);
+ position: relative;
+ height: 34px;
+ align-items: center;
+}
+
+.header-nav-menu ul li {
+ position: relative;
+}
+
+.header-nav-menu ul li::after {
+ position: absolute;
+ top: 2px;
+ right: 0px;
+ content: "";
+ height: 8px;
+ background-color: var(--main-color5);
+ width: 1px;
+}
+
+.header-nav-menu ul li:last-child::after {
+ display: none;
+}
+
+.header-section {
+ color: var(--main-color0);
+ display: flex;
+ height: 74px;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.header-menu {
+ flex-grow: 2;
+}
+
+.header-nav-menu ul {
+ display: flex;
+}
+
+.header-menu > ul {
+ display: flex;
+ gap: 20px;
+}
+
+.header-nav ul li a {
+ color: var(--main-color2);
+ text-decoration: none;
+ font-weight: 400;
+ transition: color 0.3s ease;
+ font-size: 12px;
+ padding: 0 11px;
+}
+
+header nav > ul > li:first-child {
+ margin-left: 0;
+}
+
+.header-menu > ul > li > a {
+ text-decoration: none;
+ transition: color 0.3s ease;
+ font-size: 20px;
+ padding: 0 10px;
+ font-weight: 500;
+}
+
+header nav > ul > li:hover > a {
+ color: var(--main-color0);
+}
+
+.header-menu > ul > li a.on {
+ color: var(--main-color0);
+}
+
+header {
+ background: var(--background-color);
+ position: sticky;
+ z-index: 100;
+ top: 0;
+ border-bottom: 1px solid var(--main-color7);
+}
+
+.header-wrap {
+ max-width: 1240px;
+ margin: 0 auto;
+}
+
+header .logo {
+ flex-shrink: 0;
+ margin-right: 78px;
+ width: 108px;
+ height: 24px;
+ mask: url(../img/common/ci-wavve.svg) no-repeat center /cover;
+ display: block;
+ background: var(--main-color0);
+}
+
+#themeBtn {
+ width: 30px;
+ height: 25px;
+ mask: url(../img/common/light-theme.svg) no-repeat center /16px auto;
+ background: var(--main-color0);
+}
+
+.light-mode #themeBtn {
+ mask-image: url(../img/common/dark-theme.svg);
+}
+
+.header-menu > ul > li {
+ position: relative;
+ height: 74px;
+ display: flex;
+ align-items: center;
+}
+
+.header-menu ul li .category {
+ position: absolute;
+ top: 100%;
+ left: 10px;
+ z-index: 5;
+ width: 100px;
+ color: #a5a5a5;
+ display: none;
+ min-width: 160px;
+ padding: 20px;
+ background: #101010;
+}
+
+.header-menu ul li:hover .category {
+ display: block;
+}
+
+.header-menu .category a {
+ font-size: 14px;
+ line-height: 34px;
+ color: #a5a5a5;
+ display: block;
+}
+
+.header-menu .category a:hover {
+ color: var(--fixed-color0);
+}
+
+#searchContainer {
+ position: relative;
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+}
diff --git a/css/page/review.css b/css/page/review.css
index 784a2a4..980232b 100644
--- a/css/page/review.css
+++ b/css/page/review.css
@@ -131,7 +131,7 @@
#reviewList .empty-review {
color: var(--fixed-color4);
- padding: 0 0 80px;
+ padding: 0 0 120px;
font-size: 15px;
line-height: 1.6;
text-align: center;
diff --git a/css/page/search-result.css b/css/page/search-result.css
index 8549dfe..d4a470f 100644
--- a/css/page/search-result.css
+++ b/css/page/search-result.css
@@ -45,4 +45,8 @@
.no-result-box img {
width: 74px;
+}
+
+#searchResultSection {
+ margin-top: 80px;
}
\ No newline at end of file
diff --git a/css/page/subpage.css b/css/page/subpage.css
index 3d10800..b64ff23 100644
--- a/css/page/subpage.css
+++ b/css/page/subpage.css
@@ -37,4 +37,5 @@
padding-bottom: 40px;
margin: 0 auto;
gap: 40px 10px;
+ min-height: 400px;
}
diff --git a/css/popup.css b/css/popup.css
new file mode 100644
index 0000000..2d32d5c
--- /dev/null
+++ b/css/popup.css
@@ -0,0 +1,106 @@
+.popup-back {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ z-index: 110;
+ display: none;
+}
+
+.main-screen {
+ width: 508px;
+ height: 633px;
+ margin: -316px 0 0 -254px;
+ color: #fff;
+ position: absolute;
+ z-index: 1;
+ left: 50%;
+ top: 50%;
+ border-radius: 8px;
+}
+.main-outer {
+ width: 508px;
+ position: relative;
+}
+.popup-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 1;
+}
+
+.main-content {
+ display: block;
+ position: relative;
+ width: 420px;
+ height: 600px;
+ overflow: hidden;
+ margin: 0 auto 0 auto;
+}
+.main-content img {
+ width: 420px;
+ height: 600px;
+ border-radius: 16px;
+}
+
+.popup-checkbox {
+ position: relative;
+ width: 420px;
+ margin: 0 auto 0;
+}
+.popup-checkbox label {
+ color: #a5a5a5;
+ font-size: 16px;
+ margin-top: 20px;
+}
+
+.popup-checkbox input[type="checkbox"] {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
+.popup-checkbox input[type="checkbox"] + label {
+ display: inline-block;
+ position: relative;
+ padding-left: 32px;
+ cursor: pointer;
+}
+
+.popup-checkbox input[type="checkbox"] + label:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: -4px;
+ width: 23px;
+ height: 23px;
+ text-align: center;
+ box-sizing: border-box;
+ border: 1px solid #a5a5a5;
+}
+
+.popup-checkbox input[type="checkbox"]:checked + label:after {
+ content: "";
+ position: absolute;
+ top: -4px;
+ left: 0;
+ width: 23px;
+ height: 23px;
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAO9JREFUSA1jFA78+Z+BRoCJRuaCjR01HGvoDv5gYWTE6nAGil3ekcLMcGYaK1bTKTK8J52ZIcWLmWHlgX/UNRxkcII7M0Pfmr8MXSv/Us9wZIPblmE3GGQb1mBZUMbCMLOQmYGFGdNBxBqM0/B95/8xBNsyM8wtZkGxgBSDcRq+aPc/hvLZfxi8LZjgFpBqMMhwRnylYrInE0NnKgvDw5f/GeTFGcGRhy+MQQYiAxZkDjp77vZ/DDycfxhqopkZFu36y0CKwSCz8LocZpm4AAPDyw8wHvE01tSCrp0cg0FmEGU4umXE8kcNxxpSNA0WAAXETbeav2oDAAAAAElFTkSuQmCC)
+ no-repeat;
+ background-position: center center;
+}
+
+.popup-checkbox input[type="checkbox"] + label span {
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 26px;
+ letter-spacing: -1px;
+ color: rgba(0, 0, 0, 0.5);
+}
diff --git a/img/common/popup-close.svg b/img/common/popup-close.svg
new file mode 100644
index 0000000..9d55e06
--- /dev/null
+++ b/img/common/popup-close.svg
@@ -0,0 +1,11 @@
+
diff --git a/img/common/popup.jpg b/img/common/popup.jpg
new file mode 100644
index 0000000..778b4e3
Binary files /dev/null and b/img/common/popup.jpg differ
diff --git a/index.html b/index.html
index feefd65..9dc4fe3 100644
--- a/index.html
+++ b/index.html
@@ -12,19 +12,30 @@
-
-
+
+
-
+
+
+
+