오늘은 교육 첫날!
설레는 마음 반 걱정되는 마음 반,,,

6인 1팀으로 2주 간의 foundation 기간 동안 함께 하게 되었다!
나는 C팀으로 전부 여성분들로만 이루어진 팀ㅎㅎㅎ
말도 잘 통하고 유쾌하고 재미있는 분들이라서 출발이 좋아~

첫 날이라서 수업은 팀 별 학습준비와 간단한 Kickoff시간이 주어졌다.

그리고 이어진 자바스크립트 내용보충 시간에는 한 달간의 온보딩 기간 동안 공부했던 내용을 확인하고 보강하는 시간을 가졌다. 생각보다 어렵지는 않았던 것 같다.

그리고 첫 번째 과제가 주어졌는데 바로 인스타그램 로그인 페이지와 메인 페이지 구현하기!

그 중에서 일단 로그인 페이지를 만들어보았다.

📌 인스타그램 로그인 페이지 html & css

💻 html

import React from "react";
import "./Login.css";

const Login = () => {
  return (
    <div className="login">
      <div id= 'wrapper'>
        <div id='logo'>Westagram</div>
        <div id='input'>
          <input id='id' type = 'text' placeholder="전화번호, 사용자 이름 또는 이메일"></input>
          <input id='pw' type = 'password' placeholder="비밀번호"></input>
        </div>
        <button id = 'loginBtn'>로그인</button>
        <div id='miss'>비밀번호를 잊으셨나요?</div>
      </div>
    </div>
  );
};

export default Login;

🎨 css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#wrapper {
  width: 350px;
  height: 397.66px;
  border: 1px solid lightgray;
  padding: 30px;
  text-align: center;
}

/* 로고 */
#logo {
  font-family: 'Lobster', cursive;
  font-size: 40px;
  margin-top: 10px;
  margin-bottom: 50px;
}

/* input */
#id, #pw {
    display: inline-block;
    width: 270px;
    height: 35px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #eee;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    font-size: 7px;
    font-weight: bold;
}

/* 로그인 버튼 */
#loginBtn {
  margin: 10px 0;
  width: 270px;
  padding: 10px;
  background-color: #63b9e7;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
}

#miss {
  margin-top: 70px;
  font-size: 12px;
  font-weight: bold;
  color: #1b77a9;
}

글꼴은 구글폰트에서 link로 받아서 index.html에 넣어줬다!

💖 완성화면

생각보다 단시간에 로그인 페이지를 만들어서 기분이 좋았다.
메인페이지는 어떻게 만들면 좋을 지 생각해봐야겠다.