1. 로그인 페이지


다음 조건으로 로그인 페이지를 만들어보도록 하겠습니다.

  1. html, css, php 만으로 작성하기

  2. 아이디: admin, 비밀번호 : admin1234 로 로그인 할수 있게 하기

  3. 잘못된 정보로 로그인 했을 시, 경고문 띄우기

  4. 로그인 된 화면에서 로그아웃하면 본래 로그인화면으로 돌아가기

    밑에 동영상과 같은 시나리오입니다.

video3-ezgif.com-video-to-gif-converter


1.1 html 문구 작성(파일이름: index.php)


1.1.1 head

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> ### 모든 익스플로러에서 호환성보기 무시
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    ### width=device-width :기기에 따라 화면 너비에 따르기,initial-scale :브라우저 페이지 처음로드 할때 초기 크기 수준
    
    <title>Document</title>
    <link rel="stylesheet" href="style.css"> #css
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> #아이콘 
</head>


1.1.2 body

<body> #모양마다 class를 지정해주면 css를 보다 편하게 작업할 수 있다. #가독성이 좋게 설명구간 별로 --- 표시
 
 	#background를 이미지가 아니라 동영상으로 보이기
    <div class="back">
        <video autoplay loop muted plays-inline>
            <source src="video1.mp4" type="video/mp4">
        </video>
        -------------------------------------------
        #로그인창
        <div class="wrapper">
            <form action="login.php" method="post"> # form, post방식을 사용해서 url은 표시 안되지만 요청정보를 보냄
                <h1>Login</h1> #로그인
                #로그인 실패시 밑에 incorrect 글귀,login.php에서 로그인 실패시 url이동하는데 그때 파라미터 글귀로 가져옴 
				<div class="php"> 
					<?php if (isset($_GET['incorrect'])) { ?>
						<i class='bx bxs-error'></i>
						<p class="incorrect"><?php echo $_GET['incorrect'] ; ?></p>
                	<?php } ?>
				</div>
                
                ------------   
                #아이디
                <div class="input-box"> 
                    <i class='bx bxs-user'></i>
                    <input type="text" name="id" required>
                    <label >Username</label>
                </div>
                ------------
                #비밀번호
                <div class="input-box">
                    <i class='bx bxs-lock-alt' ></i>
                    <input type="password" name="password" required>
                    <label >Password</label>
                </div>
                ------------
                #밑에 추가 사항
                <div class="remember-forgot">
                    <label><input type="checkbox">Remember me</label>
                    <a href="#">Forgot password?</a>
                </div>
                    <div>
                        <button type="submit" class="btn">Login</button>
                    </div>
                <div class="Sign-up-link">
                    <p>Don't have an account?<a href="#">Sign up</a></p>
                </div> 
            </form>
        </div>
    </div>  
</body>


1.1.3 css

#폰트
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

#모든 지정
* {
    margin: 0;
    padding: 0;  #마진과 패딩 모두 0값으로 하고, 필요에 따라 나중에 각각 지정해도됌.
    box-sizing: border-box; #border값에 따라 박스크기가 제각각이 될수 있으므로 크기지정시 같은 크기를 볼수있음.
    font-family: "Play" ,sans-serif;
}

body {
    display: flex; #화면을 박스형태로 보기
    justify-content: center; # 수평정렬
    align-items: center; #수직정렬
    min-height: 100vh; #최소크기를 vh(view height,view port)의 전체크기로 지정.
}
#로그인박스
.wrapper {
    width: 420px;
    background: transparent; #투명
    backdrop-filter: blur(5px); #배경효과
    border: 2px solid rgba(255,255,255, .2); 
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    color: #fff;
    border-radius: 10px; #둥글게
    padding: 30px 40px;
    position:relative; #박스 내에서 자유롭게 움직이기
}
#로그인 글씨
.wrapper h1{
    font-size: 36px;
    text-align: center;
}
#아이디,비밀번호 박스의 위치
.wrapper .input-box{
    position: relative;
    width: 100%;
    height: 50px;
    margin: 30px 0;
}
#아이디,비밀번호 박스의 input
.input-box input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    border: 2px solid rgba(255,255,255, .2);
    border-radius: 40px;
    font-size: 16px;
    color: #fff;
    padding: 20px 20px 20px 45px;
}
#아이디,비밀번호 박스에 들어간 내용
.input-box label{
    position: absolute;
    top:50%;
    left:50px;
    transform: translateY(-53%); #위치 옮기기
    pointer-events: none; #커서 모양바뀌는거 없애기
    color:#fff;
    transition: .5s; #움직임시간
    background-color: transparent;
    
}
#아이디,비밀번호 박스가 포커스 되었을시
.input-box input:focus {
    border-color: #18ffff;
}

# 아이디,비밀번호 
  박스에 포커스 되어있을때 라벨과 박스에 값이 있을때 라벨 모두의 경우
.input-box input:focus~label,
.input-box input:valid~label {
    top: -5px;
    left: 20px;
    font-size: 0.8rem;
}
# 아이디, 비밀번호 로고
.input-box i {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 20px;
}
# 추가 사항글
.wrapper .remember-forgot {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    margin: -15px 0 15px;
}
# 추가 사항글 중 왼쪽 박스
.remember-forgot label input {
    accent-color: #fff;
    margin-right: 3px;
}
#추가 사항글 중 오른쪽 글
.remember-forgot a{
    color: #fff;
    text-decoration: none; #밑줄
}
#추가 사항글 중 오른쪽 글, 커서올렸을시
.remember-forgot a:hover {
    text-decoration: underline; 
}
.wrapper  .btn {
    width: 100%;
    height: 45px;
    background: #fff;
    border: none;
    outline: none;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    cursor: pointer;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}
#로그인 버튼
.wrapper button {
    margin: 20px 0;
    transform: translateY(39%);
}
#로그인버튼 밑에 글 전부
.wrapper .Sign-up-link {
    font-size: 14.5px;
    text-align: center;
    margin: 20px 0 5px;
}
#회원가입링크만
.Sign-up-link p a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    margin-left: 3px;
}
#회원가입링크만,커서올렸을시
.Sign-up-link p a:hover {
    text-decoration: underline;
}
#배경화면 비디오
.back video{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1; #배경 뒤로
}
#배경화면 비디오 비율
@media(min-aspect-ratio:16/9){
    .back video {
        width: 100%;
        height: auto;
    }
}
#로그인실패시 문구
.incorrect {
    background: #f2dede;
    color: #A94442;
    padding: 6px;
    width: 100%;
    border-radius: 5px;
    position: relative;
    transform: translateY(44%);
    font-weight: 300;
    text-align: center;

}
#로그인실패시 로고
 .php i{
    position: absolute;
    top: 20%;
    left: 73px;
    z-index: 1;
    color:#A94442;

}

카테고리:

업데이트:

댓글남기기

참고