[유튜브 클론코딩] 2.19 Join : Log In HTML

2.19 Join : Log In HTML

이번 파트에서는 Join.pug , Login.pug, partials/socialLogin.pug를 만들 것이다.

시작하기 전에 계획을 세워보자. README.md 수정함

home 화면에 .videos를 추가하고, 그 안에 h1 태그에 Video 텍스트로 추가한다.

 

extends layouts/main

block content 

    .videos 

        h1 Video

↑ home.pug

video 부분은 mongoDB(데이터베이스) 부분 들어가기 전까지는 그냥 테스트 느낌으로 가짜로 두기만 한다.

 

Join.pug 작성하기

extends layouts/main

block content 

    .form-container 

        form(action=routes.join, method="post")

            input(type="text" name="name", placeholder="Full Name")

            input(type="email", name="email", placeholder="Email")

            input(type="password", name="password", placeholder="Password")

            input(type="password", name="password2", placeholder="Verify Password")

            input(type="submit", value="Join Now")

        include partials/socialLogin //이건 이따가 socialLogin.pug 만들거임

↑ join.pug

join에는 비밀번호를 입력할 때 비밀번호확인(verify password)란도 있어야 한다.

 

 

Login.pug 작성하기

extends layouts/main

block content 

    .form-container 

        form(action=routes.login, method="post")

            input(type="email", name="email", placeholder="Email")

            input(type="password", name="password", placeholder="Password")

            input(type="submit", value="Log In")

        include partials/socialLogin //이건 이따가 socialLogin.pug 만들거임

↑ login.pug

method가 get이면 정보가 모두 url에 보이게 된다. 정보를 비밀로 유지 해야하기 때문에method는 post로 해야한다.

 

 

partials > socialLogin.pug 파일 만들기

join, login도 끝냈고, 이제 partial을 만들 것이다.

button을 만들고 싶은 만큼 만들기 위해 partial을 만들건데, 버튼 하나는 '깃헙 계정으로 로그인하기', 다른 버튼은 '페이스북 계정으로 로그인'을 위한 것이다.

이 두 버튼을 join화면과 login 화면에 모두 띄울 것이다.

 

.social-login

    button

        span

            i.fab.fa-github 

        |Continue with Github

 ↑ socialLogin.pug

|를 붙인 이유는 저걸 안붙이면 텍스트를 태그로 취급하기 때문에 태그 없이 텍스트만 치려고 하면 |를 붙여주어야 한다.

다 만들었으면 이것을 아까 작업하던 join.pug와 login.pug의 form container에 추가한다. (include)

 

마찬가지로 Continue with facebook 버튼도 작업하면 된다.

 

.social-login

    button.social-login--github

        span

            i.fab.fa-github 

        |Continue with Github

    

    button.social-login--facebook

        span

            i.fab.fa-facebook

        |Continue with Facebook

 

 

+)추가

css작명을 하는 법 : bem방법론에 대해서(block__element--modifier)

참조

https://velog.io/@solmii/CSS%EB%B0%A9%EB%B2%95%EB%A1%A01-BEM-a.k.a%EC%9E%91%EB%AA%85%EC%86%8C