Skip to content

Basic 유용민 sprint3 #97

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

Merged
GANGYIKIM merged 4 commits into from
Mar 19, 2025
Merged

Basic 유용민 sprint3 #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab59b1e
fix: banner img sizing
Yongmin0423 Mar 11, 2025
1865c4d
styly: index page size modify
Yongmin0423 Mar 11, 2025
b59e709
style: footer media query
Yongmin0423 Mar 17, 2025
680b6b2
style: media query
Yongmin0423 Mar 17, 2025
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
67 changes: 67 additions & 0 deletions css/components/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
footer {
display: flex;
width: 100%;
justify-content: center;
height: 15rem;
background-color: #111827;
}

.footer-container {
div:first-child {
color: #676767;
}
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2.5rem;
width: 80%;
height: 8%;
color: #ffffff;
font-size: 16px;
font-weight: 400;
img {
height: 100%;
}
}

.footer-middle {
display: flex;
gap: 30px;
color: #cfcfcf;
}

.footer-right {
display: flex;
height: 100%;
gap: 12px;
}

@media (max-width: 1200px) {
footer {
height: 10rem;
}

.footer-container {
font-size: 1.1rem;
}

.footer-right {
img {
aspect-ratio: 1;
width: 1.1rem;
height: 1.1rem;
}
}
}

@media (max-width: 767px) and (min-width: 375px) {
footer {
position: relative;
}
.footer-container {
div:first-child {
position: absolute;
bottom: 20%;
}
}
}
15 changes: 14 additions & 1 deletion css/pages/main/components/nav.css → css/components/nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
header {
display: flex;
justify-content: center;
width: 100vw;
width: 100%;
position: fixed;
top: 0;
background-color: #ffffff;
Expand Down Expand Up @@ -40,3 +40,16 @@ nav {
width: calc(100% - 400px);
}
}

@media (max-width: 1199px) {
nav {
justify-content: space-between;
width: calc(100% - 48px);
}
}

@media (max-width: 767px) and (min-width: 375px) {
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 19, 2025

Choose a reason for hiding this comment

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

💊 제안
min-width가 조건에 걸려있어 375px 미만으로 화면이 작아지게 되면 PC 스타일이 적용되네요~
body에 min-width: 375px를 추가하셔서 해당 사이즈 미만으로 작아지게 되면 가로 스크롤이 생기게 해주시거나
아니라면 min-width를 조건문에서 빼주시는 것을 추천드려요~

nav {
width: calc(100% - 16px);
}
}
15 changes: 13 additions & 2 deletions css/pages/login/login.css → css/login/login.css
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 19, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
.total-container 태그의 height: 100vh 속성으로 인해 브라우저 높이가 작아졌을 시 내부 콘텐츠가 보이지 않네요~
확인 후 수정해주세요~

Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
flex-direction: column;
justify-content: center;
align-items: center;
width: 40%;
width: 100%;
max-width: 640px;
}

.login-logo {
Expand Down Expand Up @@ -38,13 +39,14 @@
input {
background-color: #f3f4f6;
border: none;
height: 2.5rem;
height: 3.5rem;
padding: 0 1rem;
}
#login-submit {
background-color: #3692ff;
color: white;
border-radius: 40px;
height: 3.5rem;
}
#no-eye {
position: absolute;
Comment on lines 51 to 52
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 19, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
해당 아이콘의 위치가 디자인과 다르네요~
추후 버튼으로 변경하시고 위치를 디자인과 비슷하게 변경하시는 것을 추천드립니다!

Expand All @@ -62,6 +64,7 @@
padding: 1rem 2rem;
font-size: 0.9rem;
margin-bottom: 1rem;
height: 4.5rem;
.social-login__img {
display: flex;
justify-content: space-between;
Expand All @@ -78,9 +81,17 @@
display: flex;
justify-content: center;
align-items: center;
height: 2rem;
gap: 1rem;
a {
color: #3692ff;
text-decoration: underline;
}
}

@media (max-width: 765px) and (min-width: 365px) {
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 19, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
다른 css 파일의 브레이크 포인트와 다른 화면 사이즈를 조건으로 가지고 있네요~

// ex: nav.css
@media (max-width: 767px) and (min-width: 375px) {

아예 다른 브레이크 포인트면 모를까 비슷한데 다른 크기라서 헷갈리니 하나로 통일해주세요~

.loginContainer {
width: calc(100% - 32px);
max-width: 400px;
}
}
101 changes: 101 additions & 0 deletions css/main/articles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
.main-articles {
display: flex;
flex-direction: column;
align-items: center;
height: 50%;
}

.main-article {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
max-width: 988px;
max-height: 444px;
margin: 3.5rem 0rem;
}

.main-article-container {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
img {
width: 75%;
height: 100%;
max-width: 579px;
max-height: 444px;
}
}

.main-article__text {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #fcfcfc;
width: 35%;
gap: 2.4rem;
padding: 2rem 2rem;
h5 {
font-size: 1rem;
font-weight: 700;
color: #3692ff;
}
h2 {
font-size: 2rem;
font-weight: 700;
line-height: 3rem;
color: #374151;
}
p {
font-size: 1.2rem;
line-height: 2rem;
font-weight: 500;
color: #374151;
}
}

.main-article__text2 {
align-items: flex-end;
text-align: right;
}

@media (max-width: 1200px) {
.main-article {
width: 100%;
max-width: 100%;
max-height: 100%;
}
.main-article-container {
flex-direction: column;
align-items: center;
img {
width: 95%;
max-width: 100%;
max-height: 100%;
}
}
.main-article__text {
width: 100%;
}

.main-article-container2 {
flex-direction: column-reverse;
}
}

@media (max-width: 767px) and (min-width: 375px) {
.main-article {
margin: 1rem 0;
}
.main-article__text {
gap: 0.5rem;
h2 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
line-height: 120%;
}
}
}
143 changes: 143 additions & 0 deletions css/main/banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
.main-banner {
display: flex;
justify-content: center;
background-color: #cfe5ff;
width: 100%;
line-height: 4rem;
height: 40vh;
margin-top: 4.5rem;
}

banner {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
max-width: 1920px;
height: 100%;
}

.banner-left {
width: 100%;
height: 70%;
max-width: 357px;
h1 {
font-size: 2.5rem;
color: #374151;
}
}

.banner-right {
display: flex;
align-items: flex-end;
max-width: 746px;
max-height: 340px;
height: 100%;
img {
width: 100%;
}
Comment on lines +36 to +38
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 19, 2025

Choose a reason for hiding this comment

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

💊 제안
지금 배포 사이트에서 브라우저의 높이를 줄여보면 배너의 이미지가 상단 영역을 넘어 올라옵니다~
img 태그의 width 속성을 100% 으로 해주셔서 이미지의 비율을 유지한채로 height가 늘어났기 때문입니다.
아래처럼 height 속성을 기준으로 잡아주시는 것을 추천드려요!

스크린샷 2025-03-19 오후 3 20 58 스크린샷 2025-03-19 오후 3 22 31
Suggested change
img {
width: 100%;
}
img {
height: 100%;
}

}

.main-banner__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
height: 100%;
font-size: 3rem;
font-weight: 700;
gap: 32px;

a {
width: 100%;
}
button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 56px;
border-radius: 40px;
background-color: #3692ff;
color: #ffffff;
cursor: pointer;
font-size: 1.4rem;
}
}

.main-banner-bottom__content {
margin-bottom: 0;
}

@media (max-width: 1920px) {
banner {
width: calc(100% - 400px);
}
}

@media (max-width: 1200px) {
.main-banner {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.main-banner__content {
align-items: center;
padding: 5rem 0;
h1 {
text-align: center;
font-size: 100%;
}
a {
display: flex;
justify-content: center;
}
button {
width: 30%;
max-width: 357px;
}
}
banner {
flex-direction: column;
align-items: center;
width: 100%;
}
.banner-left {
width: 100%;
max-width: 100%;
}

.banner-right {
width: 100%;
max-width: 100%;
margin-top: 15rem;
}
.main-banner-bottom__content {
h1 {
text-align: center;
}
}
}

@media (max-width: 767px) and (min-width: 375px) {
.main-banner__content {
padding: 3rem 0;
h1 {
width: 80%;
font-size: 80%;
line-height: 130%;
}
#search-btn {
width: 70%;
}
}
.banner-right {
margin-top: 4rem;
}

.main-article__text {
gap: 1.5rem;
}
}
Loading
Loading