[개인프로젝트] 로그인 박스만들기(html, css)

이제까지 공부했던 CSS와 자바스크립트를 활용해서 로그인 페이지를 활용하려고 한다.

 

일단 로그인 박스 만들기 html

    <div class="container">
        <div class="login-wrapper">
            <h2>Login</h2>
            <form class="login-form">
                <input type="text" placeholder="your Id">
                <input type="password" placeholder="your password">
                <div id="login-etc">
                    <a href="">join</a>
                    <input type="submit" value="submit">
                </div>  
            </form>
        </div>
    </div>

간단하게 컨테이너 박스를 만드록 로그인 관련 필요한 테그들을 넣었다.

body{
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url("../imge/2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-wrapper{

    background-color: transparent;
    margin: 5px;
    border: 1px solid white;
    border-radius: 10px;
    padding: 5px;
    width: 250px;
} 

.login-wrapper h2:nth-child(1){
    text-align: center;
    width: 100%;
    color: white;
}

.login-form > input:nth-child(1){
    background: transparent;
    border-top: none;
    border-right: none;
    border-left: none;
    outline: none;
    color: white;
    width: 85%;
    margin: 20px;
    box-sizing: border-box;
}
.login-form > input:nth-child(2){
    background: transparent;
    border-top: none;
    border-right: none;
    border-left: none;
    outline: none;
    color: white;
    width: 85%;
    margin: 20px;
    box-sizing: border-box;
}

.login-etc > a{
    width: 100%;
    display: inline-block;
}

 

일단 결과물은...

일단 body에서 배경화면을 잡아 주고, 조금 어둡게 해주었다. 그리고 container를 화면 중앙으로 잡아주기위해 어떤것을 사용해볼까 하다가 저번에 position을 이미 한번 활용해본 경험이 있기때문에 요번에는 flex를 활용해봤다. 그런데...가로는 중앙으로 이동했는데, 새로가 중앙으로 이동하지 않았다....

그 이유를 찾아보니, height를 100%로 해놨기에...이걸 100vh로 잡아주니, 다행히 중앙으로 이동하였다.

차이점

• 100% -> 부모요소의 넓이의 100퍼센트
• 100vh -> 부모요소와 상관없이 넓이의 100퍼센트

또한 login-wrapper에서 background-color를 transparent로 잡아주면 배경화면을 투명하게 해주는 것도 알았다. 그리고 아직 자식요소를 선택하는데 공부가 필요한듯...갈길이 멀다... 오늘도 진행중..