인스타 클론 (로그인 페이지)

HTML

• button 태그를 비활성화시키기 위해 disabled='disabled' 속성을 이용함. (활성화시킬때는 disabled=false가 되도록 한다.)

<div class="container">
      <header><img src="/img/logo_text.png" class="logo"></header>
      <form>
        <input class="id" type="text" placeholder="전화번호 사용자 이름 또는 이메일" />
        <input class="password" type="password" placeholder="비밀번호" />
        <button class="button" disabled='disabled'>로그인</button>
      </form>
      <div class="link"><a href="#" >비밀번호를 잊으셨나요?</a></div>

CSS

flex를 사용하지 않았을때

• margin :0 auto;로 중앙정렬을 하는데,
  inline속성의 태그(ex.span, img)에서는 중앙정렬이 되지않았다. 이때 display:block을 해주면 된다.

  • margin:0 auto 로 중앙정렬이 되지 않는 경우
    1) DocType 선언 문제

    <!DocType~~> 앞에는 어떤 문자도 선행되어서는 안되며 선언 또한 정확해야 한다.

    2) width
    폭의 연산이 불가능하면 가운데 정렬을 할 수 없다. 해결책은 overflow:hidden;
    3) inline속성의 태그:display:block을 해주면 된다

• input, button태그도 display:block으로 바꿈

• a태그 가운데정렬은 div와 같은 block요소의 태그로 감싸고 text-align으로 조정한다.

.logo {
    width: 178px;
    height: 53px;
    display: block;
    margin: 0 auto;
    /* inline 속성의 태그에서는 적용되지않기때문에 먼저 display:block으로 설정한다 .*/
}

.link {
    text-align: center;
    /*a태그 가운데정렬:block요소의 태그를 감싸고 text-align으로 조정한다*/
    font-size: 12px;
}

flex를 사용했을때

inline요소들을 각각 block으로 바꾸지않아도 부모박스에서 수직,수평 방향만 정해주면되서 좀 더 편리했음!

body {
    display: flex;
    justify-content: center;
}
.container {
    width: 350px;
    height: 380px;
    margin-top: 80px;
    border: 1px solid #DBDBDB;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form {
    display: flex;
    flex-direction: column;
    padding-top: 24px;
}

자바스크립트

id, pw 에 각각 한 글자 이상 쓰면 버튼이 활성화 되면서 버튼색깔이 바뀌는 이벤트를 만들었다

const button = document.querySelector(".button");
const id = document.querySelector(".id");
const password = document.querySelector(".password");
const form = document.querySelector("form")

function loginEvent(e) {
  if (password.value.length > 0 && id.value.length > 0) {
    button.disabled = false;
    button.style.backgroundColor = "#0095F6";
    button.style.cursor = "pointer";
  } else {
    button.disabled = true;
    button.style.backgroundColor = "#B9DFFC";
    button.style.cursor = "default";
  }
}

form.addEventListener("keyup", loginEvent);