@@ -0,0 +1,177 @@
+@import '../../../styles/variable.scss';
+
+@mixin flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin login-input {
+  width: 266px;
+  height: 36px;
+  border: $boxBorder;
+  background-color: #fafafa;
+  color: #a4a4a4;
+  border-radius: 2px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  padding-left: 8px;
+}
+
+.Login {
+  background-color: $backGroundColor;
+
+  .main-box {
+    width: 350px;
+    height: 385px;
+    border: $boxBorder;
+    background-color: $white;
+    margin: 44px auto 10px auto;
+
+    .logo {
+      font-family: 'lobster';
+      font-size: 40px;
+      letter-spacing: -1px;
+      text-align: center;
+      margin: 40px auto;
+    }
+
+    .login-wrap {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-bottom: 8px;
+
+      .nameEmail {
+        @include login-input;
+        &:focus {
+          outline: 1px solid #a8a8a8;
+        }
+      }
+
+      .passWord {
+        @include login-input;
+        &:focus {
+          outline: 1px solid #a8a8a8;
+        }
+      }
+
+      .login-btn {
+        width: 266px;
+        height: 30px;
+        margin: 8px 0;
+        border: none;
+        border-radius: 4px;
+        background-color: $instaBlue;
+        opacity: 1;
+        color: $white;
+        font-size: 13.5px;
+        font-weight: bold;
+        cursor: pointer;
+
+        &:disabled {
+          opacity: 0.5;
+        }
+      }
+    }
+
+    .or-wrap {
+      @include flex;
+
+      .or-line {
+        width: 105px;
+        height: 1px;
+        background-color: #dbdbdb;
+        align-items: center;
+      }
+
+      .or {
+        font-size: 13px;
+        font-weight: bold;
+        color: #a8a8a8;
+        margin: 0 17px;
+      }
+    }
+
+    .facebook-login {
+      @include flex;
+      margin: 20px auto;
+      color: none;
+
+      .facebook-btn {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+      }
+
+      .facebook-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
+      }
+
+      span {
+        color: $faceBookColor;
+        font-weight: bold;
+        position: relative;
+        bottom: 2px;
+      }
+    }
+
+    .forgot-password {
+      color: $faceBookColor;
+      font-size: 12px;
+      text-align: center;
+
+      .forgot-btn {
+        color: $faceBookColor;
+        background-color: transparent;
+        cursor: pointer;
+
+        &:visited {
+          color: transparent;
+        }
+      }
+    }
+  }
+
+  .join-box {
+    width: 350px;
+    height: 60px;
+    border: 1px solid #dbdbdb;
+    background-color: $white;
+    text-align: center;
+    margin: 0 auto 20px auto;
+    @include flex;
+
+    .let-join {
+      font-size: 14px;
+
+      .signup-btn {
+        font-weight: bold;
+        color: $instaBlue;
+        background-color: transparent;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .app-down {
+    .app-down-text {
+      text-align: center;
+      font-size: 14px;
+    }
+
+    .download-image {
+      display: flex;
+      justify-content: center;
+
+      .appstore-link,
+      .googleplay-link {
+        width: 136px;
+        height: 40px;
+        margin: 20px 4px;
+      }
+    }
+  }
+}

리뷰: - nesting 해주세요.
- 또 태그를 이용한 속성 주시는 것은 지향해 주시고 className을 활용해 주세요.