html+css
login 만들기
woooonikk
2022. 12. 9. 22:25
html은 이러하다 form 태그를통해서 만든다
엄청나게 휑 하군 ㅎㅎ
그리구 여기에
비밀번호 잊었? 버튼 추가 하나로 login-form 클래스로 엮어준다
이제 위의 도면대로 스타일링을 해보자
가로 길이와 배경색을 정해줍니다
글자의 크기를 14px로 지정!!
div태그를 가운대로 오게 했습니다
더 보기 좋게
이제 꾸며 봅시다
border-radius로 5px씩 둥글리고
padding을 도면에 나와있는 대로 20px씩 주었다
그다음 아이디와 패스워드의 클래스인 text-field를 스타일링 해보자
width를 100프로로 설정하였다
그럼 이렇게 이쁘게 전부 차지한다
그런데 아이디 비밀번호창과 로그인 버튼이 기본적으로 테두리가 설정 되어있다 도면에는 없으므로
테두리를 없애줍니다
(저 버튼도 이따 수정할꺼임)
또 도면을 보면 (아이디 로그인 창) 모서리가 둥그므로
해줍니다
padding 10px 추가
마진 바텀으로 10px 줍니다
이제 로그인 버튼을 스타일링 해주자
글자 크기 색깔 버튼 색깔 크기 (width100%) 설정
모퉁이 둥글리기 5px padding 10px 줄 없앰
점점 이쁘게 된당
그다음에 비밀번호 찾기 스타일링
글자를 가운데로 정렬후 위에 간격을 30px 띄운다
그 후
글자 조정과 컬러를 조정해주면?
짜잔 완성!!