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

[이종욱] sprint2 #87

Merged
merged 8 commits into from
Mar 25, 2024
Merged

[이종욱] sprint2 #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c5dfe0b
refactor: HTML external Space Problem resolved!
Bersk3r Mar 18, 2024
d1d0a3a
Refator(mentor): BEM Rules Apply
Bersk3r Mar 19, 2024
191c54e
refactor(mentor) : sprint 2 completed!
Bersk3r Mar 20, 2024
b780080
refactor(chore): input border weight modify
Bersk3r Mar 20, 2024
9d1e825
refactor(chore) : favicon 추가
Bersk3r Mar 20, 2024
9ffdea5
refactor(fix) : CSS 미적용 부분 수정
Bersk3r Mar 20, 2024
c5c81ca
refactor(fix) : CSS 미적용 부분 재수정
Bersk3r Mar 20, 2024
34b96e6
refactor(fix) : 스프린트 2 기본 미션 누락 부분 수정
Bersk3r Mar 20, 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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
.env.test.local
.env.production.local
.github
.idea/*

npm-debug.log*
yarn-debug.log*
Expand Down
Binary file added assets/images/favicon.ico
View file
Open in desktop
Binary file not shown.
10 changes: 10 additions & 0 deletions assets/images/signupPage/google-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions assets/images/signupPage/kakaotalk-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions assets/images/signupPage/pandamarket-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions assets/images/signupPage/password-noshow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/images/signupPage/password-show.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions faq/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">
<title>문의 페이지</title>
</head>
<body>
Expand Down
103 changes: 59 additions & 44 deletions styles/style.css → index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
* {
box-sizing: border-box;
}


a {
cursor: pointer;
Expand All @@ -9,9 +7,13 @@ a {
header {
display: flex;
justify-content: space-between;
height: 4.375rem;
position: sticky;
top: 0;
padding: 11px 200px;
flex: 0 1 auto;
/*gap: calc();*/
background-color: var(--button-font-color);
z-index: 1;
}

header > .login {
Expand All @@ -20,9 +22,11 @@ header > .login {
height: 48px;
border-radius: 8px;
padding-block: 14px;
font-size: 1rem;
line-height: 1.1931rem;
text-align: center;
background-color: #3692FF;
color: #fff;
background-color: var(--header-logo-color);
color: var(--button-font-color);
text-decoration: none;
flex-shrink: 0;
}
Expand All @@ -39,86 +43,102 @@ header > .title > .name > a {
font-size: 1.6em;
font-weight: 700;
line-height: 34.6px;
color: #3692FF;
color: var(--header-logo-color);
text-decoration: none;
}

main {
display: grid;
grid-template: 540px 720px 720px 720px 540px / 1fr;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.footer {
footer {
width: inherit;
height: 160px;
display: grid;
background-color: #111827;
background-color: var(--footer-bg-color);
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
padding: 32px 200px;
}

.footer > .codeit {
footer > .codeit-footer {
font-family: "Pretendard";
font-size: 1em;
line-height: 19.09px;
}

.footer > .codeit.copyright {
color: #9CA3AF;
footer > .codeit-footer.codeit-copyright {
color: var(--panda-gray-color);
}

.footer > .codeit.faqs {
footer > .codeit-footer.codeit-faqs {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 30px;
justify-content: center;
}

.footer > .codeit.faqs > a {
color: #E5E7EB;
footer > .codeit-footer.codeit-faqs > a {
color: var(--faq-font-color);
text-decoration: none;
}

.footer > .codeit.sns {
footer > .codeit-footer.codeit-sns {
display: grid;
grid-template-columns: repeat(4, auto);
grid-auto-columns: 20px;
justify-content: center;
gap: 9px;
}

.panda {
background-color: #CFE5FF;
.panda-banner {
background-color: var(--banner-bg-color);
display: flex;
width: 100%;
gap: 10px;
height: 33.75rem;
justify-content: center;
Copy link
Collaborator

Choose a reason for hiding this comment

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

음 rem계산하기쉽게 default font size를 10px 변환 후 사용하는건..어때요? ㅎㅎ
html 태그의 font-size 조절해주시면됩니다!

align-items: flex-end;
align-items: center;
}

.panda.intro {
padding-inline: 404px 195px;
.panda-banner.top-banner > img {
position: relative;
Copy link
Collaborator

Choose a reason for hiding this comment

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

개인적으로 이 이미지는 전체 컨테이너를 기준으로 (panda-banner) 위치 잡아주는게 제일 깔끔하고, 의도한대로 동작할것같아요. 이미지가 항상 .panda-banner의 오른쪽 끝에서 223px 떨어져있는것같은데요?

그리고 top-banner와 bottom-banner를 구분지어 클래스이름을 준것도 유의미하지않은것같습니다.
두 배너 다 컨테이너를 기준으로 텍스트가 시작하는 위치, 이미지가 들어간 위치, 정렬된 기준이 동일하기때문에 같은 클래스이름으로 묶어주는것이 오히려 바람직해보여요 :) 참고하셔서 리팩터링 진행해보세요!

width: 62.25rem;
height: 27.9375rem;
top: 2.875rem;
left: 6.25rem;
}

.panda.banner {
padding-inline: 329px 270px;
.panda-banner.top-banner > div {
font-family: "pretendard";
display: flex;
flex-direction: column;
width: 22.5rem;
height: 3.75rem;
position: relative;
left: 6.25rem;
bottom: 4rem;
}

.panda.intro > div,
.panda.banner > h2
.panda-banner.bottom-banner > h2
{
display: flex;
font-family: "pretendard";
position: relative;
display: flex;
flex-direction: column;
position: relative;
justify-content: center;
Copy link
Collaborator

Choose a reason for hiding this comment

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

position: relative 써주고 바로 상대적인 위치를 써주는 코드가 많이 보이네요! padding이나 margin 으로도 해결할수있지않을까요?

bottom: 35%;
/*gap: calc();*/
left: 3.125rem;
}

.panda.intro > div > h2,
.panda.banner > h2 {
.panda-banner.bottom-banner > img {
position: relative;
left: 3.125rem;
}

.panda-banner.top-banner > div > h2,
.panda-banner.bottom-banner > h2 {
font-size: 2.5em;
font-weight: 700;
line-height: 56px;
Expand All @@ -128,27 +148,22 @@ main {
/*
*이렇게 클래스 이름이 아닌 규칙 준 이유는 CSS 내 0-0-0 규칙 상 때문에 클래스 이름을 되도록 주지 않았습니다.
*/
.panda.intro > div > a {
.panda-banner.top-banner > div > a {
width: 356px;
height: 56px;
border-radius: 40px;
background-color: #3692FF;
color: #fff;
background-color: var(--header-logo-color);
color: var(--button-font-color);
text-decoration: none;
text-align: center;
padding-block: 16px;
font-size: 1.25rem;
font-weight: 600;
}

.panda.intro > img {
width: 996px;
height: 447px;
background-size: 996px 447px;
}

.panda-section {
display: flex;
max-width: 1200px;
justify-content: center;
padding-block: 138px;
gap: 0px 64px;
Expand All @@ -170,7 +185,7 @@ main {
.panda-section > div > h2 {
font-size: 1.125em;
line-height: 25.2px;
color: #3692FF;
color: var(--header-logo-color);
letter-spacing: 1px;
}

Expand Down
Loading
Loading