css

 1. display:none  <-> block

    아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨

 

2. visibility:hidden <-> visible

    보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨

 

    <form class="hidden" id="login-form">
      <input type="text" placeholder="What is your name?" />
      <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1

둘중 하나를 숨겨야하는 상황이면 둘다 숨겨라

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY, username);
  //   greeting.innerText = "hello " + username;
  paintGreetings();
}
function paintGreetings() {
  const username = localStorage.getItem(USERNAME_KEY);
  greeting.innerText = `hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  paintGreetings();
}