Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[김희진] sprint3 #46

Merged
merged 19 commits into from
Aug 26, 2024
Merged

[김희진] sprint3 #46

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
0cfe633
refactor: further adjustments after code review
devmanta Aug 19, 2024
aded29c
refactor: remove index image width
devmanta Aug 20, 2024
25f8897
refactor: merge index content description
devmanta Aug 20, 2024
1675121
fix: restore btn-items
devmanta Aug 20, 2024
c279174
feat: add index hero tablet size css
devmanta Aug 20, 2024
88d1109
refactor: merge index title
devmanta Aug 20, 2024
11f628f
refactor: remove margin and add gap
devmanta Aug 20, 2024
86dec28
feat: add index main content tablet size css
devmanta Aug 20, 2024
b6c7831
feat: add index bottom content tablet css
devmanta Aug 20, 2024
af0ab41
feat: modify footer justify content
devmanta Aug 20, 2024
418ea33
feat: add index hero mobile css
devmanta Aug 20, 2024
41d9ff3
feat: add botton and footer mobile css
devmanta Aug 20, 2024
5723727
feat: add max-container on mobile size
devmanta Aug 20, 2024
3720433
feat: add og tag
devmanta Aug 20, 2024
fe0dc50
fix: remove body 100vh on mobile size
devmanta Aug 20, 2024
0cd84b4
refactor: add reset css and create login, signup directory
devmanta Aug 22, 2024
3418966
chore: test git action
devmanta Aug 24, 2024
8236985
chore: test git action
devmanta Aug 24, 2024
ed0f613
chore: git action
devmanta Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 5 additions & 37 deletions css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,51 +16,19 @@
--size-max-width: 1200px;
}

@font-face {
font-family: 'ROKAF Sans'; /* 폰트 이름 정의 */
src: url('../fonts/ROKAF_Sans_Bold.ttf') format('truetype');
}
Comment on lines +19 to +22
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
로고에만 사용되는 폰트라면 용량면에서 그냥 이미지로 로고를 보여주시는게 더 좋을 것 같습니다.


* {
box-sizing: border-box;
GANGYIKIM marked this conversation as resolved.
Show resolved Hide resolved
font-family: 'Pretendard', sans-serif;
margin: 0;
padding: 0;
}

header {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
}

body {
margin: 0;
padding: 0;
height: 100vh;
}

a {
text-decoration: none;
}

button {
border: none;
outline: none;
cursor: pointer;
}

footer {
background-color: var(--Secondary-900);
width: 100%;
}

input {
outline: none;
border: none;
}

input:focus {
outline: none;
}

input[type='submit'] {
cursor: pointer;
outline: none;
}
246 changes: 200 additions & 46 deletions css/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
margin: auto;
}

.panda-market {
display: none;
}

.header-container {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
Expand All @@ -20,6 +25,11 @@
height: 48px;
}

.index__main {
margin-top: 70px;
width: 100%;
}

.hero {
background-color: var(--main-bg-color);
display: flex;
Expand All @@ -41,20 +51,14 @@
margin-bottom: 100px;
}

.hero-content__title {
font-weight: 700;
font-size: 40px;
}

.hero__image {
width: 746px;
.hero-image {
height: 340px;
}

.btn-items {
width: 357px;
height: 56px;
padding: 16px 124px 16px 124px;
padding: 16px 124px;
border-radius: 40px;
color: var(--Secondary-50);
background-color: var(--Primary-100);
Expand All @@ -76,13 +80,14 @@
padding-right: 40px;
margin: 100px 0 100px -150px;
gap: 64px;
background: #fcfcfc;
background-color: #fcfcfc;
}

.hot-item-content,
.register-content {
display: flex;
flex-direction: column;
gap: 24px;
}

.hot-item-content__span,
Expand All @@ -93,23 +98,16 @@
line-height: 26px;
}

.hot-item-content__description,
.register-content__description {
.content-title {
color: var(--Secondary-700, #374151);
font-size: 24px;
font-weight: 500;
line-height: 32px;
font-size: 40px;
font-weight: 700;
}

.hot-item-content__title,
.register-content__title {
.content-description {
color: var(--Secondary-700, #374151);
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 0.8px;
margin-top: 12px;
margin-bottom: 24px;
font-size: 24px;
font-weight: 500;
}

.search {
Expand All @@ -125,7 +123,7 @@
padding-left: 40px;
margin: 100px -150px 100px 0;
gap: 64px;
background: #fcfcfc;
background-color: #fcfcfc;
}

.search-content {
Expand All @@ -143,21 +141,6 @@
line-height: 26px;
}

.search-content__description {
color: var(--Secondary-700, #374151);
font-size: 24px;
font-weight: 500;
line-height: 32px;
}

.search-content__title {
color: var(--Secondary-700, #374151);
font-size: 40px;
font-weight: 700;
line-height: 56px;
letter-spacing: 0.8px;
}

.bottom {
background-color: var(--main-bg-color);
display: flex;
Expand All @@ -175,17 +158,11 @@
margin-bottom: 170px;
}

.bottom-content__title {
color: var(--Secondary-700, #374151);
font-size: 40px;
font-weight: 700;
line-height: 56px;
}

.footer-container {
width: 100%;
height: 160px;
display: flex;
justify-content: space-between;
justify-content: space-around;
padding-top: 32px;
}

Expand All @@ -207,3 +184,180 @@
display: flex;
gap: 12px;
}

/* tablet */
@media screen and (max-width: 1199px) {
.index__main {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 4rem;
}

.header-container {
padding: 0 24px;
}

.hero {
height: 771px;
}

.hero-container {
height: 100%;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.hero-content {
margin-top: 5rem;
margin-bottom: 0;
align-items: center;
justify-content: center;
}

.hero-content .content-br {
display: none;
}

.hot-item,
.register,
.search {
display: block;
margin: 0 15px;
}

.hot-item-container,
.register-container {
padding: 0;
margin: 0;
background-color: #fff;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}

.search-container {
padding: 0;
margin: 0;
background-color: #fff;
flex-direction: column;
align-items: flex-end;
gap: 24px;
}

.search-content {
order: 1;
}

.content-image {
width: 100%;
object-fit: cover;
}

.content-br {
display: none;
}

.content-title {
font-size: 32px;
text-align: center;
}

.content-description {
font-size: 18px;
}

.bottom {
height: 927px;
}

.bottom-image {
width: 100%;
object-fit: cover;
}

.bottom-container {
height: 100%;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}

.copyright {
color: #676767;
}
}

/* mobile */
@media screen and (max-width: 767px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2:
디자인이 있는 최소사이즈는 375px입니다.
지금 최소 사이즈보다 화면을 작게 할 경우 대응이 되지 않으니
아래와 같이 상위태그에 min-width를 정해주시면 좋습니다.

body {
  min-width: 375px
}

.max-container {
max-width: 400px;
margin: auto;
}

.panda-market-logo {
display: none;
}

.panda-market {
display: inline;
color: var(--Primary-100, #3692ff);
font-family: 'ROKAF Sans';
font-size: 25.633px;
font-weight: 700;
}

.header-container {
padding: 0 16px;
}

.hero {
height: 540px;
}

.hero-image {
height: 207px;
width: 100%;
object-fit: cover;
}

.hero-content .content-br {
display: inline;
}

.btn-items {
width: 240px;
height: 48px;
padding: 12px 71px;
font-size: 18px;
}

.hot-item .content-title,
.search .content-title,
.register .content-title {
font-size: 24px;
}

.bottom {
height: 540px;
}

.bottom-content {
margin: 0;
}

.footer-container {
flex-wrap: wrap;
}

.footer-mid {
gap: 50px;
}

.copyright {
order: 3;
flex: 100%;
margin-left: 35px;
}
Comment on lines +358 to +362
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

모바일 버전 대응하면서 푸터에 copyright 위치가 바뀌었는데,
이렇게 하니깐 마진이 고정되어서 현재 브라우저 너비가 조금 늘어나면 왼쪽 정렬이 잘안되는 문제점이 있습니다🤔

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.copyright 태그와 .footer-mid,.footer-social 태그의 여백을 설정해준 css 속성값이 달라서 조정이 어려운 것 같습니다.
아래와 같은 방식으로 여백을 동시에 주시면 컨트롤하기 더 쉬울 것 같습니다.

// current
.copyright { margin-left: 35px; } // 고정값
.footer-mid, .footer-social 의 부모태그 { justify-content: space-around; } // 브라우저에서 자동으로 여백조정

// 추천하는 방법
.copyright { margin-left: 0 } // 설정안한다는 의미입니다.
.footer-mid, .footer-social 의 부모태그 { 
  justify-content: space-between; 
  margin: 0 35px; 
}

}
5 changes: 4 additions & 1 deletion css/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
gap: 16px;
font-size: 18px;
font-weight: 700;
line-height: 26px;
}

.form__input {
Expand Down Expand Up @@ -128,4 +127,8 @@ input.btn-login:disabled {
.login-logo__img {
width: 300px;
}

.login__main {
margin: 40px auto;
}
}
Loading