[김동한] Sprint3

userForm.css → auth.css

@@ -7,7 +7,7 @@
 	align-items: center;
 }
 
-#user_form_logo {
+.user_form_logo {
 	width: 396px;
 	height: 132px;
 	margin-bottom: 40px;
@@ -37,17 +37,26 @@
 	background-color: var(--gray100);
 	padding: 16px 24px;
 	margin: 16px 0 24px;
+	border-radius: 12px;
 }
 
-.visible_on,
-.visible_off {
+.visible_button {
 	width: 24px;
 	height: 24px;
 	position: absolute;
 	z-index: 1;
 	top: 50%;
 	right: 24px;
 	margin-top: -16px;
+	padding: 0;
+	border: none;
+	cursor: pointer;
+}
+
+.visible_on,
+.visible_off {
+	width: 100%;
+	height: 100%;
 }
 
 .login_button,
@@ -57,12 +66,19 @@
 	line-height: 32px;
 	font-weight: 600;
 	font-family: Pretendard;
-	background-color: var(--blue);
+	background-color: var(--gray400);
 	width: 100%;
 	height: 56px;
 	border-radius: 9999px;
 	border: none;
 	margin-bottom: 24px;
+	cursor: pointer;
+	transition: all 300ms ease;
+}
+
+.login_button:hover,
+.signup_button:hover {
+	background-color: var(--blue);
 }
 
 .simple_login {
@@ -73,6 +89,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 16px 23px;
+	margin-bottom: 24px;
 }
 
 .simple_login span {
@@ -99,14 +116,15 @@
 	color: var(--blue);
 }
 
-@media (max-width: 744px) {
-	#user_form_logo {
+@media (min-width: 375px) and (max-width: 767px) {
+	.user_form_logo {
 		width: unset;
 		height: 95px;
 	}
 	.userForm_main {
 		margin: 130px auto;
-		padding: 0 20px;
+		padding: 0 16px;
 		width: 100%;
+		max-width: 400px;
 	}
 }

common.css

@@ -0,0 +1,154 @@
+:root {
+	--gray900: #111827;
+	--gray800: #1f2937;
+	--gray700: #374151;
+	--gray600: #4b5563;
+	--gray500: #6b7280;
+	--gray400: #9ca3af;
+	--gray200: #e5e7eb;
+	--gray100: #f3f4f6;
+	--gray50: #f9fafb;
+	--blue: #3692ff;
+}
+
+/* Reset CSS: start - body에 폰트 추가 */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	display: block;
+}
+body {
+	line-height: 1;
+	font-family: Pretendard;
+}
+ol,
+ul {
+	list-style: none;
+}
+blockquote,
+q {
+	quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+/* Reset CSS: end */
+
+* {
+	box-sizing: border-box;
+}
+
+a {
+	text-decoration: none;
+	cursor: pointer;
+}