코린이의 회원가입 페이지 만들기 (1)

안녕하세요 뱁새입니다 (۶•<•)۶❗️

오늘은 회원가입 페이지의 뼈대를 세우고 꾸미는 과정을 살펴봅시다

그럼 시작해볼까요?

1st. html로 회원가입 페이지의 뼈대 만들기

회원가입 페이지가 될 html 전체 코드입니다 (후에 js를 건드릴 때에 수정이 될 수도?)

위 코드에 대한 설명을 하자면

1. 이전 로그인 페이지를 만들 때와 마찬가지로 placeholder 속성을 사용해 

아무것도 입력을 하지 않는 상태에서 이 입력칸이 가진 목적이 무엇인지 나타내도록 하였습니다

2. maxlength를 이용해 최대 입력 가능 글자수에 제한을 두었습니다

3. 생년월일란에 주석 (초록색으로 표시된 부분)을 달아 이후 js를 건드릴 때 어떻게 구현을 할 것인지 간단히 서술해놓았습니다

2nd. css로 회원가입 페이지 꾸미기

위 html 코드를 실행시켜보면

이런 화면이 보이게 되는데 많이 어색하지요?

이는 css를 적용하지 않아 그렇습니다

앞서 만든 로그인 페이지와 같은 스타일을 주기 위해 검사 도구로 elements를 찍어가며 코드를 입력해주도록 합시다

짠 완성입니다

흠.. 그런데 뭔가 좀 어색하단 말이죠

분명 제가 원한 그림은 이거였는데 

어째서 아이디 입련란과 중복 체크 그리고 생년월일이 가로 배치가 되지 않은 걸까요?

한 번 수정을 해봅시다

가장 먼저 생년월일을 수정할 건데요

위 코드에서 birth_date 클래스에 display: flex; 를 추가하면 자식 요소들이 가로로 배치될 수 있을 것 같습니다

과연..

유레카!

드디어 가로 정렬이 되었습니다 But, 튀어나온부분이 거슬리는군요..

손 좀 봐주도록 합시다

birth_date 클래스 안의 요소들이 같은 너비를 가지도록 33%의 너비를 할당해주고 요소들에는 외부 여백을, 클래스에는 내부 여백을 줘보았습니다

잘 해결이 되었는지 결과를 한 번 볼까요?

캬 이궈궈던~ 한 잔해~

그럼 다음으로 아이디 입력란과 중복 체크 버튼을 가로로 배치해봅시다

생년월일을 수정했을 때와 마찬가지로 id_form 클래스에 display: flex; 를 부여해주고

id_form 클래스 안의 첫번째 요소에는 70%, 두번째 요소에는 20%의 너비를 할당, margin으로 외부 여백을 적절히 줘보면..

3rd. 페이지 완성

마참내!

제가 구상한 것과 꼭 닮은 화면을 띄우는 모습을 볼 수 있습니다

4th. 글을 마치며

재밌는데 글 작성하면서 elements 찍고 찍은 거 보면서 수정하고 짤 다운 받고 하느라 약 4시간 걸림

+) 개쩌는 나에 구상 제가 직접 그림