diff --git a/README.md b/README.md new file mode 100644 index 000000000..5f318bd2f --- /dev/null +++ b/README.md @@ -0,0 +1,48 @@ +# 코드잇 스프린트 6기 프로젝트 + +## 목차 + +- [코드잇 스프린트 6기 프로젝트](#코드잇-스프린트-6기-프로젝트) + - [목차](#목차) + - [개요](#개요) + - [페이지 스크린샷](#페이지-스크린샷) + - [링크](#링크) + - [내작업](#내작업) + - [사용한것](#사용한것) + - [배운점](#배운점) + - [작성자](#작성자) + - [참고](#참고) + +## 개요 + +### 페이지 스크린샷 + +![메인 이미지](images/thumbnail.jpg) + +### 링크 + +- 사용한 폰트 + - [Pretendard](https://github.com/orioncactus/pretendard) + +## 내작업 + +### 사용한것 + +- Semantic HTML5 markup +- css 변수 +- css : flexbox +- css : grid + +### 배운점 + +- z-index 사용 시 쌓임 맥락을 주의해야 할 것 같다. +- Netlify 배포 시 한글이 깨지는 현상이 있었는데, 주의해야 할 것 같다. + +## 작성자 + +**최수형(SOOHYEONG CHOI)** + +- [github](https://github.com/User850413) +- [velog](https://velog.io/@user850413) + +## 참고 diff --git a/css/index.css b/css/index.css new file mode 100644 index 000000000..7b8ee5bc5 --- /dev/null +++ b/css/index.css @@ -0,0 +1,373 @@ +:root { + --main: #3692ff; + --main-darker: #1967d6; + --white: #fff; + --logo: "ROKAF Sans"; + --gray200: #e5e7eb; + --gray400: #9ca3af; + --gray700: #374151; + --gray900: #111827; +} +body { +} +/* 헤더 */ +header { + height: 70px; + padding: 10px 200px; + display: flex; + justify-content: space-between; + align-items: center; +} +.logo { + font-family: var(--logo); + display: flex; + gap: 9px; + align-items: center; +} +.logo img { + width: 40px; + height: 40px; +} +header .logo { + color: var(--main); + font-size: 2.6rem; + font-weight: 600; +} +header .login { + background-color: var(--main); + color: var(--white); + border-radius: 8px; + font-size: 1.6rem; + width: 128px; + height: 48px; + text-align: center; + line-height: 48px; +} +header .login:hover { + background-color: var(--main-darker); +} + +/* 메인 */ +main { + display: flex; + flex-direction: column; + align-items: center; +} + +.visual { + width: 100%; + height: 540px; + background-color: #cfe5ff; + position: relative; +} +.visual__content { + height: 100%; + width: 1200px; + margin: 0 auto; + justify-content: center; + display: flex; + flex-direction: column; + align-items: start; + gap: 32px; + position: relative; + z-index: 2; +} +.visual__bg { + position: absolute; + bottom: 0; + left: 701px; + background-repeat: no-repeat; + background-size: cover; +} +.visual h1 { + line-height: 1.4; + color: var(--gray700); +} +.goShopping { + width: 355px; + height: 56px; + border-radius: 40px; + background-color: var(--main); + text-align: center; + line-height: 56px; + color: var(--white); + font-size: 2rem; +} +.goShopping:hover { + background-color: var(--main-darker); +} +main .item { + margin: 0 auto; + width: 1200px; + display: flex; + gap: 24px; + height: 720px; + align-items: center; + color: var(--gray700); +} +.item:nth-child(2n-1) { + flex-direction: row-reverse; +} +.item__image { + height: 444px; + flex: 1; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border-radius: 12px; + overflow: hidden; +} +.image01 { + background-image: url("../images/item_01.svg"); +} +.image02 { + background-image: url("../images/item_02.svg"); +} +.image03 { + background-image: url("../images/item_03.svg"); +} +.item__text { + flex: 1; + display: flex; + flex-direction: column; + padding: 40px; +} +.item:nth-child(2n-1) .item__text { + align-items: end; + text-align: right; +} +.item__maintitle { + order: 2; + line-height: 1.4; + margin: 12px 0 24px; + font-size: 4rem; +} +.item__subtitle { + order: 0; + color: var(--main); + font-size: 1.8rem; +} + +.item__desc { + order: 3; + font-size: 2.4rem; + line-height: 1.2; +} + +/* 푸터 */ +footer { + background-color: var(--gray900); + padding: 32px 200px; + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-content: space-between; + align-items: center; +} +.footer__copyright { + color: var(--gray400); + font-size: 1.6rem; +} +.footer__FAQ { + font-size: 1.6rem; + color: var(--gray200); + display: flex; + gap: 30px; + align-items: center; + margin: 0 auto; +} +.socials { + display: flex; + gap: 12px; + align-items: center; + margin: 0 0 0 auto; +} +.socials a { + width: 20px; + height: 20px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} +.socials .facebook { + background-image: url("../images/ico_facebook.svg"); +} +.socials .twitter { + background-image: url("../images/ico_twitter.svg"); +} +.socials .youtube { + background-image: url("../images/ico_youtube.svg"); +} +.socials .insta { + background-image: url("../images/ico_insta.svg"); +} + +/* 데스크톱(992~1200) */ +@media (max-width: 1200px) { + body { + /* background-color: rgb(255, 133, 133); */ + } + header { + padding: 10px 100px; + } + .visual__content { + width: 971px; + } + .visual__bg { + left: 201px; + } + main .item { + width: 971px; + } + footer { + padding: 32px 100px; + } +} + +/* 타블렛(768~992) */ +@media (max-width: 992px) { + html { + font-size: 8px; + } + body { + /* background-color: rgb(255, 253, 133); */ + } + header { + padding: 10px 50px; + } + .visual__content { + width: 750px; + } + .visual__bg { + left: 201px; + } + main .item { + width: 750px; + } + .item__image { + flex: 1.4; + } + footer { + padding: 32px 50px; + } +} + +/* 작은 타블렛(600~768) */ +@media (max-width: 768px) { + body { + /* background-color: rgb(137, 255, 133); */ + } + header { + padding: 10px 50px; + } + + header .logo img { + display: none; + } + .visual:first-child { + margin-bottom: 30px; + } + .visual__content { + width: 550px; + } + .visual__bg { + left: 50px; + } + main .item { + width: 550px; + margin: 0 auto; + flex-direction: column; + text-align: center; + } + + .item:nth-child(2n-1) { + flex-direction: column; + } + .item__image { + height: 200px; + width: 100%; + } + .item__text { + padding: 0; + } + .item__maintitle br { + display: inline-block; + content: " "; + } + .item__desc br { + display: inline-block; + content: " "; + } + .item:nth-child(2n-1) .item__text { + align-items: center; + text-align: center; + } + .bottom { + width: 100%; + left: 0; + } + footer { + grid-template-columns: 1fr 1fr; + row-gap: 20px; + } + .footer__copyright { + grid-column: 1; + grid-row: 2; + } + .footer__FAQ { + grid-column: 1; + grid-row: 1; + margin: 0; + } + .socials { + grid-column: 2; + grid-row: 1; + } +} + +/* 모바일(~600) */ +@media (max-width: 600px) { + body { + /* background-color: rgb(133, 220, 255); */ + min-width: 600px; + } + header { + padding: 10px 50px; + } + header .login { + font-size: 2rem; + } + .visual__content { + height: calc(100% - 30px); + width: 500px; + justify-content: end; + gap: 16px; + } + .visual__bg { + left: -100px; + } + .goShopping { + width: 200px; + height: 100px; + border-radius: 20px; + line-height: 100px; + font-size: 3rem; + font-weight: 600; + } + .item { + width: 500px; + } + .visual:last-child { + padding: 30px; + } + .visual:last-child .visual__content { + justify-content: start; + } + .visual:last-child h1 { + text-align: center; + margin: 0 auto; + font-size: 5rem; + } + .bottom { + left: 0; + } +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 000000000..ceda99de9 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,136 @@ +@charset "utf-8"; +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); +@import url("https://cdn.jsdelivr.net/npm/fonts-archive-rokafsans/ROKAFSans.css"); + +/* Reset */ +html, +body, +h1, +h2, +h3, +h4, +h5, +h6, +div, +p, +blockquote, +pre, +code, +address, +ul, +ol, +li, +nav, +section, +article, +header, +footer, +main, +aside, +dl, +dt, +dd, +table, +thead, +tbody, +tfoot, +label, +caption, +th, +td, +form, +fieldset, +legend, +hr, +input, +button, +textarea, +object, +figure, +figcaption { + margin: 0; + padding: 0; +} +body, +input, +select, +textarea, +button, +img, +fieldset { + border: none; +} +ul, +ol, +li { + list-style: none; +} +table { + width: 100%; + border-spacing: 0; + border-collapse: collapse; +} +address, +cite, +code, +em, +i { + font-style: normal; + font-weight: normal; +} +label, +img, +input, +select, +textarea, +button, +a { + vertical-align: middle; +} +u, +ins, +a { + text-decoration: none; +} +button { + cursor: pointer; +} + +/* Normalize */ +body { + font-family: "Pretendard"; +} +select { + appearance: none; +} +select::-ms-expand { + display: none; +} +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration, +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; +} +input[type="number"] { + -moz-appearance: textfield; +} +input[type="number"], +input[type="text"], +input[type="password"], +input[type="url"], +input[type="email"], +input[type="tel"], +input[type="date"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-border-radius: 0; + outline: 0; +} +textarea { + resize: none; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..9bef70553 --- /dev/null +++ b/css/style.css @@ -0,0 +1,63 @@ +/* Style */ +html { + font-size: 10px; +} +body { + overflow-x: hidden; + font-size: 1rem; +} +body.hidden { + position: fixed; + overflow-y: hidden; + touch-action: none; +} +main { + font-size: 1.4rem; + line-height: 2.1rem; + color: #666; + display: block; +} +a, +button { + color: #666; +} +p, +li { + word-break: keep-all; +} + +.clear { + clear: both; +} +.clear:after { + content: ""; + display: block; + clear: both; +} +caption > div, +legend, +.hide { + overflow: hidden; + display: block; + position: absolute; + border: 0; + width: 1px; + height: 1px; + clip: rect(1px, 1px, 1px, 1px); +} + +.skip { + position: absolute; + left: 0; + right: 0; + top: -100%; + transition: all 0.5s; + line-height: 5rem; + background: #000; + color: #fff; + text-align: center; + z-index: 100; +} +.skip:focus { + top: 0; +} diff --git a/images/ico_facebook.svg b/images/ico_facebook.svg new file mode 100644 index 000000000..8491c2f83 --- /dev/null +++ b/images/ico_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ico_insta.svg b/images/ico_insta.svg new file mode 100644 index 000000000..c83306f84 --- /dev/null +++ b/images/ico_insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ico_twitter.svg b/images/ico_twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/images/ico_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ico_youtube.svg b/images/ico_youtube.svg new file mode 100644 index 000000000..4e7014be4 --- /dev/null +++ b/images/ico_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/item_01.svg b/images/item_01.svg new file mode 100644 index 000000000..ad82b24be --- /dev/null +++ b/images/item_01.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/item_02.svg b/images/item_02.svg new file mode 100644 index 000000000..0b4c99f56 --- /dev/null +++ b/images/item_02.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/item_03.svg b/images/item_03.svg new file mode 100644 index 000000000..807d008e8 --- /dev/null +++ b/images/item_03.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 000000000..2637dd6ef --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/images/panda_bottom.svg b/images/panda_bottom.svg new file mode 100644 index 000000000..c86291832 --- /dev/null +++ b/images/panda_bottom.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/panda_top.svg b/images/panda_top.svg new file mode 100644 index 000000000..bb96df908 --- /dev/null +++ b/images/panda_top.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/thumbnail.jpg b/images/thumbnail.jpg new file mode 100644 index 000000000..2a9fa3b83 Binary files /dev/null and b/images/thumbnail.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..ff211a00e --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ + + + + + + 판다마켓 + + + + + +
+
+ + +
+
+
+ +
+

+ 일상의 모든 물건을
+ 거래해 보세요 +

+ 구경하러 가기 +
+
+
+
+
+

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

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

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

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

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

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

+ 믿을 수 있는
+ 판다마켓 중고거래 +

+
+ +
+
+ +
+ + diff --git a/pages/faq.html b/pages/faq.html new file mode 100644 index 000000000..24ad574e6 --- /dev/null +++ b/pages/faq.html @@ -0,0 +1,9 @@ + + + + + + Document + + + diff --git a/pages/items.html b/pages/items.html new file mode 100644 index 000000000..24ad574e6 --- /dev/null +++ b/pages/items.html @@ -0,0 +1,9 @@ + + + + + + Document + + + diff --git a/pages/privacy.html b/pages/privacy.html new file mode 100644 index 000000000..24ad574e6 --- /dev/null +++ b/pages/privacy.html @@ -0,0 +1,9 @@ + + + + + + Document + + + diff --git a/pages/signin.html b/pages/signin.html new file mode 100644 index 000000000..24ad574e6 --- /dev/null +++ b/pages/signin.html @@ -0,0 +1,9 @@ + + + + + + Document + + +