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

Merged
merged 2 commits into from
Jun 9, 2024
+249 −28
Merged

[정인재] sprint3 #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7079c03
Revert "."
Injaeeee Jun 3, 2024
e5dc57c
반응형 웹 퍼블리싱
Injaeeee Jun 7, 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
Binary file removed .DS_Store
View file
Open in desktop
Binary file not shown.
23 changes: 10 additions & 13 deletions index.html
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

body에 태그 자체에 margin 스타일을 부여하셨네요. html 태그에 직접적인 스타일링은 웬만하면 지양해야합니다.
다른 개발자들과의 협업을 어렵게 만드는 요소입니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

image

footer의 디자인이 시안과 다르게 되어있네요. 이 부분 확인 부탁드립니다.

Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@
<div class="frame">
<div class="content">
<div class="frame-text">
일상의 모든 물건을 </br>
거래해보세요
일상의 모든 물건을<br class="line mobile-line" /> 거래해보세요
</div>
Comment on lines 26 to 28
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 부분은 div 태그보다 p 태그를 쓰는게 더 시멘틱합니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

image

이미지를 보시면 컨텐츠의 너비가 부모요소의 패딩을 침범하고 있습니다. 모바일일때 패딩을 좀 줄이면 더 좋은 레이아웃이 될 것 같습니다 !

<a class="see-more" href="items/">구경하러가기</a>
</div>
Expand All @@ -37,45 +36,43 @@

<article class="element">

<img src="/img/Img_home_01.png">
<img class="element-img" src="/img/Img_home_01.png">
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

이미지에 vw 단위를 주셨네요 ! vw는 실무에서도 반응형 작업을 할때 많이 사용을 했습니다 !

article의 전체 사이즈가 이미지의 vw에 의존하고 section 태그의 display: flex, align-items: center에 의해 컨텐츠가 가운대로 모였습니다.

저는 개인적인 경험으로는 section 태그에 상하좌우 패딩을 주어 모서리와 컨텐츠간의 일정 부분 간격을 보장하는것이 좋다고 생각합니다. section 태그가 일종의 container 역할을 하고 있는데, 대부분의 디자인에서는 container가 패딩을 가지고 있습니다.

image

위는 section에 임의의 패딩을 준 모습입니다. 개인적인 경험으로 이런 모습이 조금 더 유지보수하기 용이한 레이아웃이었습니다.

<div class="element-text-left">
<span class="category">Hot item</span>
<p class="element-main-text">인기 상품을 <br />
확인해 보세요 </p>
<p class="element-main-text">인기 상품을 <br class="line" />
확인해보세요 </p>
<p class="element-sub-text"> 가장 HOT한 중고거래 물품을 <br />
판다 마켓에서 확인해 보세요</p>
</div>
</article>

<article class="element">

<article class="element right">
<div class="element-text-right">
<span class="category">Search</span>
<p class="element-main-text">구매를 원하는 <br />
<p class="element-main-text">구매를 원하는 <br class="line" />
상품을 검색하세요</p>
<p class="element-sub-text">
구매하고 싶은 물품은 검색해서 <br />
쉽게 찾아보세요
</p>
</div>
<img src="img/Img_home_02.png">
<img class="element-img" src="img/Img_home_02.png">
</article>

<article class="element">
<img src="img/Img_home_03.png">
<img class="element-img" src="img/Img_home_03.png">
<div class="element-text-left">
<span class="category">Register</span>
<p class="element-main-text">판매를 원하는 <br />
<p class="element-main-text">판매를 원하는 <br class="line" />
상품을 등록하세요</p>
<p class="element-sub-text">
어떤 물건이든 판매하고 싶은 상품을<br />
어떤 물건이든 판매하고 싶은 상품을 <br />
쉽게 등록하세요
</p>
</div>
</article>
</section>

</div>

<div class="frame">
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

이 부분도 컨텐츠가 패딩을 침범하네요 ~ 패딩을 좀 줄이면 될 것 같습니다.

<div class="content">
Expand Down
2 changes: 1 addition & 1 deletion login/index.html
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

input, label 속성등에 html 태그에 직접적인 스타일링이 되어있네요. 클래스 이름을 통해서 스타일을 해주시길 바랍니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

디자인 시안상 모바일 사이즈는 400px을 넘기지 않아야하기때문에 최대 400px까지는 커져야합니다.
input 태그에 모바일 사이즈 기준으로 width를 343px을 주셨고, 부모태그의 너비가 컨텐츠의 넓이에 의해 결정되므로 form태그의 너비가 343px 쯤으로 머무르는걸로 판단됩니다.

form 태그의 max-width를 400px로 하고 input 태그의 너비를 width: 100%로 주는 접근을 하는것이 좀 더 나은 마크업이라고 생각합니다.

Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
</head>

<body class="loginPage">
Copy link
Collaborator

Choose a reason for hiding this comment

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

image
body에 8px의 마진이 들어 가 있습니다. 컨텐츠가 오른쪽으로 치우쳐 져 보이네요.
body에 마진을 빼면 해결 됩니다.


<a href="./">
<div class="logo">
<img src="/img/logo.png" />
</div>
</a>


<main>
<form class="login">
<div class="login-input">
Expand Down
39 changes: 39 additions & 0 deletions login/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,4 +108,43 @@ input:focus-out {
transform: translateY(350%);
pointer-events: none;
/* 눈 모양 아이콘 */
}

/* Tablet */
@media (max-width: 1200px) {}


/* Mobile */
@media (max-width: 768px) {

.loginPage {
justify-content: flex-start;
gap: 20px;
}

.logo {
margin-top: 50px;
}

.logo img {
width: 198px;
height: 66px;
object-fit: contain;
}

label {
font-size: 14px;
}

input {
width: 343px;
}

.login-button {
width: 343px;
}

.easy-login {
width: 344px;
}
}
42 changes: 42 additions & 0 deletions signup/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,4 +108,46 @@ input:focus-out {
transform: translateY(350%);
pointer-events: none;
/* 눈 모양 아이콘 */
}




/* Tablet */
@media (max-width: 1200px) {}


/* Mobile */
@media (max-width: 768px) {

.signupPage {
justify-content: flex-start;
gap: 20px;
}

.logo {
margin-top: 50px;
}

.logo img {
width: 198px;
height: 66px;
object-fit: contain;
}

label {
font-size: 14px;
}

input {
width: 343px;
}

.signup-button {
width: 343px;
}

.easy-login {
width: 344px;
}
}
Loading
Loading