HTML & CSS : Login_Page 만들기

HTML & CSS

HTML & CSS : Login_Page 만들기

Brad Daeho Lee 2021. 2. 20. 16:06

HTML & CSS를 더 공부할 겸 로그인 페이지를 만들어 봤습니다. 생각보다 간단해 보이는데도 잘 구현 되지 않아서 오래걸렸지만 중요한 개념들을 배울 수 있는 시간이였습니다. 새롭게 배운것들을 정리해보겠습니다.

HTML

<body>
  <main id="main-holder">
    <h1 id="login-header">Login</h1>
    
    <div id="login-error-msg-holder">
      <p id="login-error-msg">잘못된 아이디 <span id="error-msg-second-line">비밀번호 입니다.</span></p>
    </div>
    
    <form id="login-form">
      <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">
      <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
      <input type="submit" value="Login" id="login-form-submit">
    </form>
  
  </main>
  
    

</body>

<main>

<main> 태그는 그 문서에 중요한 content를 특정시키기 위해 사용하는 태그이다. 다시말해서 <div> 태그처럼 content를 한 그룹으로 묶으는데, 그 content가 해당 페이지에서 제일 중심이 되는 내용이여야 한다. <main> 태그는 그 페이지에 하나만 있어야하고 <article>, <aside>, <header>, <nav>, <footer> 태그들 child element로 들어가면 안된다.

<input type="submit">

처음에 login button을 <button>태그를 이용해서 만들려고 했었는데 겉으로는 같게 만들 수 있겠지만 로그인 버튼의 기능을 생각했을 때 모든 form value들을 입력시키는 <input type="submit"> 태그를 사용하는게 더 적절하다. 다시말해서 같은 form 안에 있는 아이디와 비밀번호를 <input type="submit">로 submit할 수 있다.

CSS

<style>
    
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: #3a3a3a;
}

#main-holder {
  width: 50%;
  height: 70%;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: white;
  border-radius: 7px;
  box-shadow: 0px 0px 5px 2px black;
}

#login-error-msg-holder {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

#login-error-msg {
  width: 23%;
  text-align: center;
  margin: 0;
  padding: 5px;
  font-size: 12px;
  font-weight: bold;
  color: #8a0000;
  border: 1px solid #8a0000;
  background-color: #e58f8f;
  opacity: 0;
}

#error-msg-second-line {
  display: block;
}

#login-form {
  align-self: flex-start;
  display: grid;
  justify-items: center;
  align-items: center;
}

.login-form-field::placeholder {
  color: #3a3a3a;
}

.login-form-field {
  width: 100%;
  border: none;
  border-bottom: 1px solid #3a3a3a;
  margin-bottom: 10px;
  border-radius: 3px;
  outline: none;
  padding: 0px 0px 5px 5px;
}

#login-form-submit {
  width: 100%;
  padding: 7px;
  border: none;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  background-color: #3a3a3a;
  cursor: pointer;
  outline: none;
}
  </style>

height

#main-holder {
  width: 50%;
  height: 70%;
}

처음에는 위에처럼 height 값을 #main-holder안에만 적용했는데 전혀 height 값이 적용되지 않았습니다.

원하는 block안에 height값을 주기 위해서는 해당 block에 모든 parent element들에 height값을 설정해야된다. 그래서 위에 코드처럼이 아니라 밑에 코드처럼 적어야한다. 그리고 width는 height과 다르게 해당 block부터 적용하면 된다.

html, body {
  height: 100%
}

#main-holder {
  width: 50%;
  height: 70%;
}

grid

display를 grid로 주었을 때 grid 레이아웃 시스템으로 행과 열을 조정해서 쉽게 child element들을 배열할 수 있다. grid에는 여러가지 property가 있는데 상황에 맞게 사용해도 되고 필요하지 않으면 안사용해도 된다. 나는 이번에는 grid만 사용했다. 밑에 사진을 보면 grid값만 주었을 때 저절로 block안에 있는 child block들을 나누는걸 볼 수 있다.

Justify-items & align-items

두 properties에 대해서 쉽게 설명 하자면

justify-items은 가로로 child elements들을 정렬 시키는 것이고
align-items은 세로로 child elements들을 정렬 시키는 것이다.

두 properties는 grid 아이템들과 같이 자주 사용된다.

Justify-self & align-self

두 properties에 대해서 쉽게 설명 하자면

justify-self는 가로로 해당 element를 정렬시키는 것이고
align-self는 세로로 해당 element를 정렬시키는 것이다.