구현 과제 - 로그인/회원가입 모달 - 예진

css/common.css

@@ -0,0 +1,62 @@
+/* Reset CSS */
+body {
+  margin: unset;
+}
+ul {
+  padding: unset;
+  margin: unset;
+  list-style: none;
+}
+h1,
+p {
+  margin: unset;
+  font: unset;
+}
+a {
+  color: unset;
+  text-decoration: unset;
+  outline: unset;
+}
+input {
+  padding: unset;
+}
+button {
+  font: inherit;
+  border: none;
+  background: none;
+  padding: unset;
+  cursor: pointer;
+}
+
+img {
+  vertical-align: top;
+}
+
+fieldset {
+  margin: unset;
+  border: unset;
+  padding: unset;
+}
+
+/* CSS */
+@font-face {
+  font-family: "SpoqaHanSansNeo-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  background: #f2f2f2;
+  font-family: "SpoqaHanSansNeo-Regular";
+}
+
+.a11y-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: polygon(0 0, 0 0, 0 0);
+}

css/index.css

@@ -0,0 +1,40 @@
+/* CSS */
+
+.container {
+  min-width: 0;
+  max-width: 500px;
+  padding: 30px;
+  margin: 280px auto 0;
+  border: 1px solid #c4c4c4;
+  border-radius: 5px;
+
+  background: #fff;
+
+  text-align: center;
+}
+
+.header {
+  margin-bottom: 28px;
+}
+.text {
+  margin-bottom: 32px;
+}
+
+.login-button {
+  display: block;
+
+  padding: 17px 0 15px;
+
+  border-radius: 5px;
+  background: #2f80ed;
+
+  color: #fff;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.login-button:hover,
+.login-button:focus-visible {
+  outline: 3px solid #2668be;
+  outline-offset: 1px;
+}

css/login.css

@@ -0,0 +1,246 @@
+body {
+  display: flex;
+  height: 100vh;
+}
+
+.login-container {
+  position: relative;
+
+  min-width: 0;
+  width: 520px;
+  margin: auto;
+
+  border: 1px solid #c4c4c4;
+  border-radius: 10px;
+
+  background: #fff;
+}
+
+/* 로그인 헤더 */
+.login-header {
+  padding: 20px 0 18px;
+  border-bottom: 1px solid #c4c4c4;
+
+  text-align: center;
+  font-weight: 500;
+}
+
+/* 로그인 메인 */
+.login-main {
+  padding: 26px 24px 30px;
+}
+.login-main > p {
+  font-size: 20px;
+  font-weight: 500;
+  margin-bottom: 24px;
+}
+
+/* 아이디,비밀번호 input */
+.login-input-group {
+  margin: 10px 0 16px;
+}
+.login-input {
+  width: 100%;
+  padding: 15px 16px;
+
+  border: 1px solid #c4c4c4;
+  border-radius: 5px;
+
+  font-size: 16px;
+
+  box-sizing: border-box;
+}
+
+/* 아이디,비밀번호 경고 */
+[class^="warnning"] {
+  display: none;
+
+  color: #f4492e;
+  font-size: 14px;
+  font-weight: 400;
+}
+.warnning-id {
+  margin: 6px 0 0 4px;
+}
+.warnning-user {
+  margin: 10px 0 0 4px;
+}
+
+/* 로그인 상태 유지 */
+.login-state {
+  margin: 0 0 20px 4px;
+
+  color: #767676;
+  font-weight: 500;
+}
+
+/* 로그인 상태 유지 체크박스 */
+.login-state label {
+  cursor: pointer;
+}
+.login-state input[type="checkbox"] + label::before,
+.login-state input[type="checkbox"]:checked + label:before {
+  content: "";
+
+  display: inline-block;
+
+  width: 22px;
+  height: 22px;
+  margin-right: 8px;
+
+  background-repeat: no-repeat;
+  background-position: 50%;
+
+  vertical-align: bottom;
+}
+.login-state input[type="checkbox"] + label:before {
+  background-image: url("../imgs/login-checkbox.svg");
+}
+.login-state input[type="checkbox"]:checked + label:before {
+  background-image: url("../imgs/login-checked.svg");
+}
+
+/* focus-visible */
+.login-state input[type="checkbox"]:focus-visible + label::before {
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #2668be;
+}
+.login-state input[type="checkbox"]:focus-visible:checked + label:before {
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #10315c;
+}
+
+/* 로그인 버튼 */
+.login-button {
+  width: 100%;
+  padding: 14px 0;
+  margin-bottom: 20px;
+
+  border-radius: 5px;
+  background: #2f80ed;
+
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+}
+.login-button:hover,
+.login-button:focus-visible {
+  outline: 3px solid #2668be;
+  outline-offset: 1px;
+}
+
+/* 회원가입,아이디/비밀번호 찾기 */
+.find-user-button-box {
+  text-align: center;
+}
+.find-user-button-box a {
+  color: #767676;
+  font-size: 14px;
+}
+.find-user-button-box span {
+  display: inline-block;
+  color: #767676;
+  margin: 0 12px;
+}
+.find-user-button-box a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.find-user-button-box a:focus-visible {
+  outline: 2px solid #767676;
+  outline-offset: 2px;
+}
+
+/* 또는 */
+.br {
+  display: flex;
+  gap: 13px;
+  align-items: center;
+  justify-content: center;
+  color: #767676;
+  font-size: 14px;
+}
+.br::before,
+.br::after {
+  content: "";
+  display: inline-block;
+  background-color: #c4c4c4;
+  width: 210px;
+  height: 1px;
+}
+
+/* social login */
+.social-login-container {
+  padding: 19px 24px 25px;
+}
+
+.social-login-group li:not(:last-of-type) {
+  margin-bottom: 10px;
+}
+
+.social-login-button {
+  display: block;
+
+  padding: 15px 0;
+  border-radius: 5px;
+
+  color: #767676;
+  text-align: center;
+
+  background-repeat: no-repeat;
+  background-size: 28px;
+  background-position: 12px center;
+}
+.google {
+  border: 1px solid #767676;
+  background-image: url(../imgs/google.svg);
+}
+.facebook {
+  border: 1px solid #2d9cdb;
+  background-image: url(../imgs/facebook.svg);
+}
+.naver {
+  border: 1px solid #00bf18;
+  background-image: url(../imgs/naver.svg);
+}
+.kakao {
+  border: 1px solid #f2c94c;
+  background-image: url(../imgs/kakao.svg);
+}
+
+.google:hover,
+.google:focus-visible {
+  outline: 3px solid #767676;
+  outline-offset: 1px;
+}
+.facebook:hover,
+.facebook:focus-visible {
+  outline: 3px solid #2d9cdb;
+  outline-offset: 1px;
+}
+.naver:hover,
+.naver:focus-visible {
+  outline: 3px solid #00bf18;
+  outline-offset: 1px;
+}
+.kakao:hover,
+.kakao:focus-visible {
+  outline: 3px solid #f2c94c;
+  outline-offset: 1px;
+}
+
+/* 로그인 닫기 버튼 위치 */
+.login-close-button {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+
+  padding: 12px 14px;
+}
+.login-close-button:focus-visible {
+  outline: 2px solid gray;
+  outline-offset: 2px;
+}
+.login-close-button img {
+  vertical-align: middle;
+}