HTML/CSS 로그인 페이지 - HTML/CSS logeu-in peiji

Question

코딩하는 감자

이 화면을 구현하는게 이번 과제!

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>네이버 로그인</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    
    <link rel ="stylesheet" href="style.css">
</head>
<body>
    <div class="select">
        <select class="select-language">
            <option>한국어</option>
            <option>English</option>
        </select>
    </div>
    
    <div class="logo image">
        <img src="naver.png">
    </div>
    <br><br>
    <form>
        <div class="form-group">
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="아이디">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="비밀번호">
        </div>

        <div class="login-button">
        <div button type="login" class="btn btn-primary">로그인</button>
        </div>
    </div>
    <div class="form-check">
        <div>
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">로그인 상태 유지</label>
        </div>
    </div>
        
      </form>

    <hr width="350px" align="center">
    <p class="easy-login" align="center">더욱 간편한 로그인</p>

    <br>

    <div class="button-group">
    <div button type="button"  class="btn btn-primary btn-lg">QR코드 로그인</button>
    </div>
    <div button type="button" class="btn btn-secondary btn-lg">일회용 번호 로그인</button>
    </div>
</div>
<br><br>
    <footer class="footer">
        <div class="footer-info">
            아이디 찾기 | 비밀번호 찾기 | 회원가입
        </div>
    </footer>
</body>
</html>

css

body{
    background-color:#f5f6f7;
    
}
.select{
    margin-top:5%;
    margin-left:70%;
 
}
.form-group{
    width:350px;
    margin-left:auto;
    margin-right:auto;
}
.btn.btn-primary{
    border:1px solid #03c75b;
    background-color: #03c75b;
    width:350px;
    margin-left:auto;
    margin-right:auto;
}

.form-check{
    display:flex;
    flex-direction:row;
    justify-content:center;
}
.easy-login{
    font-weight:800;
}
.btn.btn-primary.btn-lg{
    border:1px solid #03c75b;
    background-color:white;
    color:black;
    font-size:80%;
    width:170px;
}
.btn.btn-secondary.btn-lg{
    border:1px solid #03c75b;
    background-color:white;
    color:black;
    font-size:80%;
    width:170px;
}

.login-button{
    text-align:center;
}
.button-group{
    text-align:center;
}
.footer{
    margin:0 auto;
    text-align:center;
    bottom:5px;
    color:gray;
}
img{
    margin-top:60px;
    width:20%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

결과물!

저 로그인 상태유지 버튼이 좀 왼쪽으로 갔으면 좋겠는데

margin-left로 설정하면 다른 요소들이랑 다같이 움직이지 않고 부자연스러워서 어떻게 고칠지 모르겠다.

이따 학회 세미나 할때 선배님들한테 물어봐야지

아고 힘들어 일단 끝!! 힘들어도 c++ 코딩보다는 훨씬 재밌다 ㅎ

CSS 로그인 페이지 HTML 로그인 템플릿 Html 로그인 폼 Html 로그인 페이지 로그인페이지 js