diff --git a/css/login.css b/css/login.css
new file mode 100644
index 0000000..d680a8d
--- /dev/null
+++ b/css/login.css
@@ -0,0 +1,255 @@
+@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
+
+/* **************** 초기설정 **************** */
+
+body {
+ font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+ background-color: #F2F2F2;
+ position:absolute;
+ top:50%;
+ left:50%;
+ transform:translate(-50%,-50%);
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+button:enabled {
+ cursor: pointer;
+}
+
+img {
+ vertical-align: top;
+}
+
+.a11y-hidden {
+ clip: rect(1px, 1px, 1px, 1px);
+ clip-path: inset(50%);
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+}
+
+/* **************** container **************** */
+.container {
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ width: 520px;
+ border-radius: 10px;
+ border: 1px solid #C4C4C4;
+ background: #FFF;
+}
+
+/* **************** header - 제목 **************** */
+header {
+ position: relative;
+ margin: 0 24px;
+}
+
+header h1 {
+ text-align: center;
+ margin: 20px 0;
+ font-weight: 500;
+ font-size: 16px;
+}
+
+header .close-btn {
+ position: absolute;
+ background: none;
+ border: none;
+ right: 12px;
+ top: 50%;
+ transform: translate(50%, -50%);
+}
+
+.close-btn img {
+ width: 16px;
+ height: 16px;
+}
+
+.underline {
+ width: 100%;
+ height: 1px;
+ flex-shrink: 0;
+ background-color: #C4C4C4;
+}
+
+/* **************** main - 본문 **************** */
+main {
+ margin: 0 24px;
+}
+main h2 {
+ margin: 26px 0;
+ line-height: 24px;
+ font-weight: 500;
+ font-size: 20px;
+}
+
+/* **************** 로그인 폼 **************** */
+.login-form {
+ color: #767676;
+ display: flex;
+ flex-direction: column;
+}
+
+.login-insert {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.login-insert input {
+ width: 472px;
+ height: 50px;
+ border: 1px solid #C4C4C4;
+ border-radius: 5px;
+ padding: 15px 16px;
+ font-size: 16px;
+}
+
+.warning-id, .warning-match {
+ margin: 6px 0 10px 4px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #F4492E;
+}
+
+.login-hold {
+ display: flex;
+ margin-top: 17px;
+}
+
+.login-hold label {
+ margin-left: 8px;
+ cursor: pointer;
+}
+
+
+/* 체크하기 전 상태 */
+input#login-hold+label:before{
+ content: '';
+ display: inline-block;
+ width: 22px;
+ height: 22px;
+ background-image: url('../images/checkbox.svg');
+ vertical-align: middle;
+ margin-right: 8px;
+}
+
+/* 체크 된 상태 */
+input#login-hold:checked+label:before{
+ content: '';
+ background-image: url('../images/checkedbox.svg');
+ background-repeat: no-repeat;
+ background-position: 50%;
+}
+
+.login-btn {
+ width: 472px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+.login-form button {
+ font-size: 18px;
+ font-weight: 700;
+ margin: 20px 0;
+ border: none;
+ background: #2F80ED;
+ color: #FFF;
+}
+
+.href-group {
+ margin: 0 auto 10px auto;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.href-group span {
+ margin: 0 12px;
+}
+
+.href-group a:hover {
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+/* 구분선 */
+.divider {
+ position: relative;
+ margin: 20px 0px;
+ text-align: center;
+ color: #767676;
+}
+
+.divider::after{
+ content: "";
+ height: 1px;
+ width: 100%;
+ background-color: #C4C4C4;
+ position: absolute;
+ top: 0.5em;
+ left: 0;
+}
+
+.divider span {
+ font-size: 14px;
+ padding: 0 10px;
+ background-color: #FFF;
+ z-index: 2;
+ position: relative;
+}
+
+/* **************** sns 로그인 **************** */
+.btn-group {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-bottom: 25px;
+
+}
+.sns-login {
+ background: #FFF;
+ background: none;
+ border: 1px solid #767676;
+ color: #767676;
+}
+
+.login-btn img {
+ width: 28px;
+ height: 28px;
+ margin-left: 12px;
+}
+
+.login-btn span {
+ margin: auto;
+ font-size: 16px;
+}
+
+.login-btn:hover {
+ font-weight: 600;
+ border-width: 3px;
+}
+
+.fb-btn {
+ border: 1px solid #2D9CDB;
+}
+
+.nv-btn {
+ border: 1px solid #00BF18;
+}
+
+.kt-btn {
+ border: 1px solid #F2C94C;
+}
+
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..bd3a11b
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,63 @@
+/* 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;
+}
+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;
+}
+
+body,
+h1,
+h2,
+div,
+p,
+button,
+input,
+label,
+span,
+a {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 0000000..a45f085
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/Google__G__Logo 1.png b/images/Google__G__Logo 1.png
new file mode 100644
index 0000000..eb118c0
Binary files /dev/null and b/images/Google__G__Logo 1.png differ
diff --git a/images/checkbox.svg b/images/checkbox.svg
new file mode 100644
index 0000000..b411bd9
--- /dev/null
+++ b/images/checkbox.svg
@@ -0,0 +1,19 @@
+
diff --git a/images/checkedbox.svg b/images/checkedbox.svg
new file mode 100644
index 0000000..1ff08f0
--- /dev/null
+++ b/images/checkedbox.svg
@@ -0,0 +1,17 @@
+
diff --git a/images/close.svg b/images/close.svg
new file mode 100644
index 0000000..0f5d2e2
--- /dev/null
+++ b/images/close.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/images/facebook.png b/images/facebook.png
new file mode 100644
index 0000000..640f844
Binary files /dev/null and b/images/facebook.png differ
diff --git a/images/message-circle.png b/images/message-circle.png
new file mode 100644
index 0000000..c9e2549
Binary files /dev/null and b/images/message-circle.png differ
diff --git a/images/naver-logo.png b/images/naver-logo.png
new file mode 100644
index 0000000..386818c
Binary files /dev/null and b/images/naver-logo.png differ
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..3127b29
--- /dev/null
+++ b/login.html
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 로그인 또는 회원가입
+
+
+
+
+
+
+ 위니브에서 여러분의 궁금증을 해결하세요! :)
+
+
+
+
+
+ 또는
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+