구현 과제 - 로그인/회원가입 모달 - 윤상 by kys0417 · Pull Request #20 · FRONTENDSCHOOL7/CodeReviewStudy

kys0417 · 2023-07-31T10:42:29Z

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

TODO
header 텍스트 + 닫기 버튼 정렬

AYFG · 2023-07-31T12:15:32Z

안녕하세요 윤상님!! 올려주신 코드 잘보았습니다! head 텍스트에 대해서 제 방식대로 해보았습니다
먼저 h1 태그의 닫는 태그가 img와 같이 붙어있어서

<header class="header">
        <h1 class="title">로그인 또는 회원가입</h1>
        <img src="./img/close.svg" alt="닫기" />
      </header>

이렇게 텍스트와 이미지를 따로 분류했습니다

CSS

.header {
  display: flex;
  /* box-sizing: border-box; */
  border-bottom: 1px solid var(--border-color);
  /* text-align: center; */
  justify-content: center;
  position: relative;
}
.header img {
  /* float: right; */
  width: 16px;
  /* padding: 5px 24px 5px 0; */
  position: absolute;
  right: 24px;
  top: 22px;
}

그리고 header 에게 display:flex를 주어서 같은 선상에 텍스트와 이미지를 두었고, justify-content를 주어 가운데에 요소들을 배치했습니다.
header에게 position:relative를 주고 header img 에게 position:absolute를 주어 img가 body로 안나가게 해주었습니다.
그리고 피그마의 교안의 픽셀값을 보고 그대로 right와 top의 픽셀값을 주어 맞추어서 정렬해보았습니다

AYFG · 2023-07-31T12:19:35Z

.section1 .label-check-box::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 5px;
  left: 8px;
  top: 8px;
  border-left: 1px solid var(--text-color);
  border-bottom: 1px solid var(--text-color);
  transform: rotate(-45deg);
}

체크박스 디자인을 직접 만드신 부분 정말 대단하십니다...
:root에 색들을 정해줘서 유지보수에 신경쓰신 부분도 인상깊었습니다!! 많이 배웠어요
공유해주셔서 감사합니당😊

YennieJ · 2023-07-31T13:31:47Z

calss 이름, 코드 모두 정말 깔끔하고 가독성이 좋았습니다 👍👍

kys0417 · 2023-07-31T13:36:27Z

체크박스 디자인을 직접 만드신 부분 정말 대단하십니다... :root에 색들을 정해줘서 유지보수에 신경쓰신 부분도 인상깊었습니다!! 많이 배웠어요 공유해주셔서 감사합니당😊

조언과 리뷰 감사합니다! background image로도 해보고 img로도 해보고 많이 고민했었는데 position방법이 있었네요.. 피드백 덕분에 수정하여 완성하였습니다!

merrybmc

html이랑 css 쭉 위에서부터 순서대로 읽어봤는데 가독성도 짱 좋고 시맨틱태그까지
완벽하게 구현 해주셨네요. 여기 또 숨은 고수 한 분을 찾아냈네요. 😀👍👍

merrybmc · 2023-07-31T15:41:50Z

modal.css

 :root {
  --text-color: #767676;
+  --title-color: black;
  --border-color: #c4c4c4;
  --warn-color: #f4492e;
  --button-color: #2f80ed;


css 커스텀 속성을 쓰셔서 구현하시는 분은 처음 봤어요 😮
이 모달에만 해도 중복되는 것도 사실 많아서 확실히 나중에 유지보수하기 좋을 것 같아요!

좋은 리뷰 감사합니다!!

YennieJ · 2023-07-31T13:33:42Z

modal.html

+          <input class="input-id" id="input-id" type="text" placeholder="아이디">
+          <label for="input-id" class="warn-id">아이디를 입력해 주세요.</label>
+          <input class="input-pw" id="input-pw" type="text" placeholder="비밀번호">
+          <label for="input-pw" class="warn-pw">아이디 혹은 비밀번호가 일치하지 않습니다.</label>


label 태그의 의미를 다시 생각해 보는건 어떨까요?
경고문이니, 첫 화면일땐 보이지 않을텐데 글자를 클릭하니 input으로 커서가 가져요!
혹시 의도하신걸가요? 1타2피?

의도한건 아니고 별 생각 없이 label태그 쓰는 김에 경고문도 넣으면 되겠다 라고만 생각했습니다 ㅋㅋㅋ.. 클릭하면 input으로 focus가지는건 생각못해봤네요

그러면 밑에 p태그로 경고문을 작성하는 것이 나을까요?

다른 분은 stong으로 작성하셨더라구요!
저는 p로 했는데 strong도 좋을꺼같아여! ㅎㅎ

YennieJ · 2023-07-31T13:34:10Z

modal.css

+  --border-color: #c4c4c4;
+  --warn-color: #f4492e;
+  --button-color: #2f80ed;
+}


오호 :root 까지 👍

YennieJ · 2023-07-31T13:34:55Z

modal.css

+.section2::before {
+  position: absolute;
+  content: "또는";
+  padding: 0 13px;
+  background-color: white;
+  font-size: 14px;
+  top: -10px;
+  left: calc(50% - 26px);
+}


생각지도 못한 새로운 방법이었어요!👍

YennieJ · 2023-07-31T13:35:37Z

modal.css

+[class^="portal-login"] {
+  display: block;
+  border-radius: 5px;
+  background: #fff;
+  padding: 11px 0;
+  text-align: center;
+  font-weight: 500;
+}
+.google {
+  background: url("./img/Google__G__Logo\ 1.svg") no-repeat 12px center;
+  border: 1px solid #767676;
+}
+.facebook {
+  background: url("./img/facebook.svg") no-repeat 12px center;
+  border: 1px solid #2d9cdb;
+}
+.naver {
+  background: url("./img/naver-logo.svg") no-repeat 12px center;
+  border: 1px solid #00bf18;
+}
+.kakao {
+  background: url("./img/message-circle.svg") no-repeat 12px center;
+  border: 1px solid #f2c94c;
+}


제가 찾던 방법이에요! 정말 도움이 많이 되었습니다!! 감사합니다.👍

[#11] 로그인/회원가입 모달

6578987

merrybmc changed the title ~~[#11] 로그인/회원가입 모달~~ 구현 과제 - 로그인/회원가입 모달 - 윤상 Jul 31, 2023

merrybmc assigned kys0417 Jul 31, 2023

merrybmc added 도와주세요 구현중 과제 HTML/CSS labels Jul 31, 2023

[#11] header 텍스트, 이미지 정렬 수정 + css변수 추가

2d05db1

kys0417 added 리뷰요청 피드백 반영완료 구현완료 and removed 도와주세요 구현중 labels Jul 31, 2023

merrybmc reviewed Jul 31, 2023

View reviewed changes

YennieJ reviewed Aug 1, 2023

View reviewed changes

merrybmc removed the 과제 label Aug 2, 2023

[#11] warn 표시 label -> strong 수정

af9227f

Conversation

kys0417 commented Jul 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

AYFG commented Jul 31, 2023

Uh oh!

AYFG commented Jul 31, 2023

Uh oh!

YennieJ commented Jul 31, 2023

Uh oh!

kys0417 commented Jul 31, 2023

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kys0417 commented Jul 31, 2023 •

edited

Loading