[Spring] 쇼핑몰 - 8 BootStrap으로 로그인과 회원가입 폼 만들기

---

LOGIN

부트스트랩에서 Modal을 찾아 Static backdrop으로 찾아간 후 코드를 저장한다.

 

header.html

header.html에서 작업할 것이기 때문에 복사 붙여넣기를 해준 후 data-bs-toggle~~ 머시기 빨간 박스를 복사한다.

그리고 id 값을 loginModal로 바꿔준다.

 

헤더 부분에 있는 LOGIN에 와서 span 태그로 감싸 복사 붙여넣기를 한 후 , 아이디를 설정해주면 된다.

 

이렇게 LGOIN을 눌러주면 부트스트랩에서 끄집어온 디자인이 잘 된다.

 

계속해서 header에서 LOGIN 페이지를 제대로 바꿔보자. 위처럼 일단 디자인만 손봐보았다.

LOGIN을 눌렀을떄 폼 모달 화면. 다음에 데이터를 넣어 가입을 완료해보자.

---

 

JOIN

똑같이 이것을 복사하여 body 태그에 붙여넣어주면 완성된다.

그 전에, LOGIN에서 썻던 모달을 복 붙하고, body 태그에 이걸 붙여야한다.

 

JOIN을 눌렀을때의 폼 모달 화면.

다음 포스팅에서 이렇게 부트스트랩으로 끌어온 디자인을 데이터를 넘겨보자.