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 #94

Merged
merged 3 commits into from
Sep 23, 2024
Merged

[박종찬] sprint3 #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79ab505
Docs 리뷰를 반영하여 파일명 수정
Sep 20, 2024
9a5f42d
feat 홈화면 Tablet 적용
Sep 20, 2024
1723851
feat 홈화면 모바일 적용
Sep 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
213 changes: 208 additions & 5 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ html {
}

header {
position: fixed;
position:fixed;
Copy link
Collaborator

Choose a reason for hiding this comment

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

코드 전반적으로 프리티어 적용한 것 같은데, 여기는 왜인지 적용이 안되어있네요 !

Suggested change
position:fixed;
position: fixed;

Copy link
Collaborator

Choose a reason for hiding this comment

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

또한 ! sticky로 설정해두면 height만큼 상단에 공간을 차지하게 될 수 있습니다 !

Suggested change
position:fixed;
position: sticky;

별도의 margin이나 padding 등의 height를 주지 않아도 되는 장점이 있습니다. 😊

top: 0;
z-index: 99; /*내가 보이게 하도록 넣음*/
left: 0;
z-index: 99; /* 가려지는 상황이 있어 임의로 추가함.*/
width: 100%;
height: 70px;
border-bottom: 1px solid var(--white-5);
padding: 0 200px; /*figma에는 9 400 주라고 되어있는데?*/
gap: 10px; /* 이것도 없음 */
padding: 0 200px; /*figma에는 9 400 주라고 되어있는데, 답지(?)에는 이렇게 있어요.*/
gap: 10px;
background-color: var(--white);
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -65,6 +66,7 @@ main {
}

.sectionAll {
margin: 70px auto;
width: 100%;
height: 540px;
background-color: var(--white-4);
Expand Down Expand Up @@ -95,6 +97,7 @@ main {
line-height: 56px;
color: var(--gray-700);
}

#see {
border-radius: 40px;
padding: 16px 124px;
Expand Down Expand Up @@ -123,7 +126,8 @@ main {
display: flex;
justify-content: center;
align-items: center;
margin: 100px 0; /* reset css라는 것을 실행후 figma에서 보여지는 것과 다르게 article이 붙어 있어 수정하였습니다. */
margin: 100px 0;
/* reset css라는 것을 실행후 figma에서 보여지는 것과 다르게 article이 붙어 있어 임의로 수정하였습니다. */
Comment on lines +129 to +130
Copy link
Collaborator

Choose a reason for hiding this comment

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

넵넵 ~! 굳굳 👍

}

.wordBox2 {
Expand Down Expand Up @@ -204,3 +208,202 @@ footer {
text-decoration: none;
color: inherit;
}

/* Tablet 스타일 (768px ~ 1199px) 1505%이상의 화면*/
@media (max-width:1199px){
header {
padding: 0 24px
}

.sectionAll {
height: 100%;
}

.mainBox {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.wordBox {
height: 100%;
width: 512px;
margin: 84px 116px;
gap:24px;
display: flex;
justify-content: center;
align-items: center;
}

.mainWord {
text-align: center;
gap:24px;
font-size: 40px;
font-weight: 700;
line-height: 56px;
}

.break {
display: none;
white-space: nowrap;
}

.mainImage {
height: 100%;
width: 100%;
margin-top: 431px;
}

#see {
height: 56px;
width:fit-content;
}

.articleImage {
width: 100%;
}

.articles {
width: 696px;
gap: 52px;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.article {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}

.reverseArticle {
flex-direction: column-reverse;
justify-content: center;
align-items: end;
}

.wordBox2 {
display: flex;
flex-direction: column;
text-align: left;
padding-bottom: 24px;
gap: 12px;
}

#word2 {
text-align: right;
}

#bottomBox {
display: flex;
justify-content:center;
align-items: center;
margin: 201px 224px 0;
}

footer {
height: 160px;
padding: 32px 104px 64px;
}
}

/* Mobile 스타일 (375px ~ 767px) 250%이상의 화면*/
@media (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.

굳굳 ~! 반응형을 잘 설정해두셨군요 😊

header {
padding: 0 16px;
}

header {
width: 100%;
gap: 126px;
}
Comment on lines +317 to +324
Copy link
Collaborator

Choose a reason for hiding this comment

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

혹시 두 개로 나눈 이유가 있으실까요?

Suggested change
header {
padding: 0 16px;
}
header {
width: 100%;
gap: 126px;
}
header {
width: 100%;
gap: 126px;
padding: 0 16px;
}


.break {
white-space: normal;
display: inline;
}

.wordBox {
width: 240px;
margin: 48px 68px;
padding: 0 0 60px;
display: flex;
flex-direction: column;
gap: 18px;
}
.mainImage{
margin: 0;
}

.mainWord {
font-size: 32px;
font-weight: 700;
line-height: 44.8px;
text-align: center;
}

#see {
padding: 16px 71px;
font-size: 18px;
font-weight: 600;
line-height: 26px;
}

.articles {
width: 334px;
gap: 10px;
display: flex;
flex-direction: column;
}

.point {
font-size: 16px;
font-weight: 700;
line-height: 26px;
}

.articleContent {
font-size: 24px;
font-weight: 700;
line-height: 32px;
}

.detail {
font-size: 16px;
font-weight: 500;
line-height: 26px;
}

#bottomBox {
margin: 121px 70px;
}

footer {
display: grid;
grid-template-columns: 180px 120px;
grid-template-rows: 30px 30px;
gap: 30px 20px;
padding: 32px;
}

.codeit {
grid-row: 2/3;
grid-column: 1/2;
text-align: left;
}

#center {
grid-row: 1/2;
grid-column: 1/2;
}

.socialLink {
grid-row: 1/2;
grid-column: 2/3;
}
}
0 font/ROKAF Sans Bold.ttf → font/ROKAF-Sans-Bold.ttf
View file
Open in desktop
File renamed without changes.
18 changes: 9 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,22 +34,22 @@
<section class="sectionAll">
<div class="mainBox">
<div class="wordBox">
<h2 class="mainWord">일상의 모든 물건을<br />거래해보세요</h2>
<h2 class="mainWord">일상의 모든 물건을<br class="break" />거래해보세요</h2>
<a
href="https://youtu.be/oIyXqK34xSs?si=fvunpJcz7Bi98npA"
id="see"
class="button"
>구경하러 가기</a
>
</div>
<img src="img/first.png" alt="장보러가는 판다 사진" />
<img class='mainImage' src="img/first.png" alt="장보러가는 판다 사진" />
</div>
</section>

<div class="main">
<div class="articles">
<article class="article">
<img src="img/Img_home_01.png" alt="" />
<img class="articleImage" src="img/Img_home_01.png" alt="" />
<div class="wordBox2">
<p class="point">Hot item</p>
<h3 class="articleContent">인기 상품을<br />확인해 보세요</h3>
Expand All @@ -59,7 +59,7 @@ <h3 class="articleContent">인기 상품을<br />확인해 보세요</h3>
</div>
</article>

<article class="article">
<article class="article reverseArticle">
<div id="word2" class="wordBox2">
<p class="point">Search</p>
<h3 class="articleContent">
Expand All @@ -69,11 +69,11 @@ <h3 class="articleContent">
구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
</p>
</div>
<img src="img/Img_home_02.png" alt="" />
<img class="articleImage" src="img/Img_home_02.png" alt="" />
</article>

<article class="article">
<img src="img/Img_home_03.png" alt="" />
<img class="articleImage" src="img/Img_home_03.png" alt="" />
<div class="wordBox2">
<p class="point">Register</p>
<h3 class="articleContent">
Expand All @@ -89,10 +89,10 @@ <h3 class="articleContent">

<section id="bottom" class="sectionAll">
<div class="mainBox">
<div class="wordBox">
<h2 class="mainWord">믿을 수 있는<br />판다마켓 중고 거래</h2>
<div id="bottomBox" class="wordBox">
<h2 id="BottomWord" class="mainWord">믿을 수 있는<br />판다마켓 중고 거래</h2>
</div>
<img src="img/마지막 그림.png" alt="구매를 만족한 판다 사진" />
<img class='mainImage' src="img/마지막 그림.png" alt="구매를 만족한 판다 사진" />
</div>
</section>
</main>
Expand Down
9 changes: 6 additions & 3 deletions login/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@font-face {
font-family: "ROKAF sans";
src: url(../../font/ROKAF\ Sans\ Bold.ttf);
font-family: "ROKAF-sans";
Copy link
Collaborator

Choose a reason for hiding this comment

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

굳굳 👍 띄어쓰기보다는 -로 이루어진 케밥케이스가 아무래도 편하죠.

띄어쓰기를 사용하면 \를 넣어야 되어서 불편하기도 하고 휴먼에러를 많이 발생시킬 수 있어요 ! 저도 이와같은 이유로 파일명이나 폴더명에는 띄어쓰기를 사용하지 않습니다. 😊

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

일단 폰트부분은 건드리기 무서워 손대지 않고 제공(?)해준 대로 상요하고 있습니다. 파일명은 안바꾸고 CSS안에서만 이름 수정해도 되는 부분일까요?

src: url(../../font/ROKAF-Sans-Bold.ttf);
}
html {
font-family: "Pretendard", "ROKAF sans", "Noto Sans KR", sans-serif;
font-family: "Pretendard", "ROKAF-sans", "Noto Sans KR", sans-serif;
}

body {
Expand Down Expand Up @@ -83,7 +83,10 @@ body {
gap: 10px;
background-color: var(--gray-100);
}
.inputs:focus {
outline: 2px solid var(--blue-100);
Comment on lines +86 to +87
Copy link
Collaborator

Choose a reason for hiding this comment

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

상태 선택자를 넣었군요 !

좀 더 다채로운 UI가 되었을 것 같아요. 굳굳 👍


}
.password {
position: relative;
}
Expand Down
Loading