로그인 페이지

본 내용은 개념정리 3의 바로 다음 과정입니다

 

login_proc.php 파일을 열어 다음의 코드를 입력합니다

if ($user_name == "admin" && $user_pass == "admin1234") {
	egcho "로그인 성공"
} else {
	echo "로그인 실패"
}

 

 

이 코드는 user_name의 값이 "admin"일 경우 1차 검사를 통과하고,
user_pass의 값이 "admin1234"일 경우 2차 검사를 통과하여 로그인을 성공시키는 간단한 코드입니다.

http://192.138.136.229:1018/login.php에 접속하여 설정한 값 "admin"과 "admin1234"를 입력해보죠

설정한 값이 일치하면 "로그인 성공"이 출력되고

 

설정한 값과 다르면 "로그인 실패"가 출력됩니다

 

HTML 및 CSS 파일 생성

 

VScode를 열어 HTML과 CSS 파일을 같은 폴더에 생성한 후,
"!" 키를 눌러 HTML 스켈레톤 구조를 생성합니다.

 

CSS 파일의 경로를 설정하고, 마음에 드는 구글 폰트 코드를 추가합니다.

 

대략적으로 구상한 이미지는:

• 틀 안에 아이디와 비밀번호 입력창을 배치하고,
• 입력창에 커서를 올리면 살짝 움직이며,
• 아이디와 비밀번호 입력창을 클릭했을 때, 텍스트가 위로 이동하는 효과를 구현하는 것입니다.

이제 코드를 작성해보겠습니다

 

"login-window": 아이디와 비밀번호 입력 필드를 감싸는 틀입니다.

"main" 섹션에 "form" 태그를 넣어 "login_proc.php"와 연결합니다.

 

아이디 입력 및 애니메이션 추가

"input-container" 안에 아이디를 입력받는 코드를 작성하고,
그 아래에 "label"을 따로 생성합니다. "placeholder"에 아이디를 적는 방법도 있지만,
작동하지 않아 "label"에 동작 코드를 적용했습니다.
"label"에 애니메이션을 적용하기 위해 "class=animated"로 설정했습니다.

 

 

비밀번호 부분도 아이디와 동일하게 "input-container" 부분을 복사하여 아래에 붙여 넣고,
[type, id, name, label] 속성들을 비밀번호와 관련된 값으로 변경했습니다.
"form" 태그 안에는 서버로 전달할 인자를 설정했으니, 버튼 부분도 추가해줍니다.

 

기본적인 스켈레톤 작업이 끝났으니, 잘 작동되는지 확인해봅시다.

예상한 대로 잘 작동하며, CSS를 입혀 좀 더 시각적인 효과를 추가하면 더 나아질 것 같습니다

 

body 부분에 집중적으로 중요 코드가 물려 있으니 body 부분부터 차근차근 접근해 나가야겠네요

 

 

• body 부분에 전체적인 폰트를 적용, 입력창에 커서를 올렸을 때 동작하는 모션을 추가
• 입력창의 모서리를 살짝 둥글게 만들고, 배경과 대비되는 색상을 설정
• 그림자를 추가

 

 

 

 

• 머릿말을 중앙으로 배치하고, 박스의 크기를 조정
• 박스에 과도하게 적용된 검은색 테두리를 수정

 

박스 내부 요소의 포지션을 설정하고, "pointer-events: none"

"pointer-events:none"

을 사용하여

"label"의 텍스트와 상호작용하지 않도록 했습니다. 버튼의 입체감을 제거하고,
버튼에 커서를 올리면 색상과 모양이 변하도록 설정했습니다.

 

input : focus + .animated = 입력창이 선택 됐을때

input : not(placeholder-shown) + animated = 입력창이 비어 있지 않을때 사용자 설정 코드 작동

 

input : focus + .animated = 입력창이 선택 됐을때

input : not(focus) : valid + .animated =  입력창에 여전히 값이 있는 경우 사용자 설정 코드 작동

 

위의 코드처럼, "label"이 위로 올라가는 모션을 추가했습니다.
그런데 너무 빠르게 올라가므로

 

 

이렇게 딜레이를 추가하여 자연스럽게 변경했습니다.

 

근데 제가 생각 했던 구조랑은 조금 다르게 나왔습니다 "label"이 입력창 밖으로 나가지 않고 안에 머물렀으면 좋겠는데

이것을 어떻게 하면 해결 될까....한시간을 검색 한 끝에 찾아냈습니다 순서를 바꾸면 되는 것이였네요

근데 순서도 바꿨는데도 안되길래 우선 순위를 설정해주는 코드 "!important"를 사용했습니다.

 

이제 잘 작동하는 것을 볼 수 있습니다. "!important"는 강제로 우선순위를 끌어 올려 원하는 값을 도출해 낼 수 있지만

코드가 난잡해질 수 있다는 단점이 있습니다

코드 테스트

구상한대로 결과가 나왔으니 termius에 가서 작성한 코드를 적용시키러 가봅시다

 

login.php 파일을 열고, 작성한 HTML 코드를 그대로 복사하여 붙여 넣습니다.

 

"vi style.css"

명령어로 CSS 파일을 생성하고, 작성해둔 CSS 코드를 붙여 넣습니다.

 

 

웹 브라우저로 접속하여 아이디와 비밀번호를 입력하고, 잘 작동하는지 확인해보죠.

 

 

아주 잘 작동하네요.