11. Log in 화면 만들기 (css- 파일분할, date 보내기)

1) 파일 분할하기

파일 분할한 모습

css 폴더에 login.css 파일을 만들어서

코드를 옮겨줌.

 

 

새로 나눈 폴더들

좀 더 정리를 해보자면

css 폴더에

components 폴더와 screens 폴더를 만들고

components 폴더 안에 status-bar.css 파일을 넣어주고

screens 폴더 안에 login.css 파일을 넣어줌.

 

 

파일을 적용한 모습

분할한 파일들을 styles.css 파일에 import 해주어야 함.

폴더이름/파일이름; 하여 적용시킴.

원한다면 주석을 달아서 구분을 해주어도 좋음.

 

현재 styles.css 파일에는

import 해준 파일들과

전체에 적용되는 코드인 font-family 코드만 있음.

 

 

2) date 보내기

log in 버튼을 클릭하면 다음 페이지로 이동하도록 만들어 보자.

 

먼저 다음 페이지를 생성해줌.

 

 

다음 페이지

다음 페이지인 friends.html 파일을 생성해줌.

 

index.html 파일의 모습

index.html 파일에서 form 부분을 수정해야 함.

<form id="login-form"> 부분에

action 과 method를 추가함.

action은 어떤 페이지로 date를 보낼건지 지정할 수 있음.

 

method 에는 2가지 방식 중 하나를 쓸 수 있음.

post 혹은 get

 

하지만,

post는 지금 이 프로젝트에서 사용할 수 없음.

post는 백엔드 서버에 정보를 전송하는 방식이기 때문.

현재 이 프로젝트에서는 서버를 갖고 있지 않음.

 

그렇기에

get 방식을 사용할 것이지만 get 방식은 보안에 취약함.

그래서 username이랑 password는 get 방식으로 보내면 안됨.

url에 포함되어도 되는 정보만 get 방식으로 보내야함.

 

 

이러한 이유로 이 프로젝트에선

action="friends.html" 을 하여

friends.html 파일로 전송하는데

method="get" 을 하여

get 방식으로 전송하도록 함.