Project) Westagram clone_login page (HTML, CSS)

9300 단어 projectproject

🗝 로그인 페이지 1차 코드 (HTML, CSS)

▪️ HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"  />
        <title>LOGIN_WESTA</title>
        <link rel="stylesheet" href="style/login.css">
        <link rel="stylesheet" href="style/common.css">
    </head>
    <body>
        <div class="loginBox">
            <header>westagram</header>
            <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" class="loginId">
            <input type="password" placeholder="비밀번호" class="loginPassword">
            <button class="loginBtn">로그인</button>
            <a href="#">비밀번호를 잊으셨나요?</a>
        </div>
    <script src="js/login.js"></script>
    </body>
</html>

▪️ 사용 태그 리뷰
div : 로그인 버튼의 전체적 틀
header : 메인로고
input : id 및 password 입력 창 생성
button : 로그인을 할 수 있는 버튼
a : 비밀번호를 잊었을 때 찾을 수 있는 링크로 이동하기 위한 안내글

▪️ css

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
.loginBox {
    border: 1px solid #ededed;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 348px;
    height: 358px;
}  
.loginBox header {
    font-family: 'Lobster', cursive;
    margin: 22px auto 36px;
    font-size: 40px;
}
.loginBox input {
    padding: 15px 10px;
    margin: 5px 0;
    width: 268px;
    height: 30px;
    border: 0.2px solid #ededed;
    border-radius: 5px;
    background-color: #FAFAFA;
}
.access {
    background-color: #0095F6;
    cursor: pointer;
}
.loginBtn {
    margin-top: 13px;
    width: 268px;
    height: 30px;
    background-color: #C0DFFD;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 13px;
    font-weight: 700;
}
.loginBox a {
    text-decoration: none;
    color: #325883;
    font-size: 13px;
    margin-top: 25%;
}
.access {
    background-color: #0095F6;
    cursor: pointer;
}

▪️ 주요 스타일 특징 리뷰

  1. 로그인 박스 중앙 배치 : absolute / (top / left / transform)
  2. 가로 정렬, 세로 정렬 : display:flex / align-items: center / flex-direction: column
  3. 버튼 활성화 class : access 라는 선택자에 스타일을 지정해 JS를 통해 이벤트가 발생하면 로그인 버튼에 변화가 생길 수 있도록 함.

▪️ 1차 코드 리뷰 (HTML, CSS)

로그인 페이지의 HTML과 CSS를 코드하는 것은 그리 오랜 시간이 걸리진 않았다.
아무래도 디자인 자체가 심플하고 간단하다 보니
많은 코드가 필요하지 않았던 페이지였다.

하지만 대략적으로만 구현해 놓은 페이지이기에
다소 수정이 필요한 부분이 보여 리팩토링을 진행해야한다.

  • 로그인 박스를 설정하는 부분이 div 보다는 form 으로 설정
  • 각 div 태그의 넓이나 높이를 설정하는 부분을 최대한 줄이기
  • 코드의 가독성을 위해 스타일 지정의 순서를 최대한 맞추기
  • 로그인 버튼의 활성화는 JS를 통해 이뤄지도록 변경
  • 로고를 클릭했을 때, 로그인을 성공했을 때 페이지 변경이 이뤄지도록 수정

이 정도의 기준을 가지고 코드를 수정해야겠다.

고치면서 수정이 필요한 부분이 생기면 바로 수정을 해보도록 하겠다.

UISceneSession
졸업을 시작하며!

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage