스타벅스 클론(16) - 로그인 페이지

로그인 페이지를 만들어보겠습니다.

로그인 페이지는 기존 메인페이지와 유사한 부분이 많습니다.

공통적으로 사용할 수 있는 부분을 따로 관리하겠습니다.

 

로그인 페이지는 메인페이지의 header나 footer 부분과 같아서 메인페이지 해당부분 복사해서

signin의 index.html에 붙이겠습니다.

 

붙이고 나서 약간의 수정이 필요합니다.

예를 들어 head부분에 라이브러리나 youtube api를 제거합니다.

또는 이미지나 main.js의 경로를 수정해야 합니다.

 

master branch시, html의 경로는 모두 정대경로라 ./만 앞에 붙이면 되지만,

signin는 폴더 하나 더 있어서 ../로 수정해야 합니다.

 

Windows: Ctrl + H

MacOS: Cmd + Option + F

위 단축키를 사용해서 검색 및 대체를 할 수 있습니다.

전부 대체는 빨간박스 두번째 버튼을 클릭하면 됩니다.

 

이때 로그인 페이지 열고 F12 개발자 모드를 보시면 에러가 표시될 겁니다.

이게 왜냐면 main.js에서 요소를 찾아서 이벤트를 실행하는데 루트경로인 html파일은 문제없이 작동되지만,

signin 폴더의 html파일에 요소들을 지웠습니다.

js파일은 더 이상 요소들을 찾지 못해서 에러를 뜹니다.

 

이럴 때, 공통적으로 사용된 js코드들을 별도인 common.js에 붙여넣어줍니다.

 

common.js파일 생성 후, 루트경로 html파일 head부분에 연결해주고,

signin폴더의 html파일에도 연결해주야 합니다.

 

css파일도 마찬가지로 common.css를 생성후 공통적으로 적용된 부분을 별도 관리합니다.

 

로그인 페이지를 만들어봅니다.

strong 태그는 강조하고 싶다는 뜻이지만 별다른 스타일이 없습니다.

span으로 대체해도 상관없습니다.

 

form태그는 어떤 내용을 제출하는 데 주로 사용됩니다.

input submit은 form과 한 세트로 많이 사용합니다.

 

css파일에서는 두 개만 설명하겠습니다.

.signin__card form [type="submit"]  는 속성선택자입니다.

css에서 흔히 class나 id로 혹은 태그 이름 자체로 스타일을 부여해주는데

가끔 타입선택자도 사용합니다.

 

.actions a 중 flex-grow와 flex-basis를 사용했습니다.

flex-grow는 요소들 증가 비율은 1이며, flex-basis 기본 너비는 0입니다.

즉, 1: 1: 1 비율로 3개 요소를 배치해줍니다.