정구리의 우주정복

[HTML,CSS] 로그인폼 만들기 2 (공부용) 본문

STUDY/K-DIGITAL

[HTML,CSS] 로그인폼 만들기 2 (공부용)

Jungry_ 2022. 8. 10. 21:47
반응형

최종 결과물

 

 

##서버와 연결하지 않아 실제로 동작하지는 않는 form 입니다. 서버 연동방법은 별도로 명시하지 않습니다. ##

 

 

1. 내가 만든 방식

HTML

<body>

    <form>
        <div class="login_info">
            <p>Email</p>
            <input type="email" placeholder="Email Address">
            <p>Password</p>
            <input type="password" placeholder="Password">
        </div>
        <button>Log in</button>
    </form>

</body>

form 태그 안에 div 태그를 만들어 p태그와 input 태그를 넣어줬다.

input 태그에는 place holder 를 사용해서 내용을 명시해줬다

 

button 태그를 사용해서 로그인 버튼을 만들어줬음 

CSS

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

        body{
            font-family: 'Raleway', sans-serif;
            line-height: 1.5em;
            height:100vh;
            margin:0;

            position:relative;

        }
        form{
            
            margin:auto;
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* border: 1px solid #000; */
            width : 800px;
            padding: 25px;
            border-radius: 5px;
            background-color: #f5f5f5;
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);


        }
        input {

            width : 100%;
            box-sizing: border-box;
            padding: 15px;
            padding-left: 30px;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, 0.233);
            margin-top:-10px;
            
        }
        input:hover{
            border: 1px solid dodgerblue;
            box-shadow: 0 0 5px dodgerblue;
        }
        input:focus::placeholder{
            color:transparent;
        }
        button {
            width:40%;
            font-size: 24px;
            padding: 10px;
            border-radius: 5px;
            background-color: #2991b1;
            border : none;
            color : #fff;
            margin-top: 30px;
        }
        button:hover{
            cursor: pointer;
            background-color: #2c778e;
        }
    </style>

 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

        body{
            font-family: 'Raleway', sans-serif;
            line-height: 1.5em;
            height:100vh;
            margin:0;

            position:relative;

        }

@import 를 사용해서 Google Font 설정

body 태그 안에는 폰트 설정, 줄 간격, 전체 화면의 높이, margin:0 을 줘 기본적으로 적용되는 8px 정도의 margin 을 없애준다

position:relative 를 넣어줘서 부모로 설정해준다

 

        form{
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* border: 1px solid #000; */
            width : 800px;
            padding: 25px;
            border-radius: 5px;
            background-color: #f5f5f5;
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);


        }

form 태그에는 position:absolute 를 줘서 자식으로 설정을 한다

top:50%

left:50%

transform:translate(-50%,-50%); 

이거 쓰면 화면 중앙에 정렬이 된다 

 

width , padding , border-radius ,bgc,box-shadow 로 꾸며준다

 

        input {

            width : 100%;
            box-sizing: border-box;
            padding: 15px;
            padding-left: 30px;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, 0.233);
            margin-top:-10px;
            
        }

input 태그들도 꾸며준다 딱히 어려운건 없어서 추가 설명 안쓰겠음

 

        input:hover{
            border: 1px solid dodgerblue;
            box-shadow: 0 0 5px dodgerblue;
        }
        input:focus::placeholder{
            color:transparent;
        }

hover 했을때 input 창에서 border, box-shadow 가 나오게 만들어줬다.

또한 focus(mouse click) 시 placeholder를 보이지 않게 해 주었음 !

 

border과 placeholder 확인

        button {
            width:40%;
            font-size: 24px;
            padding: 10px;
            border-radius: 5px;
            background-color: #2991b1;
            border : none;
            color : #fff;
            margin-top: 30px;
        }
        button:hover{
            cursor: pointer;
            background-color: #2c778e;
        }

버튼도 꾸며주고

버튼 위에 hover 했을때 cursor 의 모양을 바꿔주고 bgc 도 바꿔줬다

login 색 변한거 확인 !

 

2.   정답

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./quiz03.css">
</head>
<body>

    <form class="login">
        <span>Email</span>
        <input type="email" placeholder="Email Address">
        <span>Password</span>
        <input type="password" placeholder="Password">
        <button class="btn">Log in</button>
    </form>
</body>
</html>

내 소스와의 큰 차이점은 p 가 아닌 span 태그를 썼다는것 (span 은 inline 태그라서 가로정렬된다는 특징이 있다) 그정도 ?_?

 

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

    body{
        font-family: 'Raleway', sans-serif;
        line-height: 1.5em;
        height:100vh;
        margin:0;
        font-weight: 300;
        color : #222;

        position:relative;
    }

    .login{
        /* border: 1px solid #000; */
        width : 800px;
        padding:25px;
        box-sizing: border-box; /*박스사이즈 유지*/
        background-color: #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.219);

        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

    .login span {
        font-weight: bold;
        display: block;
        margin-top : 20px;
    }
    
    .login input{
        width: 100%;
        padding:15px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding-left: 30px;
    }
    .login input:hover{
        border: 1px solid dodgerblue;
        box-shadow: 0 0 5px dodgerblue;
    }

    .login input::placeholder {
        opacity: 1;
        transition: 0.3s;
    }
    .login input:focus::placeholder {
        opacity: 0;
    }

    .btn {
        width:40%;
        background-color: #2991b1;
        color : #fff;
        padding: 10px;
        border-radius: 5px;
        border : none;
        margin-top: 30px;
        font-size: 24px;
        cursor: pointer;
    }

    .btn:hover{
        background-color: #2c778e;
    }

 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

    body{
        font-family: 'Raleway', sans-serif;
        line-height: 1.5em;
        height:100vh;
        margin:0;
        font-weight: 300;
        color : #222;

        position:relative;
    }

google font 추가해주고 

body 태그 안에 font-family, 줄간격, 전체 height, 기본 margin 제거, font-weight(두께) 설정, font의 color 설정

position : relative 를 통해 부모로 지정해주기 

 

    .login{
        /* border: 1px solid #000; */
        width : 800px;
        padding:25px;
        box-sizing: border-box; /*박스사이즈 유지*/
        background-color: #f5f5f5;
        border-radius: 5px;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.219);

        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

.login 은 form 태그의 class 명이다.

위에서도 사용했지만 

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

를 통해서 중앙정렬을 해준다

 

    .login span {
        font-weight: bold;
        display: block;
        margin-top : 20px;
    }

span 태그는 inline 이기 때문에 가로정렬되는 성질이 있다. 세로로 정렬해주기 위해 display:block; 을 사용해준다

글자에 두께감을 주기 위해 font-weight 를 bold 로 지정해주자

 

    .login input{
        width: 100%;
        padding:15px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding-left: 30px;
    }
    .login input:hover{
        border: 1px solid dodgerblue;
        box-shadow: 0 0 5px dodgerblue;
    }

    .login input::placeholder {
        opacity: 1;
        transition: 0.3s;
    }
    .login input:focus::placeholder {
        opacity: 0;
    }

input 관련 css 부분이다.

hover를 통해 마우스 올렸을때 border에 효과를 부여했다 !

.login input::placeholder{

 opacity:1;   ->투명도를 1로 지정해준다. (왜인지는 밑에서)

 transition : 0.3s; -> 트랜지션을 0.3초 부여해준다

}

 

.login input:focus::placeholder{

 opacity:0; -> 투명도를 0으로 지정해준다

}

 

기존 placeholder 의 투명도를 1로 지정하고 트랜지션을 0.3초 준 뒤 focus 시 투명도를 0으로 설정해주면 placeholder 의 글자가 서서히 0.3초에 걸쳐 사라지는 효과를 볼 수 있다.

 

    .btn {
        width:40%;
        background-color: #2991b1;
        color : #fff;
        padding: 10px;
        border-radius: 5px;
        border : none;
        margin-top: 30px;
        font-size: 24px;
        cursor: pointer;
    }

    .btn:hover{
        background-color: #2c778e;
    }

btn의 CSS는 이렇게 정해주면 된다 !

반응형

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

[Java] Math.random 사용법, 배수 출력하기  (0) 2022.08.11
[Java] 계절 출력 (Switch-Case break 사용)  (0) 2022.08.10
[Java] 자바 가위바위보 만들기 (if 사용)  (0) 2022.08.10
[HTML,CSS] 드롭다운 메뉴 만들기  (1) 2022.08.07
[HTML,CSS] 로그인 폼 만들기 (공부용)  (0) 2022.08.06
'STUDY/K-DIGITAL' Related Articles more
Comments