구현 과제 - 로그인/회원가입 모달 - 모건 by redcontroller · Pull Request #23 · FRONTENDSCHOOL7/CodeReviewStudy

redcontroller · 2023-07-31T15:50:34Z

로그인/회원가입 첫 번째 레이아웃을 구현하였습니다.

To do

체크 박스 커스터마이징
로그인/비밀번호 Input border 수정
CSS Spice 기법 적용
max-height 기준 미디어 쿼리 적용

merrybmc

모건님 첫 pr을 올리신걸 축하드려요. 🎉🎉👍👍👍

앞으로도 저희 열심히 해봐요. 😊

merrybmc · 2023-08-01T08:54:05Z

login-modal/style.css

+section {
+    max-width: 520px;
+    margin: auto auto;


피그마의 모달과 웹에 보여지는 너비값이 서로 차이가 있어요.
max-width 대신 width를 넣으면 피그마와 똑같은 너비로 보이고 모달이라 고정값을 주셔도 괜찮을 것 같아요. 😀

🙋‍♀️ Q. 반응형을 고려하여 max-width 값을 넣어주신 것인지도 궁금해요.

🤔코드 작성 의도는 반응형을 고려해서 화면이 줄어들어도,
모달이 화면을 넘어가지 않고 너비가 줄어드는 것이 목표였습니다.

병민님 말씀처럼 width 값를 주어도 body 에 display: flex; 속성이 있어서 문제 없이 잘 보여지네요 ! 😁
감사합니다 🙌

merrybmc · 2023-08-01T08:57:31Z

login-modal/style.css

+.header button {
+    width: 16px;
+    height: 16px;
+    margin-right: 24px;
+    right: 0;
+    background: url(./images/close.png) 0 0 no-repeat;
+    background-size: cover;
+    position: absolute;
+}


웹접근성을 고려해서 사용자가 X가 클릭할 수 있는 버튼이란걸 알 수 있게 커서를 포인터로 변경해주면 더 좋을 것 같아요 :)

와우, 꼭 필요한 기능이네요. 😍
확인하지 못했던 부분이었는데, 닫기(X) 버튼에 cursor: pointer; 적용했습니다! 👍
감사합니다!

merrybmc · 2023-08-01T08:58:20Z

login-modal/style.css

+.header button:hover {
+    background-color: rgb(239, 237, 237, 0.8);
+}
+
+.header button:focus {
+    background-color: rgb(211, 211, 211, 0.8);
+    /* box-shadow: inset 0 0px 2px 0 black; */
+}


X 버튼에 hover나 focus가 되면 배경색이 약간 회색으로 바뀌게 구현을 해주셨네요.
웹접근성을 고려해서 구현하신건지 궁금해요. 😮

네, 시각적으로 닫기 버튼을 활성화하고 눌렸다는 걸 인식해주려고 색을 넣었습니다. 👍
병민님께서 코멘트 해주신 cursor: pointer; 를 적용해서 더욱 강력해 졌네요 🔥
구글 크롬 최소화 최대화를 보고 참고 했습니다.

merrybmc · 2023-08-01T09:01:48Z

login-modal/style.css

+.form .input {
+    /* width: 472px; */
+    width: 100%;
+    height: 50px;
+    color: #767676;
+    padding-left: 16px;
+    background-color: #fff;
+    border: 2px solid #F4492E;
+    border-radius: 5px;
+    box-sizing: border-box;
+}


input border의 컬러가 기본적으로 빨간색인데 input의 기본 값도 함께 보여줄 수 있게 input에 focus가 되었을 때나
버튼을 클릭했을 때 border의 색상이 바뀌면 피그마의 요구사항에 더 가까워질 수 있을 것 같아요.
( 버튼 클릭이나 focus가 되었을 때 input 하단의 경고 메세지도 함께 출력되도록 하면 더 best일 것 같아요. 👍 )

아래 처럼 input 에 상호작용 하는 효과를 넣었습니다. 🤔

input:hover > border 빨강색 변화

input:focus > border 파란색 변화
버튼 클릭이나 focus 시에 적용하는 방법은 다른 분들꺼 참고해서 적용해보겠습니다 ! 😊👌

merrybmc · 2023-08-01T09:03:46Z

login-modal/style.css

+.form .member {
+    width: 472px;
+    width: 100%;
+    height: 50px;
+    font-size: 18px;
+    font-weight: 700;
+    margin: 20px 0;
+    color: #fff;
+    border: none;
+    background-color: #2F80ED;
+}


웹접근성을 고려해서 button에 마우스를 올렸을 때 사용자가 클릭할 수 있다는걸 알 수 있도록 포인터 커서를
적용해주면 좋을 것 같아요. 😊

아참, 이 부분도 확인하지 않고 넘어갔던 부분인데 꼼꼼하게 봐주셔서 감사해요! 🤣😍

merrybmc · 2023-08-01T09:06:48Z

login-modal/style.css

+.normal-login>div>a:nth-child(1)::after {
+    content: "|";
+    margin-left: 12px;
+}


회원가입과 아이디/비밀번호 찾기 사이에 있는 | 부분에도 cursor가 포인터로 적용되고 있어요.
이 부분에 cursor를 default로 줘도 되지만 회원가입 부분의 포인터가 컨텐츠 만큼 차지하는게 아니라서
영역 값도 조절해주면 좋을 것 같아요. 👍

오.... 정말 마우스를 hover 했을 때 전부 cursor: pointer; 로 되어 있으니,
회원가입인지, 아이디/비밀번호 찾기인지 구분이 안되네요 😂

'|' 를 position: absolute; 로 영역을 차지 않도록 해서 회원가입과 영역을 분리했습니다.
'|' 에는 cursor:default; 속성으로 :hover 시 포인터 변화를 없앴습니다. 😁
도움이 많이 되네요 😍 감사합니다!

merrybmc · 2023-08-01T09:11:54Z

login-modal/style.css

+/* ~ 최대 765px 까지 스타일 적용 */
+@media (max-height: 765px) {
+    .section {
+        max-width: 100vw;
+        width: 90vw;
+    }
+    .form {
+        display: grid;
+        grid-template-areas:
+        "id pw lg lg"
+        "idt pwt lb ch"
+        ;
+        /* grid-template-columns: 1fr 1fr 1fr; */
+        grid-template-columns: 1fr 1fr 0.2fr 1fr;
+    }
+    .normal-login .form > #input-id {
+        width: 95%;
+        grid-area: id;
+    }
+    .normal-login .form > .id-alert {
+        grid-area: idt;
+    }
+    .normal-login .form > #input-pw {
+        width: 95%;
+        grid-area: pw;
+    }
+    .normal-login .form > .pw-alert {
+        grid-area: pwt;
+    }
+    .normal-login .form>.member {
+        width: 90%;
+        height: 90%;
+        grid-area: lg;
+        margin: auto auto;
+    }
+    .normal-login .form > .input-hold.hide {
+        grid-area: lb;
+    }
+    .normal-login .form > .label-hold {
+        grid-area: ch;
+    }
+    .sns-login .sns-group {
+        width: 100%;
+        flex-direction: row;
+        justify-content: space-between;
+        /* flex-wrap: wrap; */
+    }
+}


grid를 사용하시고 반응형까지 구현해주셨네요. 😮😮😮
레이아웃이 엄청 깔끔하고 엄청 이뻐요. 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

세로로 창줄여보면서 오오..하면서 늘렸다 줄였다 했어요...대박👍

merrybmc · 2023-08-01T09:27:09Z

login-modal/index.html

+                <form class="form">
+                    <label class="a11y-hidden" for="input-id">아이디</label>
+                    <input class="input" id="input-id" type="text" placeholder="아이디">
+                    <p class="id-alert">아이디를 입력해주세요</p>
+                    <label class="pw a11y-hidden" for="input-pw">비밀번호</label>


웹접근성을 고려해서 a11y-hidden으로 텍스트를 넣어주신 것도 엄청 잘해주셨네요 👍👍👍

AYFG · 2023-08-02T11:28:25Z

섬세한 노력이 보이는 코드였습니다!! calc, media쿼리 등 제게는 익숙하지 않은 css들이 많아서 공부하기 좋았습니다 공유해주셔서 감사해요 모건님!!

[#11] 로그인/회원가입 모달 레이아웃 구현

7421ef7

redcontroller added 리뷰요청 구현완료 과제 HTML/CSS labels Jul 31, 2023

merrybmc reviewed Aug 1, 2023

View reviewed changes

[#11] 웹접근성관련 수정사항 반영

61b23f9

redcontroller added 피드백 반영중 and removed 구현완료 labels Aug 1, 2023

[#11] 반응형 경고문구 적용

9e1a287

redcontroller added 구현완료 and removed 피드백 반영중 labels Aug 1, 2023

merrybmc added 피드백 반영완료 and removed 과제 labels Aug 2, 2023

redcontroller removed the 리뷰요청 label Aug 7, 2023

Conversation

redcontroller commented Jul 31, 2023

To do

Uh oh!

merrybmc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

merrybmc Aug 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

merrybmc Aug 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

merrybmc Aug 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

redcontroller Aug 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AYFG commented Aug 2, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

merrybmc Aug 1, 2023 •

edited

Loading

merrybmc Aug 1, 2023 •

edited

Loading

merrybmc Aug 1, 2023 •

edited

Loading

redcontroller Aug 1, 2023 •

edited

Loading