본문 바로가기

웹 개발

웹 개발 공부 일기장 1-과제 (로그인 페이지)

저번 시간 마지막에 있던 과제를 해보자!!!

 

1. 로그인 페이지 만들기 

- 간단하게 아이디는 admin, 비밀번호는 admin1234로 로그인 시 로그인 되었다는 출력만 가능하게 만들기.

 

login.php 내용 1

 

login.php 내용 2

 

2. 로그인 페이지 꾸미기

- CSS를 어떻게 사용하며, CSS 파일과 php 파일을 어떻게 연결하는 지 이해할 수 있을 정도로 만들기.

 

base.css 내용

 

login.css 내용

CSS

CSS 파일과 HTML 파일을 연결하고 싶을 경우 link 태그의 href속성을 통해 해당 파일 경로를 적어주면 스타일이 적용됩니다. 

파일이 아니더라도 위에서 hr 태그처럼 원하는 태그에 style 속성으로 바로 스타일을 적용 가능

 

bosy와 같이 그냥 태그만 적을 경우 해당 태그에 대해 스타일을 적용시킵니다.

#login과 같이 #id명을 적을 경우 해당 id Element에만 스타일을 적용시킵니다.

.btn과 같이 .class명을 적을 경우 해당 클래스를 가진 Element에 대해 스타일을 적용시킵니다. 

 

해당 스타일을 적용시키고 싶을 경우 css 코드를 알아본 후 위와 같이 원하는 곳에 적어주면 적용됩니다.

 

결과 페이지

 

비밀번호를 틀리게 적었을 경우

 

올바르게 로그인할 경우

 

이렇게 1주차 수업 정리와 과제 풀이까지 완료!!!!