[김교연] Sprint2 #52
[김교연] Sprint2 #52
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
피그마의 크기대로 버튼, input 등을 구현하면 캡처 시에는 피그마와 비슷해 보이는데 실제로 화면을 보면 화면에 버튼, 글자들이 커서 화면을 꽉 채웁니다. 지금처럼 피그마에서 제공한 크기를 그대로 따라 하는 게 좋을까요? 아니면 다른 방법이 있을까요?피그마 규격을 그대로 맞추시면 됩니다 ! 혹시 브라우저에 |
login.css와 signup.css 파일에 겹치는 부분이 많습니다. 그래서 저는 login.css class 이름을 그대로 쓰고 추가된 부분만 signup.css에 입력했습니다. 이렇게 css 파일에서 겹치부분이 많을 때 더 좋은 방법이 있을까요?좋은 생각이세요. 재사용성에 필요성을 느끼셨군요 ! "인증"과 관련된 디자인이 유사하다면 다음과 같이 스트럭쳐를 구성해볼 수도 있을 것 같아요: 제가 생각하는 아이디어는 위와 같으며 다른 좋은 방법이 있다면 적용해보셔도 좋습니다 😊 |
| input { | ||
| border: none; | ||
| background-color: transparent; /* 투명 배경 */ | ||
| outline: none; | ||
| flex: 1; | ||
| font-size: 16px; | ||
| } |
There was a problem hiding this comment.
(제안) 만약 스타일 선택자 목적이라면 태그보다는 class를 선택자로 사용하는게 어떨까요?
클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !
좀 더 자세히 🤔
유지보수가 어려워질 수 있어요.
특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.
태그 의미를 명확히 부여하기 어려워요.
스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.
만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?
<p class="error-message">오류가 발생했습니다.</p>물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.
예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:
p {
margin: 0;
}그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:
.paragraph {
font-size: 16px;
color: #333;
}
.highlight {
background-color: yellow;
}There was a problem hiding this comment.
굿굿 ! reset.css를 적용하셨군요 !
이로써 교연님의 서비스가 모든 브라우저에서 동일한 UI가 출력될 수 있기를 기대할 수 있을거예요 👍👍
| <h3>이메일</h3> | ||
| <div class="input_wrapper"> | ||
| <input | ||
| id="email" | ||
| name="email" | ||
| placeholder="이메일을 입력해주세요." | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
<label>을 활용해보시는 건 어떨까요? 😊
| <h3>이메일</h3> | |
| <div class="input_wrapper"> | |
| <input | |
| id="email" | |
| name="email" | |
| placeholder="이메일을 입력해주세요." | |
| /> | |
| </div> | |
| <label for="email">이메일</label> | |
| <div class="input_wrapper"> | |
| <input | |
| id="email" | |
| name="email" | |
| placeholder="이메일을 입력해주세요." | |
| /> | |
| </div> |
라벨은 다음과 같은 이점이 있습니다:
<label> 을 <input> (en-US) 요소와 연결하면 몇 가지 이점이 있습니다:
- label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다.
- 관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.
출처: MDN
| id="passwd" | ||
| name="passwd" | ||
| type="password" | ||
| minlength="8" | ||
| maxlength="20" | ||
| placeholder="비밀번호를 입력해주세요." |
There was a problem hiding this comment.
크으 input 프로퍼티에 무엇이 있는지 꼼꼼히 확인하신 티가 나시는군요 👍👍
input에 있는 적절한 유효성 검사 속성들을 잘 작성하셨습니다.
추가로 required도 적용해볼 수 있겠어요.
required:required는<form>내부에서 서식을 작성하지 않았을 때 브라우저에서 유저에게 피드백을 줄 수 있습니다.
| id="passwd" | ||
| name="passwd" |
There was a problem hiding this comment.
줄임말 보다는 의도를 명확히 전달해보는건 어떨까요?
| id="passwd" | |
| name="passwd" | |
| id="password" | |
| name="password" |
물론 btn, pw 등 편의를 위해서 사용되기도 하나, 명확한 클래스 이름을 사용하시는게 더욱 의도된 바를 전달하기 쉽습니다.
이는 "닌자 코드"에 해당하는 문법입니다:
약어 사용하기
팀에 한 글자 짜리 변수나 모호한 변수명을 사용하지 못하게 하는 제약이 있다면 약어를 쓰는 기지를 발휘하세요. 변수명은 짧을수록 좋으니까요.
예시:
list → lst.
userAgent → ua.
browser → brsr.
등등…
모든 걸 줄여서 당신의 코드를 읽을 가치가 있는 직감이 뛰어난 개발자만 유지보수를 담당 할 수 있게 해 놓읍시다.
위 문서는 "이렇게 해라 !"가 아니라, "이를 지양하자 !"라는 것으로 작성된 문서 내용입니다. 😊
물론 oAuth(Open Authorization), sms(Short Message Service) 와 같이 내용이 길어서 통상적으로 줄임말을 사용하는 경우도 있기는 하기에 무조건 풀 텍스트를 사용하자 라는 차원은 아님을 전달드립니다. 😊
| type="password" | ||
| minlength="8" | ||
| maxlength="20" | ||
| placeholder="비밀번호를 다시 입력해주세요." |
There was a problem hiding this comment.
오타 발견 ! 😉
| placeholder="비밀번호를 다시 입력해주세요." | |
| placeholder="비밀번호를 다시 입력해주세요." |
| header > nav { | ||
| max-width: 1920px; | ||
| height: 70px; | ||
| margin: 0 auto; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| padding: 0 200px; | ||
| } |
There was a problem hiding this comment.
(제안) header나 nav는 중복하여 사용될 수 있습니다 !
특정 스타일 적용을 위해서라면 태그보다는 클래스 ! header나 nav의 경우 문서에 여러번 사용될 수 있으므로 여기도 클래스로 바꾸는걸 제안드립니다 😊
| } | ||
| .section_text > h3, | ||
| .section_text2 > h3 { | ||
| color: #374151; |
There was a problem hiding this comment.
컬러 팔레트를 사용해보시는건 어떨까요? 🎨
컬러는 따로 선언해두시고 재사용 해보시는건 어떨까요?
컬러 팔레트는 color.css 혹은 global.css에서 정의하는게 일반적입니다 !
컬러 팔레트는 다음과 같이 정의할 수 있습니다:
* {
--primary: #6D6AFE;
--red: #FF5B56;
--black: #111322;
--white: #FFFFFF;
--gray-100: #3E3E43;
--gray-200: #9FA6B2;
--gray-300: #CCD5E3;
--gray-400: #E7EFFB;
--gray-500: #F0F6FF;
}
|
수고하셨습니다 교연님 ! 차근차근 성장해 나가시는 모습이 정말 보기 좋습니다 ! |
2 participants
요구사항
기본
심화
주요 변경사항
1차 코드리뷰 반영
스크린샷
로그인
회원가입
멘토에게
피그마의 크기대로 버튼, input 등을 구현하면 캡처 시에는 피그마와 비슷해 보이는데 실제로 화면을 보면 화면에 버튼, 글자들이 커서 화면을 꽉 채웁니다.
지금처럼 피그마에서 제공한 크기를 그대로 따라 하는 게 좋을까요? 아니면 다른 방법이 있을까요?
login.css와 signup.css 파일에 겹치는 부분이 많습니다. 그래서 저는 login.css class 이름을 그대로 쓰고 추가된 부분만 signup.css에 입력했습니다. 이렇게 css 파일에서 겹치부분이 많을 때 더 좋은 방법이 있을까요?