diff --git a/.DS_Store b/.DS_Store index 7a7ebc5a..0173cb79 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 5d8a3fdb..cc4fa88a 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,23 +1,30 @@ ## 요구사항 + - Github에 PR(Pull Request)을 만들어서 미션을 제출합니다. -- Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다. - 피그마 디자인에 맞게 페이지를 만들어 주세요. - React와 같은 UI 라이브러리를 사용하지 않고 진행합니다. -### 기본 +## 공통 + +- [x] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다. + +## 랜딩페이지 + +- [x] Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다. +- [x] Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다. +- [x] 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다. -- [x] 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다. -- [x] "판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.(새로고침) -- [x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다. -- [x] SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다. -- [x] "회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다. -- [x] "로그인"버튼 클릭 시 "/login" 페이지로 이동합니다. +## 로그인,회원가입 페이지 공통 +- [x] Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다. +- [x] Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다. +- [x] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다. ### 심화 -- [x] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요. -- [x] 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요. +- [x] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요. +- [x] 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다. +- [x] 주소와 이미지는 자유롭게 설정하세요. ## 주요 변경사항 diff --git a/css/auth.css b/css/auth.css new file mode 100644 index 00000000..3a2d9846 --- /dev/null +++ b/css/auth.css @@ -0,0 +1,109 @@ +.auth-page { + max-width: 640px; + margin: 50px auto; +} + +.auth-logo { + display: flex; + justify-content: center; +} + +.auth-form { + display: flex; + flex-direction: column; + padding-top: 40px; + width: 100%; + color: var(--gray900); +} + +.auth-footer { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--lightblue); + height: 74px; + border-radius: 8px; + padding: 16px 23px; + color: var(--gray900); + font-weight: 500; + margin: 24px 0; +} + +.auth-switch { + text-align: center; +} + +.logo-img { + display: flex; + gap: 16px; +} + +input { + background-color: var(--gray100); + border: none; + border-radius: 12px; + height: 56px; + margin: 16px 0 24px; + padding-left: 16px; + font-size: 18px; + width: 100%; +} + +label { + font-size: 18px; + font-weight: 600; +} + +#auth-form_btn { + background-color: var(--gray400); + color: var(--gray100); + border: none; + border-radius: 40px; + padding: 16px 124px 16px; + font-size: 20px; + font-weight: 600; +} + +#auth-form_btn:hover { + background-color: var(--blue); +} + +.toggle-password { + position: absolute; + right: 24px; + cursor: pointer; +} + +.password-wrapper, +.password-check-wrapper { + position: relative; + display: flex; + align-items: center; +} + +input:focus { + outline-color: var(--blue); +} + +/*Mobile*/ +@media screen and (min-width: 375px) and (max-width: 767px) { + .auth-page { + padding: 0 16px; + max-width: 400px; + } + .auth-logo > img { + max-width: 50%; + } + label, + input { + font-size: 14px; + } +} + +/*tablet*/ +@media screen and (min-width: 768px) and (max-width: 1199px) { + .auth-logo { + margin-top: 60px; + margin-bottom: 40px; + } +} diff --git a/css/global.css b/css/global.css new file mode 100644 index 00000000..e4108178 --- /dev/null +++ b/css/global.css @@ -0,0 +1,96 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); + +body { + font-family: "Pretendard Variable", Pretendard, -apple-system, + BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", + "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + margin: 0 auto; + margin-top: 70px; +} + +* { + box-sizing: border-box; +} + +:root { + --blue: #3692ff; + --gray900: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray50: #f9fafb; + --white: #ffffff; + --navy: #111827; + --background-banner: #cfe5ff; + --lightblue: #e6f2ff; +} + +h1 { + font-size: 40px; + font-weight: 600; + line-height: 140%; + letter-spacing: 2%; + color: var(--gray700); +} + +p { + font-size: 24px; + line-height: 32px; + margin-top: 24px; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + right: 0; + background: var(--white); + margin: 0 auto; + padding: 9.5px 200px; +} + +section > img { + max-width: 100%; +} + +/*Tablet*/ +@media (max-width: 1199px) { + nav { + padding: 9.5px 24px; + } + h1 { + font-size: 32px; + text-align: left; + } + h2 { + font-size: 18px; + } + p { + font-size: 18px; + line-height: 26px; + } +} + +/*Mobile*/ +@media (max-width: 767px) { + nav { + padding: 9.5px 16px; + } + h1 { + font-size: 24px; + } + h2 { + font-size: 16px; + } + p { + font-size: 16px; + line-height: 26px; + } +} diff --git a/css/home.css b/css/home.css new file mode 100644 index 00000000..758ae880 --- /dev/null +++ b/css/home.css @@ -0,0 +1,227 @@ +.logo { + cursor: pointer; +} + +.signin { + padding: 12px 23px; + text-align: center; + text-decoration: none; + background-color: var(--blue); + border-radius: 8px; + cursor: pointer; + font-size: 16px; + line-height: 26px; + font-weight: 500; + color: var(--white); +} + +.banner-container { + background-color: #cfe5ff; + width: 100%; +} + +.banner-image { + display: flex; + justify-content: center; + align-items: flex-end; + flex-wrap: wrap; + padding-top: 100px; +} + +.banner-image > img { + max-width: 100%; +} + +.banner-text { + display: flex; + flex-direction: column; + padding: 100px 5px; + justify-content: center; +} + +.banner-btn { + text-align: center; + text-decoration: none; + background-color: var(--blue); + border-radius: 40px; + padding: 12px 124px; + margin-top: 32px; + font-weight: 500; + line-height: 32px; + font-size: 20px; + color: #f9fafb; + cursor: pointer; +} + +.section { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin: 138px auto; + gap: 30px; + border-radius: 12px; + max-width: 1200px; + width: 100%; +} + +.description { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.description > h2 { + font-size: 20px; + font-weight: 600; + margin-bottom: 12px; + color: var(--blue); +} + +.section.search .description { + text-align: right; + align-items: flex-end; +} +.section.search { + flex-direction: row-reverse; +} +.footer-banner { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + background-color: #cfe5ff; + padding-top: 100px; +} + +.footer-banner > img { + max-width: 100%; +} + +.footer-text { + margin: 100px 50px; +} + +.footer-info { + background-color: var(--navy); + height: 160px; +} + +.info-container { + display: flex; + justify-content: space-around; + place-items: center; + color: var(--gray400); + padding: 32px 0; +} + +.footer-menu { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0 30px; +} + +.privacy, +.faq { + text-decoration: none; + cursor: pointer; + color: var(--gray200); +} + +.social-media { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +/*Mobile*/ +@media screen and (min-width: 375px) and (max-width: 767px) { + .banner-btn { + padding: 11px 71px; + font-size: 18px; + } + .banner-text { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-wrap: wrap; + padding: 48px 68px; + } + .banner-text > h1 { + text-align: center; + } + br.only_pc_m { + display: inline-block; + } + .section { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin: 40px auto; + padding: 0 16px; + gap: 30px; + border-radius: 12px; + width: 100%; + } + + .description { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 0 15px; + } + br.only_pc { + display: none; + } + .info-container { + flex-wrap: wrap; + padding: 32px 32px; + justify-content: space-between; + align-items: center; + gap: 10px; + row-gap: 30px; + } +} + +/*Tablet*/ +@media screen and (min-width: 768px) and (max-width: 1199px) { + .banner-btn { + padding: 12px 124px; + } + .banner-text { + align-items: center; + flex-wrap: wrap; + padding-top: 100px; + } + .banner-image > img { + width: 100%; + } + br.only_pc_m { + display: none; + } + .section { + margin: 52px auto; + padding: 0 24px; + } + .section > img { + width: 100%; + } + .description { + width: 100%; + } + .footer-banner > img { + width: 100%; + } + .footer-text { + text-align: center; + } + br.only_pc { + display: none; + } +} diff --git a/css/login.css b/css/login.css deleted file mode 100644 index 783441c6..00000000 --- a/css/login.css +++ /dev/null @@ -1,91 +0,0 @@ -@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); - -@import 'style.css'; - -body { - font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; - margin: 0 auto; -} - -* { - box-sizing: border-box; -} - - -.login-page { - width: 640px; - margin: 50px auto; -} - -.login-logo { - display: flex; - justify-content: center; -} - -.login-form { - display: flex; - flex-direction: column; - padding-top: 40px; - color: var(--color-gray900); -} - -.login-footer { - display: flex; - justify-content: space-between; - align-items: center; - background-color: var(--color-lightblue); - height: 74px; - border-radius: 8px; - padding: 16px 23px; - color: var(--color-gray900); - font-weight: var(--font-weight-md); - margin: 24px 0; -} - -.login-signup { - text-align: center; -} - -.logo-img { - display: flex; - gap: 16px; -} - -#username, -#password { - background-color: var(--color-gray100); - border: none; - border-radius: 12px; - height: 56px; - width: 640px; - margin: 16px 0 24px; - padding-left: 16px; - font-size: var(--font-size-xs); - font-weight: var(--font-weight-rg); -} - -label { - font-size: var(--spacing-sm); - font-weight: var(--font-weight-bd); -} - -#login-form_btn { - background-color: var(--color-blue); - color: var(--color-gray100); - border: none; - border-radius: 40px; - padding: 16px 124px 16px; - font-size: var(--font-size-md); - font-weight: var(--font-weight-bd); -} - -.password-wrapper { - position: relative; -} - -#show-eye, -#hide-eye { - position: absolute; - right: 20px; - bottom: 35px; -} diff --git a/css/reset.css b/css/reset.css index af944401..45a05ecf 100644 --- a/css/reset.css +++ b/css/reset.css @@ -3,46 +3,127 @@ License: none (public domain) */ -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; +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; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/signup.css b/css/signup.css deleted file mode 100644 index 79bea0d4..00000000 --- a/css/signup.css +++ /dev/null @@ -1,96 +0,0 @@ -@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); - -@import 'style.css'; - -body { - font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; - margin: 0 auto; -} - -* { - box-sizing: border-box; -} - - -.signup-page { - width: 640px; - margin: 50px auto; -} - -.signup-logo { - display: flex; - justify-content: center; -} - -.signup-form { - display: flex; - flex-direction: column; - padding-top: 40px; - color: var(--color-gray900); -} - -.signup-footer { - display: flex; - justify-content: space-between; - align-items: center; - background-color: var(--color-lightblue); - height: 74px; - border-radius: 8px; - padding: 16px 23px; - color: var(--color-gray900); - font-weight: var(--font-weight-md); - margin: 24px 0; -} - -.signup-login { - text-align: center; -} - -.logo-img { - display: flex; - gap: 16px; -} - -#username, -#nickname, -#password, -#password-check { - background-color: var(--color-gray100); - border: none; - width: 640px; - border-radius: 12px; - height: 56px; - margin: 16px 0 24px; - padding-left: 16px; - font-size: var(--font-size-xs); - font-weight: var(--font-weight-rg); -} - -label { - font-size: var(--spacing-sm); - font-weight: var(--font-weight-bd); -} - -#signup-form_btn { - background-color: var(--color-blue); - color: var(--color-gray100); - border: none; - border-radius: 40px; - padding: 16px 124px 16px; - font-size: var(--font-size-md); - font-weight: var(--font-weight-bd); -} - -.password-wrapper, -.password-check-wrapper { - position: relative; -} - -#show-eye, -#hide-eye, -#show-check-eye, -#hide-check-eye { - position: absolute; - right: 20px; - bottom: 35px; -} \ No newline at end of file diff --git a/css/style.css b/css/style.css deleted file mode 100644 index d4b76656..00000000 --- a/css/style.css +++ /dev/null @@ -1,221 +0,0 @@ -@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); - -body { - font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; - margin: 0 auto; - margin-top: 70px; -} - -* { - box-sizing: border-box; -} - -:root { - --color-blue: #3692FF; - --color-gray900: #1f2937; - --color-gray700: #374151; - --color-gray600: #4b5563; - --color-gray500: #6b7280; - --color-gray400: #9CA3AF; - --color-gray200: #E5E7EB; - --color-gray100: #f3f4f6; - --color-gray50: #f9fafb; - --color-white: #FFFFFF; - --color-background-dark: #111827; - --color-background-banner: #CFE5FF; - --color-lightblue: #e6f2ff; - - --font-family-base: 'Pretendard-Regular', sans-serif; - --font-family-heading: 'Noto Sans KR', sans-serif; - - --font-size-xs: 16px; - --font-size-sm: 18px; - --font-size-md: 20px; - --font-size-lg: 24px; - --font-size-xl: 40px; - - --font-weight-rg: 400; - --font-weight-md: 500; - --font-weight-bd: 600; - - --container-width: 1120px; - --header-height: 70px; - --footer-height: 160px; - - --spacing-xs: 12px; - --spacing-sm: 24px; - --spacing-md: 32px; - --spacing-lg: 60px; - --spacing-xl: 138px; -} - - h1 { - font-size: var(--font-size-xl); - font-weight: var(--font-weight-bd); - line-height: 140%; - letter-spacing: 2%; - color: var(--color-gray700); -} - -p { - font-size: 24px; - line-height: var( --spacing-md); - margin-top: var(--spacing-sm); -} - -nav { - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; - left: 0; - right: 0; - background-color: var(--color-white); - padding: 9.5px 200px; - margin: 0 auto; -} - -.logo { - cursor: pointer; -} - -.login { - padding: 12px 23px; - text-align: center; - text-decoration: none; - background-color: var(--color-blue); - border-radius: 8px; - cursor: pointer; - font-size: var(--font-size-xs); - line-height: 26px; - font-weight: var(--font-weight-md); - color: var( --color-white); -} - -.banner-container { - background-color: var( --color-background-banner); - width: 100%; -} - -.banner-image { - display: flex; - justify-content: center; - align-items: flex-end; - flex-wrap: wrap; - padding-top: 100px; -} - -.banner-image > img { - max-width:100%; -} - -.banner-text { - display: flex; - flex-direction: column; - margin: 100px 5px; - align-items: flex-start; - justify-content: center; -} - -.banner-btn { - text-align: center; - text-decoration: none; - background-color: var(--color-blue); - border-radius: 40px; - padding: 12px 124px; - margin-top: var(--spacing-md); - font-weight: var(--font-weight-md); - line-height: 32px; - font-size: 20px; - color: #F9FAFB; - cursor: pointer; -} - -section > img { - max-width:100%; -} - -.section { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - margin: 0 auto; - gap: 30px; - padding: 138px 0; - border-radius: 12px; - max-width: 1200px; - width: 100%; -} - -.description { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - padding: 0 40px; -} - -.description > h2 { - font-size: var(--font-size-md); - font-weight: var(--font-weight-bd); - margin-bottom: var(--spacing-sm); - color:var( --color-blue); -} - -.section.search .description { - text-align: right; - align-items: flex-end; -} - -.footer-banner { - display: flex; - justify-content: center; - align-items: flex-end; - flex-wrap: wrap; - background-color: var( --color-background-banner); - padding-top: 100px; -} - -.footer-banner > img { - max-width:100%; -} - -.footer-text { - margin: 100px 50px; -} - -.footer-info { - background-color: var(--color-background-dark); - height: var(--footer-height); -} - -.info-container { - display: flex; - justify-content: space-around; - place-items: center; - color:var(--color-gray400); - padding: 32px 0; -} - -.footer-menu { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0 30px; -} - -.privacy, -.faq { - text-decoration: none; - cursor: pointer; - color: var(--color-gray200); -} - -.social-media { - display: flex; - justify-content: center; - align-items: center; - gap: 10px; -} \ No newline at end of file diff --git a/features/login.html b/features/login.html deleted file mode 100644 index 0463a077..00000000 --- a/features/login.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - 판다마켓 - - - - - - -
- -
- - - -
- -
- -
-
- -
-
- -
-
-
간편 로그인하기
-
- - 구글 로그인 이동 - - - 카카오톡 로그인 이동 - -
-
-
- 판다마켓이 처음이신가요? - 회원가입 -
- -
- - - - \ No newline at end of file diff --git a/features/signin.html b/features/signin.html new file mode 100644 index 00000000..38f8ae64 --- /dev/null +++ b/features/signin.html @@ -0,0 +1,91 @@ + + + + + + + + 판다마켓 + + + + + + + +
+ +
+ + + +
+ + 비밀번호 숨김 +
+ +
+
+
간편 로그인하기
+
+ + 구글 로그인 이동 + + + 카카오톡 로그인 이동 + +
+
+
+ 판다마켓이 처음이신가요? + 회원가입 +
+
+ + diff --git a/features/signup.html b/features/signup.html index a909573b..273e704f 100644 --- a/features/signup.html +++ b/features/signup.html @@ -1,66 +1,111 @@ - - - - - 판다마켓 - - - + + + + + 판다마켓 + + + + + - - -
- -
- - - - - -
- -
- -
-
- -
+ +
+ - -
- -
- + + + + + + +
+ + 비밀번호 숨김
-
- + +
+ + 비밀번호 숨김 +
+ + +
+
간편 로그인하기
+
+ + 구글 로그인 이동 + + + 카카오톡 로그인 이동 +
- - - - - - \ No newline at end of file + + diff --git a/image/property 1=lg.svg b/image/property1-lg.svg similarity index 100% rename from image/property 1=lg.svg rename to image/property1-lg.svg diff --git a/image/property 1=md.svg b/image/property1-md.svg similarity index 100% rename from image/property 1=md.svg rename to image/property1-md.svg diff --git a/index.html b/index.html index aaf079fc..09d3be15 100644 --- a/index.html +++ b/index.html @@ -1,90 +1,101 @@ - - - - - 판다마켓 - - - - - -
- -
-
-
- 인기 상품 섹션 이미지 -
-

Hot item

-

- 인기 상품을
- 확인해 보세요 -

-

- 가장 HOT한 중고거래 물품을
- 판다 마켓에서 확인해 보세요 -

-
-
-
-
-

Search

-

- 구매를 원하는
- 상품을 검색하세요 -

-

- 구매하고 싶은 물품은 검색해서
- 쉽게 찾아보세요 -

-
- 상품 검색 이미지 -
-
- 상품 등록 이미지 -
-

Register

-

- 판매를 원하는
- 상품을 등록하세요 +

+
+ 상품 검색 이미지 +
+

Search

+

+ 구매를 원하는
+ 상품을 검색하세요 +

+

+ 구매하고 싶은 물품은 검색해서
+ 쉽게 찾아보세요 +

+
+
+
+ 상품 등록 이미지 +
+

Register

+

+ 판매를 원하는
+ 상품을 등록하세요 +

+

+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요 +

+
+
+
+
+ + + diff --git a/loginscript.js b/loginscript.js deleted file mode 100644 index 1280c2d6..00000000 --- a/loginscript.js +++ /dev/null @@ -1,15 +0,0 @@ -const passwordInput = document.getElementById('password') -const showEye = document.getElementById('show-eye') -const hideEye = document.getElementById('hide-eye') - -showEye.addEventListener('click', function () { - passwordInput.setAttribute('type', 'password'); - showEye.style.display = 'none'; - hideEye.style.display = 'inline'; -}); - -hideEye.addEventListener('click', function () { - passwordInput.setAttribute('type', 'text'); - showEye.style.display = 'inline'; - hideEye.style.display = 'none'; -}); diff --git a/signupscript.js b/signupscript.js deleted file mode 100644 index 5c558f9f..00000000 --- a/signupscript.js +++ /dev/null @@ -1,31 +0,0 @@ -const passwordInput = document.getElementById('password') -const showEye = document.getElementById('show-eye') -const hideEye = document.getElementById('hide-eye') - -showEye.addEventListener('click', function () { - passwordInput.setAttribute('type', 'password'); - showEye.style.display = 'none'; - hideEye.style.display = 'inline'; -}); - -hideEye.addEventListener('click', function () { - passwordInput.setAttribute('type', 'text'); - showEye.style.display = 'inline'; - hideEye.style.display = 'none'; -}); - -const passwordCheckInput = document.getElementById('password-check') -const showCheckEye = document.getElementById('show-check-eye') -const hideCheckEye = document.getElementById('hide-check-eye') - -showCheckEye.addEventListener('click', function () { - passwordCheckInput.setAttribute('type', 'password'); - showCheckEye.style.display = 'none'; - hideCheckEye.style.display = 'inline'; -}); - -hideCheckEye.addEventListener('click', function () { - passwordCheckInput.setAttribute('type', 'text'); - showCheckEye.style.display = 'inline'; - hideCheckEye.style.display = 'none'; -}); \ No newline at end of file