Conversation
| <body> | ||
| <div class="wrapper"> | ||
| <header class="header"> | ||
| <h2>로그인 또는 회원가입</h2> |
There was a problem hiding this comment.
로그인 또는 회원가입은 h1 태그로 쓰면 더 시맨틱한 태그가 될 것 같아요. :)
| <div class="input-idpw"> | ||
| <input id="id" class="input -id" placeholder="아이디" type="text" /> | ||
| <label for="id"></label> | ||
| <strong class="strong one">아이디를 입력해 주세요.</strong> |
There was a problem hiding this comment.
재웅님 코드
figma
figma하고 여기 "아이디를 입력해주세요." 경고메세지 하단 부분의 padding이 맞지 않고 아래의 input 박스하고
완전히 달라붙어 있어요. 조금만 더 늘려주시면 좋을 것 같아요.
style.css
Outdated
| padding: 6px 0 10px; | ||
| padding: 6px 0 10px; |
There was a problem hiding this comment.
여기 똑같은 padding이 두 번 들어가있어요 😃
004-login.html
Outdated
| <button class="btn-login" type="button">로그인</button> | ||
| <div class="Atag"> | ||
| <a href="#">회원가입</a> | ||
| <a href="#">|</a> |
There was a problem hiding this comment.
여기 " | " 부분까지 커서가 point 모양으로 바뀌는데 이 부분을 제외하고 a 태그에 cursor point로 주면
더 깔끔해질 것 같아요!
style.css
Outdated
| } | ||
| .header { | ||
| text-align: center; | ||
| background-image: url(./images/close.png); |
There was a problem hiding this comment.
웹접근성을 고려해서 header 태그의 X 모양 이미지의 커서가 default 로 되어있는데 cursor로 바꾸면 좋을 것 같아요.
004-login.html
Outdated
| <content class="content"> | ||
| <h2 class="welcome">위니브에서 여러분의 궁금증을 해결하세요! :)</h2> | ||
|
|
||
| <div class="input-idpw"> |
There was a problem hiding this comment.
여기 <div class="input-idpw"> 태그의 닫는 부분이 안보여요. 😭
그리고 input 태그랑 연관되는 button 태그는 시맨틱한 태그와 나중에 배우는 js submit을 고려해서
div보다는 form 태그로 묶어주면 훨씬 좋을거에요.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
참고하시면 좋을 것 같아요! 😀
There was a problem hiding this comment.
아 실수했나봐요 😂 form 으로 묶고 참고링크 확인하겠습니다 감사합니다 병민님!!
|
혹시 체크박스를 클릭할 때 마다 오른쪽에서 파란색 체크박스가 왼쪽으로 들어왔다가 |
|
완전 퍼펙트가이 같아요 |
칭찬 감사합니다 열심히 하겠습니다😊 |
강의시간에 배운 효과를 응용해보고 싶어서 사용해보았습니다! |
|
고생하셨습니다 재웅님! |
|
너무 잘하시네요!! 잘봤습니다. |
소중한 피드백 감사합니다!! 수정해보겠습니다😆 |
동수님 칭찬 너무 감사합니다😁 동수님 코드보고 많이 보고 배웠어요 감사합니다!!! |
|
|
||
| <content class="content"> | ||
| <h2 class="welcome">위니브에서 여러분의 궁금증을 해결하세요! :)</h2> | ||
| <h1 class="welcome">위니브에서 여러분의 궁금증을 해결하세요! :)</h1> |
There was a problem hiding this comment.
h1>h2>h3 순서로 사용하라고 배웠던거 같아서 찾아봤더니
순서는 상관없지만 h1은 한번만 쓰는게 좋다고 하네요!
재웅님 덕분에 하나 배워갑니다!
https://look-blog.tistory.com/5
| <form class="input-idpw"> | ||
| <input id="id" class="input -id" placeholder="아이디" type="text" /> | ||
| <label for="id"></label> | ||
| <strong class="strong one">아이디를 입력해 주세요.</strong> |
| <hr class="rectangle rec-right"></hr> | ||
| </div> | ||
| <div class="another-login"> | ||
| <form class="another-login"> |
There was a problem hiding this comment.
전송할 양식이 없을때는 디자인을 위한 div 태그를 쓰는걸 어떨까요?
| .icon-google { | ||
| cursor: pointer; | ||
| padding: 15px; | ||
| background-repeat: no-repeat; | ||
| border: 1px solid #767676; | ||
| border-radius: 5px; | ||
| background-image: url(./images/Google__G__Logo\ 1.png); | ||
| background-position: 12px; | ||
| } | ||
| .icon-facebook { | ||
| cursor: pointer; | ||
| padding: 15px; | ||
| background-repeat: no-repeat; | ||
| border: 1px solid #2d9cdb; | ||
| border-radius: 5px; | ||
| background-image: url(./images/facebook.png); | ||
| background-position: 12px; | ||
| } | ||
| .icon-naver { | ||
| cursor: pointer; | ||
| padding: 15px; | ||
| background-repeat: no-repeat; | ||
| border: 1px solid #00bf18; | ||
| border-radius: 5px; | ||
| background-position: 12px; | ||
| background-image: url(./images/naver-logo.png); | ||
| } | ||
| .icon-kakao { | ||
| cursor: pointer; | ||
| padding: 15px; | ||
| background-repeat: no-repeat; | ||
| background-position: 12px; | ||
| border: 1px solid #f2c94c; | ||
| border-radius: 5px; | ||
| background-image: url(./images/message-circle.png); | ||
| } |
There was a problem hiding this comment.
공통되는 CSS를 하나로 묶는다면 코드량도 좋고 가독성도 좋을꺼같아요!
ex)
[class^="icon"] {
cursor: pointer;
padding: 15px;
background-repeat: no-repeat;
border-radius: 5px;
background-position: 12px;
}
.icon-google {
border: 1px solid #767676;
background-image: url(./images/Google__G__Logo\ 1.png);
}
.icon-facebook {
border: 1px solid #2d9cdb;
background-image: url(./images/facebook.png);
}
.icon-naver {
border: 1px solid #00bf18;
background-image: url(./images/naver-logo.png);
}
.icon-kakao {
border: 1px solid #f2c94c;
background-image: url(./images/message-circle.png);
}
There was a problem hiding this comment.
맞아요 중복되는 코드가 좀 많았는데 얼레벌레 넘어가버렸어요..꼬집어주셔서 감사합니다!!
| height: 22px; | ||
| opacity: 0; | ||
| background: url(./images/check-box-on.png) 0 0/22px no-repeat; | ||
| transition: all 0.1s ease; |
5 participants
로그인/회원가입 첫 번째 레이아웃을 구현하였습니다.
To do