로그인 폼 디자인 - logeu-in pom dijain

로그인 폼 디자인 - logeu-in pom dijain

안녕하세요

오늘은 간단한 로그인 폼을 만들어보도록 하겠습니다

기능적인 부분은 하나도 없이 HTML과 CSS만 사용하였기 때문에

디자인만 참고해보시면 좋을것 같습니다

로그인 폼 디자인 - logeu-in pom dijain
로그인 폼

따로 크기를 정해놓지 않은
% 방식으로 하였기 때문에 사이즈를 너무 줄이는 모습까지는
신경쓰지 못하였습니다

 중요한 부분 

- 위치선정 -

display: flex;

align-items: center;

justify-content: center;

flex-direction : column;

-디자인 -

outline : none;

background : linear-gradient()

border-radius : --px;

box-shadow : -px -px -px color;

letter-spacing : -px;

 SNS 버튼부에서 봐야할 점 

box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(0, 0, 0, 0.1);

제 코드에서는 이렇게 주었구요

색상을 지정하실때는 뒷 배경색보다 좀 더 연한색을 위주로 주시면 자연스러운것 같습니다

지정된 위치보다 -3px -3px 위로 올려서 색상을 좀 더 연하게 주시면 더욱 입체감이 있습니다

 Email, Pw 부분에서 보아야 할 점 

outline : none;

처음 input 박스를 만드신 후 박스 안쪽을 클릭하시면 박스 테두리가 쳐집니다

로그인 폼 디자인 - logeu-in pom dijain
outline : none 이 없는 경우

이런 문제를 해결하기 위해서,

outline : none;

을 주게 되면 더 이상 클릭해도 엉성한 테두리가 생기지 않는걸 보실 수 있습니다

 <input placehorder:email></input> 

placehorder 을 이용하여 input 박스안에 텍스트를 적을 수도 있습니다

위 사진 처럼 Email을 적어라고 알려줘야할때 placehorder 이 사용됩니다

 submit 부분에서 보아야할 점 

로그인 폼 디자인 - logeu-in pom dijain

background: linear-gradient(to left, rgb(255, 77, 46), rgb(255, 155, 47));

단색을 줘도 예쁜색이면 잘 나오지만

아무래도 그라데이션 효과를 주면 조금더 이쁜 박스가 나오는것 같습니다

또한 letter-spacing : 2px 를 주어서 submit 이라는 글자 사이사이마다 공간을 주었습니다

See the Pen ExgOvWW by Kang Byeongcheol (@Devcheol) on CodePen.

로그인 페이지 만들기

※중요) 기억해야 될 태그

  1. <form>
  2. <label>
  3. <input> : type = "text", "password", "submit", "checkbox"

01 예제 디자인

로그인 폼 디자인 - logeu-in pom dijain
로그인 예제 디자인

02 예제 속 필요한 태그 알아보기

  • Login : <h2>
  • Email 적는 칸 : <input type="text">
  • Password 적는 칸 : <input type="password">
  • 아이디 저장하기 : <label>, <input type="checkbox">
  • login 버튼 : <input type="submit">

03 마크업 해보기

<body>
    <div class="login-wrapper">
        <h2>Login</h2>
        <form method="post" action="서버의url" id="login-form">
            <input type="text" name="userName" placeholder="Email">
            <input type="password" name="userPassword" placeholder="Password">
            <label for="remember-check">
                <input type="checkbox" id="remember-check">아이디 저장하기
            </label>
            <input type="submit" value="Login">
        </form>
    </div>
</body>
로그인 폼 디자인 - logeu-in pom dijain
마크업 적용된 로그인 화면

1. <form> 부모 태그 안에 <input> 태그를 자식으로 넣어 마크업 한다.

2. placeholder는 입력 필드에 사용자가 어떤 값을 입력해야 하는지를 간략하게 알려주는 역할을 한다. 단어 혹은 짧은 문구가 들어가며 사용자가 입력하는 즉시 사라진다.

3. <label> 태그의 for=""와 <input> 태그의 id=""를 동일하게 적어 연결시켜주면, checkbox 혹은 '아이디 저장하기' 둘 중 아무거나 클릭해도 체크가 자동으로 활성화된다.

04 CSS 적용하기

*{
    padding: 0;
    margin: 0;
    border: none;
}
body{
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

먼저 기본적으로 걸려있는 모든 속성을 reset 시켜주세요.

.login-wrapper{
    width: 400px;
    height: 350px;
    padding: 40px;
    box-sizing: border-box;
}

.login-wrapper > h2{
    font-size: 24px;
    color: #6A24FE;
    margin-bottom: 20px;
}
#login-form > input{
    width: 100%;
    height: 48px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 16px;
    border-radius: 6px;
    background-color: #F8F8F8;
}
#login-form > input::placeholder{
    color: #D2D2D2;
}
#login-form > input[type="submit"]{
    color: #fff;
    font-size: 16px;
    background-color: #6A24FE;
    margin-top: 20px;
}

기존의 checkbox를 없애고 label를 이용하여  디자인 시안과 동일하게 변경시켜줍니다.

#login-form > input[type="checkbox"]{
    display: none;
}
#login-form > label{
    color: #999999;
}
#login-form input[type="checkbox"] + label{
    cursor: pointer;
    padding-left: 26px;
    background-image: url("checkbox.png");
    background-repeat: no-repeat;
    background-size: contain;
}
#login-form input[type="checkbox"]:checked + label{
    background-image: url("checkbox-active.png");
    background-repeat: no-repeat;
    background-size: contain;
}

checkbox 커스터마이징은 여러가지 방법이 사용되는데, 위 방법이 가장 쉬워서 종종 사용하는 편입니다.

로그인 폼 디자인 - logeu-in pom dijain
완성된 이미지

간단한 로그인 페이지 완성!