정구리의 우주정복

[HTML/CSS] 로그인폼 만들기 , fontawesome 사용해보기 본문

STUDY/K-DIGITAL

[HTML/CSS] 로그인폼 만들기 , fontawesome 사용해보기

Jungry_ 2022. 8. 27. 23:02
반응형

결과 화면
미디어 쿼리 사용했을 때

<body>
    <div class="login-form">
        <h2>registeration</h2>

        <div class="sns-login">
            <button class="btn facebook"><i class="fa fa-facebook" aria-hidden="true"></i>Login in with Facebook</button>
            <button class="btn twitter"><i class="fa fa-twitter" aria-hidden="true"></i>Login in with Twitter</button>
            <button class="btn google"><i class="fa fa-google" aria-hidden="true"></i>Login in with google</button>
        </div>

        <div class="field">
            <label for="name">user name</label>
            <input type="text" id="name">
        </div>
        <div class="field">
            <label for="email">email</label>
            <input type="text" id="email">
        </div>
        <div class="field">
            <label for="pass">Password</label>
            <input type="text" id="pass">
        </div>

        <button class="btn-login">Log in</button>
    </div>
</body>

html 모습이다 !!

전체 div 안에 요소들을 넣는다 

button 에는 fonrawesome 을 사용해서 아이콘들을 넣어준다 

특징은 label 을 사용해서 요소들을 묶어줬다는것 

 

<style>
         @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
        /* Fontawesome 4.7 */
        @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
        /*reset CSS*/
        a{text-decoration: none;}
        h2,h3,h4,h5{margin:0;}

        body{
            margin :0;
            font-family: 'Montserrat', sans-serif;
            font-size: 15px;
            font-size: 1.5em;
            background-color: #eee;

            padding:20px;

            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            }

        .login-form{
            width: 600px;
            background-color: #fff;
            padding:30px;
            border-radius: 5px;
            box-shadow: 0 0 20px #eee;
            box-sizing: border-box; /*width 랑 세트로 해서 범위랑 위치 잡아주기*/
        }

        .login-form h2{
        font-weight: normal;
        text-transform: capitalize;
        font-size: 28px;
        }
        .sns-login{
            margin : 20px 0;
            display: flex;
        }
        .btn{
            flex:1;
            padding:5px;
            border:none;
            font-family: 'Montserrat', sans-serif;
            font-size: 11px;
            color : #fff;
            margin-right: 3px;
            border-radius: 3px;

        }
            .btn.facebook{
            background-color: #1877F2;
        }
        .btn.twitter{
            background-color: #1DA1F2;
        }

        .btn.google{
            background-color: #ea4335;
        }

        .field{
         display: flex;
         margin: 20px 0;
         font-size: 16px;
        }
        .field label{
            flex:1;
            text-transform: capitalize;
        }
        .field input{
            flex:4;
            border : 1px solid #ddd;
            padding: 5px;
            border-radius: 3px;

        }
        .btn-login{
            font-family: 'Montserrat', sans-serif;
            padding:5px 40px;
            border : none;
            font-size: 13px;
            background-color: royalblue;
            border-radius: 3px;
            color:#fff;
            float: right;
        }

        @media (max-width:768px) {
            .login-form{
                width: 100%;
            }
            .sns-login{
                flex-direction: column;
            }
            .btn{
                margin:5px 0; /*상하만 5px*/
            }
            .field{
                flex-direction: column;
            }
            .btn-login{
                width: 100%;
            }
        }
    </style>

 

@import 를 통해 fontawesome 이랑 font들을 추가해준다 

그리고 css 들 reset 해주는데 이거는 별로 중요한거 아니니까 생략스

 

body 태그에 font 지정 해주고 

 

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

중앙정렬 세트 이용해서 중앙으로 정렬 삭 해준다 

 

.login-form{
    width: 600px;
    background-color: #fff;
    padding:30px;
    border-radius: 5px;
    box-shadow: 0 0 20px #eee;
    box-sizing: border-box; /*width 랑 세트로 해서 범위랑 위치 잡아주기*/
}

login-form 은 width 랑 box-sizing 을 사용해서 범위와 위치를 잡아준다 

 

.login-form h2{
font-weight: normal;
text-transform: capitalize;
font-size: 28px;
}

폰트의 사이즈와 안의 text 들의 시작 문자를 대문자로 바꿔주기 위해 capitalize 를 해준다 

 

.sns-login{
    margin : 20px 0;
    display: flex;
}

로그인 버튼들에 display:flex 를 줘서 안에 버튼을 가로정렬 해준다 

 

.btn{
    flex:1;
    padding:5px;
    border:none;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color : #fff;
    margin-right: 3px;
    border-radius: 3px;

}

버튼은 font 가 상속이 되지 않기 때문에 직접 폰트를 지정해줘야한다 

 

    .btn.facebook{
    background-color: #1877F2;
}
.btn.twitter{
    background-color: #1DA1F2;
}

.btn.google{
    background-color: #ea4335;
}

각 버튼들에 색상 지정해주기 

 

.field{
 display: flex;
 margin: 20px 0;
 font-size: 16px;
}

field 안의 내용들을 가로정렬 해준뒤 

 

.field label{
    flex:1;
    text-transform: capitalize;
}
.field input{
    flex:4;
    border : 1px solid #ddd;
    padding: 5px;
    border-radius: 3px;

}

flex :1 , flex:4 를 이용해서 요소들의 비율을 1:4 로 지정해준다 

 

.btn-login{
    font-family: 'Montserrat', sans-serif;
    padding:5px 40px;
    border : none;
    font-size: 13px;
    background-color: royalblue;
    border-radius: 3px;
    color:#fff;
    float: right;
}

마지막으로 로그인 버튼도 일일히 font 지정해주고 float : right 로 줘서 오른쪽 배치를 한다 

 

@media (max-width:768px) {
    .login-form{
        width: 100%;
    }
    .sns-login{
        flex-direction: column;
    }
    .btn{
        margin:5px 0; /*상하만 5px*/
    }
    .field{
        flex-direction: column;
    }
    .btn-login{
        width: 100%;
    }
}

미디어 쿼리는 sns-login 버튼과 flex-direction 을 column 으로 지정해 줘 세로정렬 해준다 그럼 끝 !

반응형

'STUDY > K-DIGITAL' 카테고리의 다른 글

[HTML/CSS] 네이버 회원가입 폼 만들기  (0) 2022.08.29
[HTML/CSS] float 정복하기  (0) 2022.08.28
[HTML/CSS] display:flex 정복하기 (2)  (0) 2022.08.27
[HTML/CSS] position 정복하기  (0) 2022.08.27
[HTML/CSS] display:flex 정복하기 , media query 사용해보기  (0) 2022.08.27
'STUDY/K-DIGITAL' Related Articles more
Comments