CSS-9 로그인 화면 제작 (22/10/27)

[목차]
1. <form> 엘리먼트
2. 쿼리스트링
3. 로그인 화면 만들기

1. <form> 엘리먼트

로그인 화면을 구현하기 위해서는 우선 HTML의 <form>에 대해 알아야 한다.
<form>이란 사용자의 데이터를 서버에 전송하기 위한 엘리먼트다.
일반적으로 아래와 같은 작업을 하기 위해 <form>을 이용한다.

• 로그인을 하기 위해 아이디와 비밀번호를 요구할 때
• 회원가입을 위한 개인정보 입력창을 띄울 때

로그인 화면을 만들 때의 <form>의 문법은 다음과 같은 형태로 적는다.

<form action="" method="">
	<span class="int">
		<input type="text" name="userid" id="uid">
	</span>
	<span class="int">
		<input type="password" name="userpw" id="upw">
	</span>
	<button type="submit">로그인</button>
</form>

로그인

<form>에는 크게 action과 method라는 두 가지 속성이 있다.

• action : 사용자가 입력한 데이터를 전송할 서버의 URL
  ex)action="http://naver.com"
• action : 데이터를 전송하는 방법
  ex) action="get", action="post"
  
  

이 중에서 method 속성의 값은 get과 post로 나뉘는데
get방식은 사용자가 기입한 정보가 URL에 표시되는 반면,
post방식을 사용하면 URL에 이러한 정보가 담기지 않는다.

(method에 아무 것도 적지 않았을 때의 기본값은 get이다.
그리고 일견 post방식이 보안상으로 더 우수해보이지만,
관리자도구를 열어서 금방 숨겨진 값을 찾을 수 있기 때문에 별 차이는 없다.)

---

2. 쿼리스트링 (Query String)

Query는 질문이라는 뜻.

쿼리스트링은 URL에서 ? 뒤에 적힌 모든 문자열을 의미한다.

get 을 통해 드러나는 문자정보는 이 쿼리스트링으로 URL에 표현된다.

naver.com?userid=web7722&userpw=1234

(여기서 ?뒤에 적힌 정보값들이 모두 쿼리스트링이다.)

userid와 userpw는 <input>에 명시된 name속성,
web7722와 숫자 1234는 사용자가 <input>에 기입한 값이다.
(name속성의 역할은 채워넣은 값이 주소창에 전달되도록 하는 것.)

3. 로그인 화면 만들기

간단한 형태의 로그인 화면을 만들어보자.

[html]

<input type="checkbox" name="" id="layer_btn">
<div id="layer">
    <div id="content">
        <h2>
            <span>로그인</span>
            <span><label for="layer_btn">X</label></span>
        </h2>
	<div class="login_frm">
            <form method="get" action="http://naver.com">
                <input type="hidden" name="where" value="nexearch">
                <span class="int">
                    <input type="text" name="userid" id="uid" placeholder="아이디를 입력해주세요.">
                </span>
                <span class="int">
                    <input type="password" name="userpw" id="upw" placeholder="패스워드를 입력해주세요.">
                </span>
                <button type="submit">로그인</button>
                <span>아직도 회원이 아니신가요?
                    <a href="#">회원가입</a>
                </span>
            </form>
        </div>
    </div>
</div>
<div id="wrap">
    <div id="header">
        <h1>logo</h1>
        <ul>
            <li><label for="layer_btn">menu</label></li>
        </ul>
    </div>
</div>

[css]

#layer_btn {
    display: none;
}

#layer {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
}

#layer_btn:checked ~ #layer {
    display: flex;
}


#layer > #content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
    height: 300px;
    box-shadow: 5px 5px 15px 0px #666;
    background: #fff;
}

#content > h2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 20%;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

#content > .login_frm {
    width: 400px;
    height: 80%;
}


#content > .login_frm > form {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

#content > .login_frm > form > .int > input {
    width: 100%;
    padding: 7px 14p;
    margin-bottom: 5px;
}

#content > .login_frm > form > button[type="submit"] {
    width: 100%;
    padding: 7px 14px;
    border-radius: 2px;
    border: none;
    background: #ddd;
    font-size: 14px;
    font-weight: bold;
}

• <button>의 타입은 submit(제출). 이 타입은 <form> 엘리먼트 안에서만 의미를 가진다.
  (submit의 효과로 로그인 버튼을 누르면 <form>의 action에 기입된 URL로 이동한다.)

• 메뉴를 누르면 로그인 화면창이 나타나고 X를 누르면 닫힌다.
  ([HTML] <label for="layer_btn">
  [CSS] #layer_btn {display: none;} #layer_btn:checked ~ #layer {display: flex;})

• <input type="hidden">은 사용자가 기입할 필요가 없는 정보를
  HTML에서 처리해서 넘기도록 하는 입력 양식이다.