[Mission 1]로그인 페이지 레이아웃

정세영·2022년 8월 1일
0

[Project] JUSTGRAM - UI

목록 보기
1/4
post-thumbnail

과제 설명

파일명

  • HTML: login.html
  • CSS: style/login.css

디자인

구현해야할 로그인 페이지는 실제 instagram 로그인 부분과 유사합니다.

  • 로그인 페이지 이미지 login.png
  • instagram 사이트 로그인 페이지를 참고하여 로그인 영역만 개발합니다.
  • instagram 로고는 아래의 폰트를 이용해 'justgram'으로 작성해주세요.

HTML 작성

디자인 이미지를 보면서 다음 요구사항에 맞게 HTML을 작성해주세요.

(로그인 되지 않은 https://www.instagram.com/ 화면을 참고하셔도 괜찮습니다. 🙂 )

  • 로그인 전체를 감싸고 border가 적용된 div 태그
  • 폰트를 변경한 'justgram'이 들어간 로고
  • 로그인 입력칸 input 태그
    • type은 text와 password 사용
    • placeholder 속성 사용 → "전화번호, 사용자 이름 또는 이메일", “비밀번호”
  • 로그인 버튼 button 태그
    • disabled 속성 사용 → 버튼 비활성화

CSS 작성

HTML 작성 단계가 끝났다면, css 파일을 작성하여주세요.

나의 코드

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Title</Title></title>
    <link rel="stylesheet" href="style/login.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="bg">
        <div>
          <p class="title">Justgram</p>
        </div>
        <div class="idpwbt">
          <div>
            <input class="loginemail" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" />
          </div>
          <div>
            <input class="loginpassword" type="password" placeholder="비밀번호" />
          </div>
          <div>
            <button class="loginbutton" disabled><span style="color: white;" >로그인</span></button>
          </div>
          <div>
            <a class="extra-wrapper">비밀번호를 잊으셨나요?</a>
          </div>
        </div>
      </div>
    </div>

    <script src="js/login.js"></script>
  </body>
</html>

CSS

body {
  background-color: rgb(236, 233, 233);
}

#bg {
  background-color: white;
  height: 600px;
  width: 500px;
  border: 2px solid rgb(87, 87, 87);
  margin: auto;
}

.idpwbt {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 0px 100px;
}

.loginbutton {
  width: 100%;
  padding: 5px 0px;
  font-size: 20px;
  background-color: rgb(131, 168, 238);
  border: none;
  border-radius: 5px;
}

.loginpassword {
  width: 100%;
  margin: 0px 0px 10px;
  padding: 10px 0px;
  font-size: 17px;
  background-color: rgb(240, 236, 236);
  border: 2px solid;
  border-radius: 3px;
  border-color: rgb(233, 230, 230);
}

.loginemail {
  width: 100%;
  margin: 10px 0px;
  padding: 10px 0px;
  font-size: 17px;
  background-color: rgb(240, 236, 236);
  border: 2px solid;
  border-radius: 3px;
  border-color: rgb(233, 230, 230);
}

.title {
  margin: 50px 165px 70px;
  font-family: "Lobster", cursive;
  font-size: 50px;
}

.extra-wrapper {
  display: block;
  padding-top: 230px;
  padding-bottom: 20px;
}

정답 코드

HTML

<html>
  <head>
    <title>Login Page</title>
    <link rel="stylesheet" href="style/login.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
      rel="stylesheet"
    />
  </head>
  <body class="flex-center">
    <div class="login-container">
      <div class="logo-wrapper flex-center">
        <span class="logo-text">Justgram</span>
      </div>
      <div class="form-wrapper">
        <div class="flex-center login-wrapper">
          <input
            class="login-input"
            placeholder="전화번호, 사용자 이름 또는 이메일"
          />
        </div>
        <div class="flex-center login-wrapper">
          <input class="login-input" placeholder="비밀번호" />
        </div>
        <div class="flex-center button-wrapper">
          <button class="login-button">로그인</button>
        </div>
      </div>
      <div class="flex-center extra-wrapper">
        <a class="find-password">비밀번호를 잊으셨나요?</a>
      </div>
    </div>
  </body>
</html>

CSS

body {
  background-color: rgb(238, 237, 237);
}
.login-container {
  width: 400px;
  border: 1px solid lightgray;
  border-radius: 5px;
  background-color: white;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wrapper {
  padding: 30px;
}
.logo-text {
  font-family: "Lobster", cursive;
  font-size: 48px;
}
.form-wrapper {
}
.login-wrapper {
  border: 1px solid lightgray;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.login-input {
  border: none;
  width: 100%;
  margin: 10px;
  font-size: 16px;
}
.login-input:focus {
  outline: none;
}
.button-wrapper {
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 10px;
}
.login-button {
  width: 100%;
  color: white;
  background-color: rgb(205, 233, 244);
  border-radius: 5px;
  border: none;
  padding: 10px;
}
.extra-wrapper {
  padding-top: 70px;
  padding-bottom: 10px;
}
.find-password {
  color: rgb(48, 155, 232);
}

TIL

1. HTML 태그

<input> 태그의 placeholder 속성

input에 어떤 내용을 써야하는지 가이드를 줄 수 있음

<input type="password" placeholder="비밀번호">

<button> 태그의 disabled 속성

버튼 클릭 방지

<button disabled>로그인</button>

로그인

2. CSS

display: flex

레퍼런스 https://studiomeal.com/archives/197

class를 많이 만드는 이유

공통적인 style이 필요한 곳마다 똑같은 class를 부여하면 재사용률을 높일 수 있다.

div의 border를 input의 border로 만드는 방법

profile
정세영
룰루랄라 개발일지🎶❤️‍🔥🧑‍💻❤️‍🔥🎵
다음 포스트

[Mission 2] ID, PW 입력 시 로그인 버튼 활성화 기능

0개의 댓글