[황준호] sprint3 #57
[황준호] sprint3 #57
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
| <input type="password" class="user-password" name="user-password" placeholder="비밀번호를 입력해주세요" required> | ||
| <div class="password-wrap"> | ||
| <input type="password" class="user-password" name="user-password" placeholder="비밀번호를 입력해주세요" required> | ||
| <svg class="password-visbility"></svg> |
There was a problem hiding this comment.
(제안) svg 태그 그대로 작성해볼 수도 있습니다:
| <svg class="password-visbility"></svg> | |
| <svg | |
| class="password-visibility" | |
| width="24" | |
| height="24" | |
| viewBox="0 0 24 24" | |
| xmlns="http://www.w3.org/2000/svg" | |
| role="button" | |
| aria-label="비밀번호 보기" | |
| > | |
| <path | |
| d="M12 4.5C7.05 4.5 2.73 7.61 1 12c1.73 4.39 6.05 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6.05-7.5-11-7.5zm0 12c-2.48 0-4.5-2.02-4.5-4.5S9.52 7.5 12 7.5 16.5 9.52 16.5 12 14.48 16.5 12 16.5zm0-7c-1.38 0-2.5 1.12-2.5 2.5S10.62 14.5 12 14.5 14.5 13.38 14.5 12 13.38 9.5 12 9.5z" | |
| fill="#000" | |
| /> | |
| </svg> |
background-image로 설정된다면 스크린 리더와 같은 보조 기술에서 무시될 수 있어요. 시각적으로만 표시되며, 의미 전달이 필요할 경우 부적합할 수 있습니다. 😊
There was a problem hiding this comment.
혹은 다음과 같이 <img 태그를 사용해볼 수 있어요 😊:
| <svg class="password-visbility"></svg> | |
| <img | |
| class="password-visibility" | |
| src="images/btn_visibility_on.svg" | |
| alt="비밀번호 보기" | |
| role="button" | |
| /> |
| .context1 h2 { | ||
| width: 222px; | ||
| height: 112px; | ||
| } | ||
|
|
||
| .context1 p { | ||
| width: 274px; | ||
| height: 64px; | ||
| } | ||
|
|
||
| .context2 h2 { |
There was a problem hiding this comment.
class/id를 단순히 숫자를 열거하는 것보다 어떤 "목적"인지 작성하는게 어떨까요?
다음은 *BEM 방법론을 따른 예시입니다:
| .context1 h2 { | |
| width: 222px; | |
| height: 112px; | |
| } | |
| .context1 p { | |
| width: 274px; | |
| height: 64px; | |
| } | |
| .context2 h2 { | |
| <section class="landing-section__image--left"> |
만약, 1, 2와 같은 순서가 숫자로 들어가야 한다거나 디자인을 보았을 때 직관적으로 재사용 가능한 패턴들로 보이는데 각자 다른 고유한 스타일이 들어가야한다면, 스타일 구성이 잘못되었는지도 확인해보면 좋습니다.
BEM: html/CSS 방법론 중 하나예요. 더 알아보기
| } | ||
|
|
||
| /* 타블렛 사이즈 */ | ||
| @media (max-width: 1199px) { |
There was a problem hiding this comment.
굿굿 ~! 미디어 쿼리를 잘 사용하셨군요 👍
요구사항을 잘 만족시키셨습니다 ! 👍
There was a problem hiding this comment.
(의견) 서비스에 필요한 모든 스타일이 style.css에 작성된 것 같아요.
회원가입 페이지, 로그인 페이지와 메인 페이지 각자의 스타일이 필요할 수도 있을거예요.
그리고 필요한 페이지 혹은 컴포넌트 수 만큼 스타일 코드는 계속해서 필요할 수 있어요.
한 곳에 코드가 모두 몰려있다면 어느 부분이 어떤 컴포넌트, 페이지에 해당하는지 파악하기 어렵기에 유지보수성이 감소될 수 있습니다. 또한, 사용된 클래스명을 다시 사용하게 되는 *휴먼에러가 발생된다면 의도치 않은 스타일이 덮의 씌워지게 될 수도 있어요 😊
휴먼 에러: 인간이 의도하지 않게 벌어진 실수나 행동이예요.
There was a problem hiding this comment.
따라서, auth.css 혹은 sign-in.style.css 혹은 sign-up.style.css와 같이 작성해보는건 어떨까요?
|
수고하셨습니다 준호님 ! 팀 프로젝트에서도 지금과 같은 학습 열정으로 팀에 기여하실거라 생각합니다. |
2 participants
요구사항
기본
공통
-PC: 1200px 이상
-Tablet: 768px 이상 ~ 1199px 이하
-Mobile: 375px 이상 ~ 767px 이하
-375px 미만 사이즈의 디자인은 고려하지 않습니다.
랜딩 페이지
로그인, 회원가입 페이지 공통
심화
주요 변경사항
스크린샷
멘토에게