회원가입 페이지 만들기(1) - UI, HTML, CSS

회원가입 페이지 만들기

 

드디어 내 힘으로 회원가입 페이지를 만들어 보게 됐다 :)

사실 진작에 했어야 되는데 백엔드 처리하는 것도 막막하고

혼자 뭘 해보기가 겁나서 계속 미루고 있었.. 

이번에는 (반강제로 하는거긴 하지만) 백엔드 봐주실 분도 있어서

좋은 공부라고 생각하고 시작🙌

 

일단 어떻게 짜야할지 구글링으로 많이 찾아보고 

잘 정리된 블로그를 찾아서 그거 보고 많이 참고했다! 

(어떤 항목을 넣을지, 해당 항목에 체크해야할 리스트 등)

 

그리고 처음으로 백엔드도 경험하는 거니까 

협업 경험 해볼 겸 노션, 깃헙저장소, 슬랙도 만들었다!!! 

(비록 단둘이지만ㅋㅋㅋㅋㅋㅋㅋㅋ)

노션 페이지는 내가 만들어서 공유하고

깃헙은 백엔드 분이 해주시기로! 

 

---

UI 

따로 디자인이 있는 게 아니라서 피그마 공부도 할 겸 내가 뚝딱뚝딱.. 

늘 느끼는 거지만 디자인... 결코 쉬운게 아니다...... 

 

결과화면

유효성 검사 생각해서 미리 경고문구 들어갈 곳도 디자인해놓고 

최대한 간단하게 만들었다!

 

---

HTML / CSS 작성

최근 계속 리액트만 하다가 HTML / CSS 하니까 신나게 한 것 같다!

CSS 재밌어! 😊

 

HTML

1. wrapper 로 크게 한번 감싸주고 제목 부분(Header)과 폼 부분으로 나눴다
2. 경고문구는 처음부터 html에 두고 기본 값을 display : none으로 숨겨두었다가 조건이 안 맞으면 나타나게 하려고 했는데 JS 짜다가 보니 경고문구가 상황에 따라 달라질 수 있어서 JS에서 다 다루기로 했다!
3. input 속성에서 나름 조건을 걸어줬는데 유효성 검사에서 해결이 되길래 많이 수정했다
   (ex. minlength, maxlength 등)
4. 짜다 보니 클래스명, 아이디명 짓기가 어찌나 어려운지.. 누가 봐도 알기 쉽게 짓기란 정말 어렵구나
   (는 JS 변수명 짓다 보니 이쪽은 선녀였다는 걸...^^)

 

CSS

1. 간단하게 Reset CSS 해주고
2. 레이아웃은 position은 안 쓴 지가 오래돼서 전부 다 flex로!! 
3. 아이디 input 박스 안에 중복 체크 버튼이 안 예쁜 것 같아서 따로 빼버렸다
4. 어떤 태그를 써야 적절한가 고민
5. 기존 input은 이메일 도메인 선택을 위한 select로 수정하고
6. 직접 입력 시에 필요한 input을 하나 더 추가하고 직접 입력 시에만 활성화되도록 했다
7. 이메일 도메인 '선택' 항목이 선택되지 않게 하기 위해 disabled 속성을 추가로 줬다 (아래 코드 참고)
8. 생년월일은 월만 HTML에서 Select로 했다가 (나머지는 input) 일관적으로 하고 싶어서 input만 두고 JS로 동적으로 바꿨다
9. 그리고 디자인할 때 빼먹은 것 소소하게 추가(ex. 필수항목 알려주는 표시 등)

<input class="custom-email" disabled id="domain-input" />
<select id="domain-list" required>
	<option disabled value="" selected>선택</option>
	<option value="naver.com">naver.com</option>
	<option value="hanmail.net">hanmail.net</option>
	<option value="google.com">google.com</option>
	<option value="nate.com">nate.com</option>
	<option value="custom">직접 입력</option>
</select>

 

결과 화면

 

 

참고 링크

https://choiiis.github.io/web/toy-project-sign-up-and-in-page/