Sprint3/효준 #41
Sprint3/효준 #41
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
내용들이 많아지면 가독성 측면에서 이해를 위해 미디어 퀴리를 사용한 부분에 padding을 써 주는 것이 좋을까요??흥미로운 방법이네요. 유지보수를 위해 가독성을 생각하시는 모습이 참 멋집니다 ! A 방법body {
display: flex;
color: white;
padding: 0 16px;
}
@media (max-width: 1100px) {
body {
flex-direction: column;
}
}B 방법body {
display: flex;
color: white;
padding: 0 16px;
}
@media (max-width: 1100px) {
body {
display: flex; /* 명시적으로 다시 선언 */
padding: 0 16px; /* 중복 선언 */
flex-direction: column;
}
}A 방법은 코드 중복을 줄일 수 있는 장점이 있으며 미디어 쿼리와 거리가 멀 수 있으므로 가독성이 저하될 수 있을 것 같아요. 만약 코드의 거리를 가까이하여 가독성도 좋고 코드 중복을 줄이고 싶다면 nesting을 시킬 수 있을 것 같아요. body {
display: flex;
color: white;
padding: 0 16px;
@media (max-width: 1100px) {
flex-direction: column;
}
}(응용) 다음과 같이도 작성할 수 있습니다 !h1 {
background-color: aqua;
@media (min-width: 400px) {
background-color: blue;
@media screen {
@media (max-width: 800px) {
background-color: red;
}
}
}
}견해 정도로만 봐주시면 감사드리겠습니다. 🙇♂️🙇♂️
|
| Hot item | ||
| </p> | ||
| <p class="main-content-text-title"> | ||
| <h2 class="main-content-text-title"> |
There was a problem hiding this comment.
굿굿 ~! 이제 제목이란 의미를 가지게 되었군요 !
피드백 반영 좋습니다 ~! 👍👍
There was a problem hiding this comment.
너무 좋아요 ~! 이제 이미지가 깨지지 않겠군요 !
| const visibilityConfig = { | ||
| password: { | ||
| type: "text", | ||
| src: "/src/assets/icons/visibility_off_btn.svg", | ||
| alt: "비밀번호 숨기기", | ||
| }, | ||
| text: { | ||
| type: "password", | ||
| src: "/src/assets/icons/visibility_on_btn.svg", | ||
| alt: "비밀번호 보기", | ||
| }, | ||
| }; |
There was a problem hiding this comment.
오호 객체로 중앙집중화시켜서 관리를 시키고 있군요? 🤔
흥미로운 풀이 방법이네요 👍👍
| // 초기 상태 및 입력값 검증 함수 | ||
| function validateInputs() { | ||
| const inputs = parent.querySelectorAll("input"); | ||
| const allFilled = Array.from(inputs).every(input => input.value.trim() !== ""); |
There was a problem hiding this comment.
크으 ~! 모던 자바스크립트를 훌륭히 소화시키셨네요.
Array, forEach 등 메서드를 활용하여 가독성과 효율성이 좋은 코드가 되었네요 👍
| password: { | ||
| type: "text", | ||
| src: "/src/assets/icons/visibility_off_btn.svg", | ||
| alt: "비밀번호 숨기기", | ||
| }, | ||
| text: { | ||
| type: "password", | ||
| src: "/src/assets/icons/visibility_on_btn.svg", | ||
| alt: "비밀번호 보기", | ||
| }, |
There was a problem hiding this comment.
(선택/제안) password, text는 html에서 input의 type과 같아요.
어떤 설정의 의미인지를 명확히 하기 위해 다음과 같은 키네임은 어떤가요?:
| password: { | |
| type: "text", | |
| src: "/src/assets/icons/visibility_off_btn.svg", | |
| alt: "비밀번호 숨기기", | |
| }, | |
| text: { | |
| type: "password", | |
| src: "/src/assets/icons/visibility_on_btn.svg", | |
| alt: "비밀번호 보기", | |
| }, | |
| showPassword: { | |
| type: "text", | |
| src: "/src/assets/icons/visibility_off_btn.svg", | |
| alt: "비밀번호 숨기기", | |
| }, | |
| hidePassword: { | |
| type: "password", | |
| src: "/src/assets/icons/visibility_on_btn.svg", | |
| alt: "비밀번호 보기", | |
| }, |
이는 순전히 선택적 제안입니다 ! 😊
|
수고하셨습니다 효준님 ! |
2 participants
요구사항
기본
랜딩 페이지
로그인, 회원가입 페이지 공통
[심화]
주요 변경사항
sprint2 피드백 적용
스크린샷
2025-01-01.7.45.42.mov
멘토에게
반응형 작성 시 media query를 사용할 때
이런 식으로 body에서 중복되어 있는 것의 경우 다시 쓰지 않아도 되는 것을 알고 있는데
내용들이 많아지면 가독성 측면에서 이해를 위해 미디어 퀴리를 사용한 부분에 padding을 써 주는 것이 좋을까요??