인스타그램 클론 코딩 코드 리뷰(Part.1 Login-Page)

신세원·2020년 10월 31일

회고

목록 보기

6/7

HTML,CSS,Javascript를 공부하고 처음으로 클론 코딩이란걸 해보았다.
클론 코딩 대상은 '인스타그램' 주제는 로그인,메인 홈페이지이다.
작업 기간은 대략 일주일 작업 포커스는 다음과 같이 설정하였다.

HTML,CSS를 활용하여 최대한 똑같이 클론한다.
javascript로 구현 사항을 설정하여 동적 기능까지 구현한다.

로그인 페이지를 만드는 일은 생각보다 어렵지 않았다.
HTML과 CSS를 사용하여 간단하게 만들고, Javascript로 간단한 기능 한가지만 구현하였다.

Github:https://github.com/shinsewon/instagram/tree/master/sewonshin

아직 깃허브 사용법이 익숙치 않아 몇번의 시행착오를 겪고, 겨우 커밋했다...
(맨 처음엔 커밋 메시지 정성 스럽게 쓰다가 안되고 안되다가 막 쓴 내용이 커밋 된건 안비밀..)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>repl.it</title>
    <link href="styles/common.css" rel="stylesheet" type="text/css" />
    <link href="styles/login.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="main-container">
      <header class="logo">
        <div>
          <img class="logoPicture" src="img/logo_text.png" alt="인스타 로고" />
        </div>
      </header>
      <contant class="login-container">
        <input
          type="id"
          class="id"
          placeholder="전화번호,사용자 이름 또는 이메일"
        />
        <input type="password" class="password" placeholder="비밀번호" />
        <button class="loginBtn">로그인</button>
      </contant>
      <footer>비밀번호를 잊으셨나요 ?</footer>
    </div>
    <script src="js/login.js"></script>
  </body>
</html>

* {
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
}
.main-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: wrap;
  width: 350px;
  height: 380px;
  margin: 200px auto;
  background-color: #fff;
  border: 1px solid #dbdbdb;
}
.logo {
  text-align: center;
}

.logoPicture {
  margin: 35px 0;
}

.login-container input {
  display: block;
  width: 270px;
  height: 36px;
  padding: 8px;
  color: rgba(var(--i1d, 38, 38, 38), 1);
  font-family: -apple-;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
}
.loginBtn {
  width: 268px;
  height: 30px;
  margin: 15px;
  background-color: #b9dffc;
  color: white;
  border: none;
  border-radius: 5px;
}

h1 {
  font-size: 50px;
  font-color: red;
}

input {
  margin: 3px auto;
  background-color: #fafafa;
  font-size: 12px;
}

footer {
  position: relative;
  top: 65px;
  color: rgba(var(--fe0, 0, 55, 107), 1);
  font-size: 12px;
  text-align: center;
}


const loginButton = document.querySelector(".loginBtn");

loginButton.addEventListener("click", function () {
  const loginId = document.querySelector(".id").value;
  const loginPassword = document.querySelector(".password").value;

  loginId && loginPassword
    ? (document.querySelector(".loginBtn").style.backgroundColor = "blue")
    : 0;
});

전반적 리뷰 🔥

전반적으로 html,css어렵지 않은 작업이었다. (총 소요시간 2시간)
무분별한 div 태그의 사용보다는 의미있는 시맨틱 태그를 사용하였다.
javascript 동적 구현 기능으로는 '로그인 버튼'과 '비밀번호 버튼'이 입력 될 시 로그인 버튼이 활성화 되어 로그인 버튼 색상이 변하는 기능을 구현하였다.
삼항 연산자를 사용하여 코드량을 줄여 가독성을 높였다.