diff --git a/login_yebinPark/img/Google__G__Logo 1.png b/login_yebinPark/img/Google__G__Logo 1.png
new file mode 100644
index 0000000..ee5f9cb
Binary files /dev/null and b/login_yebinPark/img/Google__G__Logo 1.png differ
diff --git a/login_yebinPark/img/check-box.svg b/login_yebinPark/img/check-box.svg
new file mode 100644
index 0000000..79a8b3b
--- /dev/null
+++ b/login_yebinPark/img/check-box.svg
@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check-box">
+<circle id="Ellipse 1" cx="11" cy="11" r="10.5" stroke="#767676"/>
+<path id="Vector" d="M15.5 8.5L10.5 14L7 10.5" stroke="#767676" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/login_yebinPark/img/checkmark.png b/login_yebinPark/img/checkmark.png
new file mode 100644
index 0000000..998433d
Binary files /dev/null and b/login_yebinPark/img/checkmark.png differ
diff --git a/login_yebinPark/img/facebook.png b/login_yebinPark/img/facebook.png
new file mode 100644
index 0000000..eef672d
Binary files /dev/null and b/login_yebinPark/img/facebook.png differ
diff --git a/login_yebinPark/img/message-circle.png b/login_yebinPark/img/message-circle.png
new file mode 100644
index 0000000..4290f90
Binary files /dev/null and b/login_yebinPark/img/message-circle.png differ
diff --git a/login_yebinPark/img/naver-logo.png b/login_yebinPark/img/naver-logo.png
new file mode 100644
index 0000000..6e8a850
Binary files /dev/null and b/login_yebinPark/img/naver-logo.png differ
diff --git a/login_yebinPark/login.css b/login_yebinPark/login.css
new file mode 100644
index 0000000..5899105
--- /dev/null
+++ b/login_yebinPark/login.css
@@ -0,0 +1,106 @@
+@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 {
+    width: 520px;
+    height: 720px;
+    border: 1px solid #C4C4C4;
+    border-radius: 10px;
+    margin: auto;
+}
+section {
+    padding-left: 24px;
+}
+section h2 {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px; /* 120% */
+    font-family: 'SpoqaHanSansNeo-Regular';
+    margin: 24px 0;
+}
+header {
+    border-bottom: 1px solid #C4C4C4;
+}
+header h3{
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+}
+.another {
+    width: 520px;
+    height: 712px;
+}
+input {
+    border: 1px solid #C4C4C4;
+    border-radius: 5px;
+    display: block;
+    width: 90%;
+    margin: 10px 0;
+    padding: 16px 15px;
+}
+
+.form {
+    padding: 24px;
+}
+
+.login {
+    color: white;
+    font-family: 'SpoqaHanSansNeo-Regular';
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 700;
+    border: #2F80ED;
+    border-radius: 5px;
+    background: #2F80ED;
+    padding: 14px;
+    display: block;
+    width: 90%;
+}
+
+
+
+/* 소셜 로그인 */
+a {
+    display: block;
+    text-decoration: none;
+    border-radius: 5px;
+    font-family: 'SpoqaHanSansNeo-Regular';
+    font-weight: 500;
+    color: #767676;
+    margin: 10px 24px;
+    background-repeat: no-repeat;
+    padding: 15px auto;
+}
+.google {
+    border: 1px solid #767676;
+    background-image: url(./img/Google__G__Logo\ 1.png);
+    background-position: 10px 50%;
+}
+.facebook {
+    border: 1px solid #2D9CDB;
+    background-image: url(./img/facebook.png);
+    background-position: 10px 50%;
+}
+.naver {
+    border: 1px solid #00BF18;
+    background-image: url(./img/naver-logo.png);
+    background-position: 10px 50%;
+}
+.kakao {
+    border: 1px solid #F2C94C;
+    background-image: url(./img/message-circle.png);
+    background-position: 10px 50%;
+}
+a span {
+    display: flex;
+    margin: 15px auto;
+    justify-content: center;
+    align-items: center;
+}
+a img {
+    margin: 11px 10px;
+}
\ No newline at end of file
diff --git a/login_yebinPark/login.html b/login_yebinPark/login.html
new file mode 100644
index 0000000..8e2ed9f
--- /dev/null
+++ b/login_yebinPark/login.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>로그인</title>
+    <link rel="stylesheet" href="./login.css">
+</head>
+<body>
+    <header>
+        <h3>로그인 또는 회원가입</h3>
+        <span class="out"></span>
+    </header>
+    <section>
+        <h2>위니브에서 여러분의 궁금증을 해결하세요! :)</h2>
+        <input>
+        <input>
+        <button class="login_state">로그인 상태 유지</button>
+        <button class="login">로그인</button>
+        <div class="join">
+            <a href="">회원가입</a>
+            <a href="">아이디/비밀번호 찾기</a>
+        </div>
+    </section>
+    <span>또는</span>
+    <div class="another">
+        <a href="" class="google">
+            <span>구글 계정으로 로그인</span>
+        </a>
+        <a href="" class="facebook">
+            <span>페이스북 계정으로 로그인</span>
+        </a>
+        <a href="" class="naver">
+            <span>네이버 계정으로 로그인</span>
+        </a>
+        <a href="" class="kakao">
+            <span>카카오톡 계정으로 로그인</span>
+        </a>
+    </div>
+</body>
+</html>
\ No newline at end of file