[HTML/CSS] 초간단 로그인폼 만들기 - LoginForm

안녕하세요

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

 

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

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

 

로그인 폼

 

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

 

 중요한 부분 

- 위치선정 -

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 박스를 만드신 후 박스 안쪽을 클릭하시면 박스 테두리가 쳐집니다

outline : none 이 없는 경우

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

outline : none;

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

 

 

 <input placehorder:email></input> 

 

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

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

 

 

 

 submit 부분에서 보아야할 점 

 

 

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.