-
Notifications
You must be signed in to change notification settings - Fork 31
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
스프린트미션1 #5
The head ref may contain hidden characters: "Basic-\uC1A1\uBBF8\uC9C4"
스프린트미션1 #5
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.
미진님 고생 많으셨습니다~!
css도 능숙하신 거 같고 벌써 공통 스타일을 정의하거나 모듈화 하시는 모습이 인상적이었습니다 :) 접근성을 조금 더 신경써주시면 더욱 좋을 거 같습니다.
앞으로가 더 기대되네요! 👍
|
||
.inner,.box_inner { margin:0 auto; min-width:325px; max-width:1120px; } | ||
|
||
:root { |
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.
css 변수를 활용하셨네요! 👍
|
||
.font_1 { font-size:40px; } | ||
.font_2 { font-size:24px; } | ||
.font_3 { font-size:18px; } |
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.
공통으로 사용되는 스타일을 클래스로 잘 정의해주셨습니다~! 👍
@@ -0,0 +1,10 @@ | |||
|
|||
|
|||
|
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.
벌써 분리를 해주셨군요! 👍
@@ -0,0 +1,110 @@ | |||
|
|||
<html> |
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.
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="robots" content="noindex"> | ||
<meta name="Keywords" content="판다마켓,쇼핑몰" /> |
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.
메타 태그도 챙겨주셨네요...! 😮
<header> | ||
<div class="inner"> | ||
<a href="/" class="logo_top"> | ||
<img src="/images/logo_01.png"> |
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.
img를 쓰실 때 alt를 넣어주시는 것이 접근성에 좋습니다!
<div class="box"> | ||
<img src="/images/Img_home_01.png" alt="Hot item"> | ||
<div> | ||
<h4 class="font_3">Hot item</h4> |
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.
h tag 는 계층 구조로 사용하시는 것이 접근성에 좋습니다! h1은 페이지에 하나가 되어야합니다 :)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람
.btn:active { background-color: #1251AA; color:#fff; } | ||
.btn.n_act { background-color: #9CA3AF; color:#fff; } | ||
|
||
.btn._a { display:inline-block; padding:16px 124px; border-radius: 50px; } |
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.
._a 보다는 rounded 등 좀 더 유의미한 이름이면 더 좋을 거 같습니다 :)
.section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:10%; } | ||
.section._4 .text_box { top:20%; } | ||
} | ||
@media (max-width: 780px) { |
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.
벌써 반응형을 구현해주셨군요!! 👍
.section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:10%; } | ||
.section._4 .text_box { top:20%; } | ||
} | ||
@media (max-width: 780px) { |
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.
오 감사합니다!! |
요구사항
기본
심화
설정해 보세요.(설정값은 자유입니다)
주요 변경사항
스크린샷
멘토에게