-
-
-
-
+
+
+
Hot item
+
+ 인기 상품을
+ 확인해 보세요
+
+
+ 가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
+
+
+
+
+
Search
+
+ 구매를 원하는
상품을 검색하세요
+
+
+ 구매하고 싶은 물품은 검색해서
+ 쉽게 찾아보세요
+
+
+
+
+
Register
+
+ 판매를 원하는
상품을 등록하세요
+
+
+ 어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
+
+
+
+
+
+
믿을 수 있는
판다마켓 중고 거래
+
+
+
-
-
\ No newline at end of file
+
+
+
+
+
diff --git a/panda_market.css b/panda_market.css
index 888ead03..7cd32418 100644
--- a/panda_market.css
+++ b/panda_market.css
@@ -1,309 +1,348 @@
+:root {
+ --gray900: #111827;
+ --gray800: #1f2937;
+ --gray700: #374151;
+ --gray600: #4b5563;
+ --gray500: #6b7280;
+ --gray400: #9ca3af;
+ --gray300: #d1d5db;
+ --gray200: #e5e7eb;
+ --gray100: #f3f4f6;
+ --gray50: #f9fafb;
+ --blue: #3692ff;
+}
+
* {
- box-sizing: border-box;
- font-family: "Pretendard Variable";
+ box-sizing: border-box;
+ font-family: 'Pretendard Variable';
}
a {
- cursor: pointer;
- text-decoration: none;
+ cursor: pointer;
+ text-decoration: none;
}
button {
- cursor: pointer;
+ cursor: pointer;
}
body {
- display: block;
- width: 100%;
- margin: 0;
+ display: block;
+ width: 100%;
+ margin: 0;
}
header {
- padding: 0 200px;
+ padding: 0 200px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: white;
+ width: 100%;
}
.header__container {
- margin: 9px 200px 10px;
- display: flex;
- justify-content: space-between;
+ margin: 9px 200px 10px;
+ display: flex;
+ justify-content: space-between;
}
.header__container img {
- width: 153px;
- height: 51px;
+ width: 153px;
+ height: 51px;
}
.header__container button {
- width: 128px;
- height: 48px;
- color: white;
- background-color: #3692FF;
- border-radius: 8px;
- border: solid 1px;
- font-size: 16px;
- font-weight: 600;
+ width: 128px;
+ height: 48px;
+ color: white;
+ background-color: var(--blue);
+ border-radius: 8px;
+ border: solid 1px;
+ font-size: 16px;
+ font-weight: 600;
}
-
.main__image__container {
- display: flex;
- justify-content: center;
- background-color: #CFE5FF;
- color: #374151;
- margin: 0 auto;
- padding: 200px 405px 0;
- height: 540px;
+ display: flex;
+ justify-content: center;
+ background-color: #cfe5ff;
+ color: var(--gray700);
+ width: 100%;
+ margin: 0 auto;
+ padding: 200px 405px 0;
+ height: 540px;
}
-
.main__image__container p {
- margin-bottom: 32px;
- margin-top: 40px;
- font-weight: 700;
- font-size: 40px;
- line-height: 140%;
+ margin-bottom: 32px;
+ margin-top: 40px;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 140%;
}
.main__image__container button {
- margin-bottom: 60px;
- border-radius: 40px;
- border: solid 1px;
- color: #F9FAFB;
- background-color: #3692FF;
- width: 357px;
- height: 56px;
- font-size: 20px;
- font-weight: 600;
+ margin-bottom: 60px;
+ border-radius: 40px;
+ border: solid 1px;
+ color: var(--gray50);
+ background-color: var(--blue);
+ width: 357px;
+ height: 56px;
+ font-size: 20px;
+ font-weight: 600;
}
.main__image__container img {
- width: 740px;
- height: 340px;
+ width: 740px;
+ height: 340px;
}
.min__title {
- font-weight: bold;
- font-size:18px;
- color: #3692FF;
- margin: 0px;
+ font-weight: bold;
+ font-size: 18px;
+ color: var(--blue);
+ margin: 0px;
}
.explanation__content {
- font-weight: bold;
- font-size: 40px;
- line-height: 1.4;
- color: #374151;
+ font-weight: bold;
+ font-size: 40px;
+ line-height: 1.4;
+ color: var(--gray700);
}
.explanation__content__margin {
- margin-top: 12px;
- margin-bottom: 24px;
- margin-right: 52px;
+ margin-top: 12px;
+ margin-bottom: 24px;
+ margin-right: 52px;
}
.explanation__detail {
- font-size: 24px;
- font-weight: 500;
- color: #374151;
- margin:0px;
-}
-
+ font-size: 24px;
+ font-weight: 500;
+ color: var(--gray700);
+ margin: 0px;
+}
.hot__item {
- background-image: url("/img/Img_home_01.png");
+ background-image: url('/img/Img_home_01.png');
}
.search {
- background-image: url("/img/Img_home_02.png");
+ background-image: url('/img/Img_home_02.png');
}
.register {
- background-image: url("/img/Img_home_03.png");
+ background-image: url('/img/Img_home_03.png');
}
.card__content__container {
- background-repeat: no-repeat;
- width: 988px;
- height: 444px;
- background-color: #FCFCFC;
- margin: 138px 466px;
+ background-repeat: no-repeat;
+ width: 988px;
+ height: 444px;
+ background-color: #fcfcfc;
+ margin: 138px 466px;
}
.flex__container {
- display:flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
}
.card__content__container__reverse {
- background-repeat: no-repeat;
- background-position: right;
- width: 988px;
- height: 444px;
- background-color: #FCFCFC;
- margin: 138px 0;
- text-align: end;
+ background-repeat: no-repeat;
+ background-position: right;
+ width: 988px;
+ height: 444px;
+ background-color: #fcfcfc;
+ margin: 138px 0;
+ text-align: end;
}
.explanation__content__margin__reverse {
- margin-top: 12px;
- margin-bottom: 24px;
+ margin-top: 12px;
+ margin-bottom: 24px;
}
.hot__item__padding {
- padding: 103px 23.5px 103px 666.5px;
+ padding: 103px 23.5px 103px 666.5px;
}
-.search__padding {
- padding: 103px 657px 103px 14px;
+.search__padding {
+ padding: 103px 657px 103px 14px;
}
.register__padding {
- padding: 103px 7px 103px 636px;
+ padding: 103px 7px 103px 636px;
}
.sizing__container {
- width: 320px;
- height: 172px;
+ width: 320px;
+ height: 172px;
}
footer {
- background-color: #111827;
- height: 160px;
- display: flex;
- justify-content: center;
- font-size: 16px;
+ background-color: var(--gray900);
+ height: 160px;
+ display: flex;
+ justify-content: center;
+ font-size: 16px;
}
-.fa-brands {
- color: white;
- width: 20px;
- height: 20px;
+.footer__text {
+ color: var(--gray400);
+ padding-right: 366.5px;
+ margin-top: 32px;
}
+.footer__text--a {
+ color: var(--gray200);
+ padding-right: 15px;
+ margin-top: 32px;
+}
-@media (max-width: 1440px) {
- header {
- padding: 0 100px;
- }
+.footer__sns {
+ color: #ffffff;
+ padding-left: 366.5px;
+ margin-top: 32px;
+}
- .header__container {
- margin: 9px 100px 10px;
- }
+.footer__marginRight {
+ margin-right: 12px;
+}
- .main__image__container {
- padding: 150px 50px 0;
- height: auto;
- }
+.fa-brands {
+ color: white;
+ width: 20px;
+ height: 20px;
+}
+
+@media (max-width: 1440px) {
+ header {
+ padding: 0 100px;
+ }
- .main__image__container img {
- width: 100%;
- max-width: 740px;
- height: auto;
- }
+ .header__container {
+ margin: 9px 100px 10px;
+ }
- .main__image__container p {
- font-size: 32px;
- }
+ .main__image__container {
+ padding: 150px 50px 0;
+ height: auto;
+ }
- .main__image__container button {
- width: 300px;
- font-size: 18px;
- }
+ .main__image__container img {
+ width: 100%;
+ max-width: 740px;
+ height: auto;
+ }
+
+ .main__image__container p {
+ font-size: 32px;
+ }
+
+ .main__image__container button {
+ width: 300px;
+ font-size: 18px;
+ }
}
@media (max-width: 1024px) {
- .card__content__container,
- .card__content__container__reverse {
- width: 90%;
- height: auto;
- margin: 50px auto;
- }
-
- .hot__item__padding,
- .search__padding,
- .register__padding {
- padding: 50px 20px;
- }
-
- .explanation__content {
- font-size: 32px;
- }
-
- .explanation__detail {
- font-size: 20px;
- }
-
- .main__image__container {
- flex-direction: column;
- align-items: center;
- text-align: center;
- }
-
- .main__image__container img {
- max-width: 100%;
- }
+ .card__content__container,
+ .card__content__container__reverse {
+ width: 90%;
+ height: auto;
+ margin: 50px auto;
+ }
+
+ .hot__item__padding,
+ .search__padding,
+ .register__padding {
+ padding: 50px 20px;
+ }
+
+ .explanation__content {
+ font-size: 32px;
+ }
+
+ .explanation__detail {
+ font-size: 20px;
+ }
+
+ .main__image__container {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+
+ .main__image__container img {
+ max-width: 100%;
+ }
}
@media (max-width: 768px) {
- header {
- padding: 0 20px;
- }
-
- .header__container {
- flex-direction: column;
- align-items: center;
- margin: 0;
- }
-
- .header__container img,
- .header__container button {
- margin: 10px 0;
- }
-
- .main__image__container {
- padding: 50px 20px 0;
- height: auto;
- }
-
- .main__image__container button {
- width: 90%;
- font-size: 16px;
- }
-
- .card__content__container,
- .card__content__container__reverse {
- flex-direction: column;
- align-items: center;
- width: 100%;
- padding: 20px;
- height: auto;
- }
-
- footer {
- flex-direction: column;
- align-items: center;
- padding: 20px;
- font-size: 14px;
- text-align: center;
- }
+ header {
+ padding: 0 20px;
+ }
+
+ .header__container {
+ flex-direction: column;
+ align-items: center;
+ margin: 0;
+ }
+
+ .header__container img,
+ .header__container button {
+ margin: 10px 0;
+ }
+
+ .main__image__container {
+ padding: 50px 20px 0;
+ height: auto;
+ }
+
+ .main__image__container button {
+ width: 90%;
+ font-size: 16px;
+ }
+
+ .card__content__container,
+ .card__content__container__reverse {
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ padding: 20px;
+ height: auto;
+ }
+
+ footer {
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ font-size: 14px;
+ text-align: center;
+ }
}
@media (max-width: 480px) {
- .main__image__container p {
- font-size: 24px;
- }
-
- .main__image__container button {
- width: 100%;
- }
-
- .explanation__content {
- font-size: 24px;
- }
-
- .explanation__detail {
- font-size: 16px;
- }
-}
\ No newline at end of file
+ .main__image__container p {
+ font-size: 24px;
+ }
+
+ .main__image__container button {
+ width: 100%;
+ }
+
+ .explanation__content {
+ font-size: 24px;
+ }
+
+ .explanation__detail {
+ font-size: 16px;
+ }
+}
diff --git a/panda_market_login.css b/panda_market_login.css
new file mode 100644
index 00000000..e417e32c
--- /dev/null
+++ b/panda_market_login.css
@@ -0,0 +1,138 @@
+:root {
+ --gray900: #111827;
+ --gray800: #1f2937;
+ --gray700: #374151;
+ --gray600: #4b5563;
+ --gray500: #6b7280;
+ --gray400: #9ca3af;
+ --gray300: #d1d5db;
+ --gray200: #e5e7eb;
+ --gray100: #f3f4f6;
+ --gray50: #f9fafb;
+ --blue: #3692ff;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: 'Pretendard Variable';
+}
+
+.login__container {
+ margin: 231px 640px;
+ width: 650px;
+ height: 618px;
+}
+
+.signup__container {
+ width: 640px;
+ height: 857px;
+ margin: 60px 640px 407px;
+}
+/*질문 사항. 정적으로 수치를 넣으니까 화면 창에 따라 크기가 줄여지는 게 안됨. 그럼 대부분의 UI를
+ %를 사용해서 수치를 계산해야 하는가? 이런 화면의 경우 어떤 식으로 해야 하는지??
+
+ 안에 요소(input, button) 길이는 정적으로 두고 밖에 컨테이너에서만 크기 조절 로직을 바꿔서
+ 창 크기를 줄였을 때 자연스럽게 줄어들게 할 수 없나?
+ 부트스트랩에서 반응형 DIV 안에 요소만 넣으면 알아서 길이 조절이 되는 것처럼..
+
+ CASE 1 : 밖에도 %, 안에 요소도 %
+ CASE 2 : 밖에는 %, 안에 요소는 정적으로 px
+ CASE 3 : 밖에도 px, 안에도 px
+ */
+
+/*logo*/
+.logo__container {
+ margin: 0 122px 40px 122px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.logo__container img {
+ width: 103.53px;
+ height: 103.88px;
+ cursor: pointer;
+}
+
+.logo__text {
+ font-size: 66.34px;
+ font-weight: 700;
+ font-family: ROKAF Sans;
+ color: var(--blue);
+ margin: 23.98px 4.23px 18.02px 22.24px;
+}
+
+/*input*/
+
+.login__input__text {
+ font-weight: 700;
+ font-size: 18px;
+ color: var(--gray800);
+}
+
+.login__input {
+ background-color: var(--gray100);
+ width: 640px;
+ height: 56px;
+ border-radius: 12px;
+ border: none;
+ margin-top: 16px;
+ margin-bottom: 24px;
+ font-size: 16px;
+ font-weight: 400;
+ color: var(--gray800);
+ padding-left: 24px;
+}
+
+.login__input:focus {
+ outline: none;
+}
+
+/*button*/
+.login__button {
+ background-color: var(--blue);
+ width: 640px;
+ height: 56px;
+ border-radius: 40px;
+ border: none;
+ font-size: 20px;
+ font-weight: 600;
+ color: var(--gray100);
+}
+
+/*sns*/
+.snsAuth__container {
+ margin: 24px 0;
+ width: 640px;
+ height: 74px;
+ background-color: #e6f2ff;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 23px;
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--gray800);
+}
+
+.snsAuth__icon {
+ margin-right: 16px;
+ width: 42px;
+ height: 42px;
+}
+
+/*signup*/
+.explain__signup__text {
+ display: flex;
+ justify-content: center;
+ font-weight: 500;
+ font-size: 14px;
+ color: var(--gray800);
+}
+
+.linked__page {
+ color: var(--blue);
+ margin-left: 4px;
+ text-decoration: underline;
+ cursor: pointer;
+}
+ 
+ 
- 
+
+