[HTML] 로그인 화면 꾸미기 | 오픈소스 사용해보기

이제 로그인 화면을 꾸릴 차례이며, https://codepen.io/ 를 활용할 예정이다

 

여기서! 테마 설정전에 해당 테마를 상업적으로 사용해도 되는지 알아보아야함

이에 화면 좌측 하단에 위치한 'comments' 버튼을 클릭해서 스크롤을 최하단으로 내리면 'license'칸이 있음

이때 copy 누르고 papago에 돌려보기 -> 활용가능 -> 첫두줄 복사해서 login.ejs(*html), login.css(*css) 코드에 넣어 줄 예정 (최하단에 주석으로)

 

나는 최대한 ganerate 설계 테마와 비슷한 검+핑 테마를 골랐다

 

 

이후 login.ejs 파일의 body 코드 내에 html 코드 전체 붙혀넣으면 된다

 

css코드는 전체 복사해서 login.css에 붙혀넣어준다

 

 

이때! html, css 파일 연결을 해주어야하는데

login.ejs 스크립트 위에다가 css 링크를 연결할 예정!

드래그 한 줄이 추가해준 코드

 

 

그래서!!!!!!

https://codepen.io/marcobiedermann/pen/nbpKWV

ㅠㅠㅠㅠㅠㅠㅠㅠ 성공.. 소중하구 작은 나의 화면..이 아닌 저작자의 화면 >_< 

그래도 행복훼

 

 

**ctrl+f -> 코드 검색 가능

 

여기서 설정해주어야하는 것! 

login.ejs 파일에서 적힌 코드인 script의 주소창 

<script src = "/js/home/login.js" defer></script>

즉, login.js 코드에 가보면

const id = document.querySelector("#id"),

psword = document.querySelector("#psword"),

이와같이 id, psword로 통일 시킨 것을 확인할 수 있다.

 

그렇기에 다시 login.ejs파일로 돌아와서 input 부분에 위치한 

<input autocomplete="username" id="login__username" type="text" name="username" class="form__input" placeholder="아이디" required>

<input id="login__password" type="password" name="password" class="form__input" placeholder="비밀번호" required>

요 코드들을 각각

id = "id"

id = "psword"로 수정해주어야한다.

 

또한 

login.ejs에서 로그인 창에서 회원가입 버튼을 누를 시, 회원가입 창으로 넘어가는 api를 작성했는데

이는 라우트와 연결되어있기에, index.js 창에서 코드를 추가해주어야한다.

router.get('/auth/signup', ctrl.output.signup);

 

 

또한

home.ctrl.js 창에서

register : (req, res) => {

res.render("home/register");

}

해당 코드 추가

---

 

html (login.ejs)

 

placeholder -> username, password 와 같은 회색 칸