-
Notifications
You must be signed in to change notification settings - Fork 46
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.
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 #14
The head ref may contain hidden characters: "Basic-\uBBFC\uC9C0\uC774-sprint2"
[민지이] sprint2 #14
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
구현을 잘 해주셨네요!
리뷰 확인해 주세요!
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
html { | ||
word-break: keep-all; | ||
font-family: 'Pretendard', sans-serif; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+body 태그를 포함하여, 전반적인 페이지에 적용해야 하는 스타일을 관리하는 common.css와 같은 파일을 따로 만들어서 각 페이지에 적용하는 방법도 좋을 것 같네요.
h1 { | ||
color: #374151; | ||
font-weight: 700; | ||
font-size: 40px; | ||
line-height: 140%; | ||
margin: 0; | ||
} | ||
|
||
p { | ||
color: #374151; | ||
font-weight: 500; | ||
font-size: 24px; | ||
line-height: 32px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
전에 멘토링 때 말씀드린 것처럼, 태그 선택자는 공용으로 적용해야 하는 경우를 제외하고는 사용을 지양하고 대신 클래스 선택자를 활용하는 연습을 하시는 게 좋습니다.
추후 유지보수에서의 어려움이 있기 때문에요!
.login-button { | ||
width: 128px; | ||
height: 48px; | ||
background-color: #3692FF; | ||
border-radius: 8px; | ||
border: none; | ||
color: #fff; | ||
font-weight: 600; | ||
font-size: 16px; | ||
line-height: 26px; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
.login-button:hover { | ||
background-color: #1967D6; | ||
} | ||
a { | ||
text-decoration: none; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
가독성을 위해 새로운 선택자 간에는 한 줄씩 띄워 주시면 좋습니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.html 파일과 매칭되는 파일이기 때문에 동일한 이름으로 작성해 주셔야 혼란이 없을 것 같아요!
.img-home-top img { | ||
width: 746px; | ||
height: 340px; | ||
} | ||
.img-home-bottom img { | ||
width: 746px; | ||
height: 340px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
동일한 스타일을 가진다면, class를 분리할 필요 없이 범용적인 이름의 한 class만으로 사용하시면 됩니다.
<h1>일상의 모든 물건을<br> | ||
거래해 보세요 | ||
</h1> | ||
<a href="trade-item.html" class="trade-link-button">구경하러 가기</a> | ||
</div> | ||
<div class="img-home-top"><img src="img/Img-home-top.png" alt="구경하러가기 이미지"> | ||
</div> | ||
</section> | ||
<section class="product-section"> | ||
<div class="section-img"><img src="img/Img-hot-item.png" alt="핫 아이템"> | ||
</div> | ||
<div class="hot-item-section-contents"> | ||
<span class="point-font">Hot item</span> | ||
<h1>인기 상품을<br> | ||
확인해 보세요 | ||
</h1> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
h1 태그는 한 페이지에 하나만 사용해 주세요!
참고
<a href="https://www.facebook.com/" class="face-book"><img src="img/ic_facebook.png" alt="페이스북"></a> | ||
<a href="https://twitter.com/" class="twitter"><img src="img/ic_twitter.png" alt="트위터"></a> | ||
<a href="https://www.youtube.com/" class="youtube"><img src="img/ic_youtube.png" alt="유튜브"></a> | ||
<a href="https://www.instagram.com/" class="instagram"><img src="img/ic_instagram.png" alt="인스타그램"> </a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
스타일이 주어지지 않는다면 class 부여하지 않으셔도 됩니다.
.password-toggle-1 { | ||
position: absolute; | ||
top: 16px; | ||
right: 14px; | ||
cursor: pointer; | ||
} | ||
.password-confirm-field { | ||
position: relative; | ||
} | ||
.password-toggle-2 { | ||
position: absolute; | ||
top: 16px; | ||
right: 14px; | ||
cursor: pointer; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
마찬가지로 동일한 스타일을 가진다면 하나의 class로 재사용하시면 됩니다.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게