Semi Login Page : CSS version
DATE : 2023/10/28
์ด๋ฒ์๋ CSS๋ก ์คํ์ผ์ ์ ํ Login page๋ฅผ ๋ง๋ค์ด๋ณด๋ ค๊ณ ํ๋ค!
(bootstrap๊ณผ๋ ๋ฌ๋ฆฌ CSS๋ ๋ชจ๋ ์ฝ๋๋ฅผ ์ง์ ์์ฑํ๋ค)
์ฝ๋๋ฅผ ์ดํด๋ณด๊ธฐ ์ , ์์ฑ๋ ๋ชจ์ต๋ถํฐ ๋ณด๊ณ ๊ฐ์.
Semi Login Page : Bootstrap version๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ํ์ด์ง์์ ์ฒ๋ฆฌํ๊ณ ์ ํ๋ ๊ฑด
์ฌ์ฉ์๊ฐ admin:admin1234๋ฅผ ์ ๋ ฅํ์ ๋๋ง ๋ก๊ทธ์ธ์ ํ์ฉํ๋ ๊ฒ์ด๋ค.
๊ทธ๋ผ login page code๋ถํฐ ํ๋์ฉ ์ดํด๋ณด๋๋ก ํ์!
[index.html]
index.html์ ์์์ ํ์ธํ ํ์ด์ง์ ์ฝ๋์ด๋ค.
์ด๋ฒ์๋ CSS๋ก ์คํ์ผ์ ์ ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉํ style.css ํ์ผ์ link tag๋ก ์ฐ๊ฒฐํด์ค๋ค.
๋ชจ๋ tag๋ฅผ ์ ์ผ ๋ฐ๊นฅ์์ ๋ฌถ์ด์ฃผ๋ <div> tag ์์ผ๋ก
LOGIN page์์ ์๋ ค์ฃผ๋ <h1> tag
form์ ๊ตฌ์ฑํ๊ธฐ ์ํ <form> tag
์ฌ์ฉ์๊ฐ ์ด๋ค ๊ฐ์ ์ ๋ ฅํ๋ฉด ๋๋ ์ง placeholder ์ญํ ์ ํ๋ <label> tag
์ฌ์ฉ์๊ฐ ์ ๋ ฅํ๋ ๊ฐ์ ๋ฐ๋ <input> tag
๋ฒํผ ์ญํ ์ <button> tag
์ด์ ๊ฐ์ด element๊ฐ ๊ตฌ์ฑ๋์ด ์๋ค.
<form> tag์ action ๊ฐ์ด "result.php"์ธ ๊ฑธ ๋ณด์ ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ๋๋ฌ ํ๋ผ๋ฏธํฐ๋ฅผ ์ ๋ฌํ๋ฉด
๊ทธ ๋ค์์ผ๋ก ์คํ๋๋ ์ฝ๋๊ฐ result.php์์ ์ ์ ์๋ค.
๊ทธ๋ผ ์ด๋ฒ์ result.php code๋ฅผ ํ์ธํด๋ณด์!
[result.php]
result.php๋ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ username & password๋ฅผ $_POST์์ ๊ฐ์ ธ์ ๊ฐ๊ฐ
๋ณ์$user, $password์ ํ ๋นํ๋ค.
๋ง์ฝ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ๊ณ์ ์ด admin:admin1234๋ผ๋ฉด result.html๋ก ์ด๋ํ๊ณ
๊ทธ ๋ฐ์ ๊ฒฝ์ฐ๋ ๋ชจ๋ POP up์ฐฝ์ ๋์ด ๋ค, ๋ค์ index.html๋ก ์ด๋ํ๋ค.
์ฆ ์ฐ๋ฆฌ๊ฐ ๋ง์กฑ ์ํค๊ณ ์ ํ๋ ์กฐ๊ฑด์ ๋ถํฉํ ๋๋ง result.html๋ก ์ ๊ทผํ ์ ์๋ค๋ ๊ฒ!
๊ทธ๋ ๋ค๋ฉด result.html์ด ์ด๋ป๊ฒ ๊ตฌ์ฑ๋์ด ์๋ ์ง ํ์ธํด๋ณด์.
[result.html]
result.html๋ก ์ ๊ทผํ๋ฉด <h1> & <p> tag์ ์ ํ ๋ฌธ๊ตฌ์ Logout ๋ฒํผ์ ๋ณผ ์ ์์ ๊ฒ์ด๋ค.
์ด๋ ๋ฒํผ์ <form> tag ์์ ์์นํ์ง ์์ง๋ง
๋ฒํผ์ผ๋ก์จ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ธฐ ์ํด ์งง์ JS code๋ฅผ ์์ฑํ๋ค.
[logout.js]
result.html์ ์๋ element ์ค id๊ฐ "logout_btn"์ธ ๊ฑธ ์ฐพ์์ btn์ด๋ผ ์ด๋ฆ์ ๋ถ์ธ๋ค.
๋ง์ฝ btn์ "click"์ด๋ผ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ฒ ๋๋ฉด index.html๋ก ์ด๋ํ๋ผ๋ ์ฝ๋์ด๋ค.
์ฌ์ฉ์๊ฐ Logout ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ด ์ฝ๋๊ฐ ๋์ํด์ผ ํ๊ธฐ ๋๋ฌธ์ result.html์์
<script> tag๋ก js code๋ฅผ ์ฐ๊ฒฐํด์ค ๊ฒ!
CSS๋ฅผ ์ ์ธํ ๋ชจ๋ ์ฝ๋๋ฅผ ํ์ธํ์ผ๋ ์ ๋๋ก ๋์ํ๋ ์ง, ํ๋ฉด์ผ๋ก ํ์ธํด๋ณด์!
lndex.html๋ก ์ ๊ทผํ๋ฉด LOGIN form์ด ๋ฑ์ฅํ๋ค.
admin:admin1234๋ฅผ ์ ๋ ฅํ๊ณ Log in ๋ฒํผ์ ๋๋ฅด๋ฉด
if๋ฌธ ์กฐ๊ฑด์ ๋ง์กฑํ๊ธฐ ๋๋ฌธ์ Logout ๋ฒํผ์ด ์ ๊ณต๋๋ result.html๋ก ์ด๋ํ๊ฒ ๋๊ณ
admin:admin1234๊ฐ ์๋ ๋ค๋ฅธ ๊ณ์ ์ ์ ๋ ฅํ๋ ๊ฒฝ์ฐ์๋
POP up ์ฐฝ์ด ๋์์ง๋ ๊ฑธ ๋ณผ ์ ์๋ค.
logout ๋ฒํผ์ ๋๋ฅด๊ฑฐ๋ pop up ์ฐฝ์ ๋ด๋ฆฐ ํ์๋ ๋ค์ index.html๋ก ๋์๊ฐ๋ค!
ํ์ด์ง๋ ์ ๋์ํ๋ ๊ฑฐ ๊ฐ์ผ๋ ์ด์ ๋ง์ง๋ง์ผ๋ก CSS code๋ฅผ ํ์ธํด๋ณด์!
[style.css]
html code๋ฅผ ๋ณด๋ฉด ๋ชจ๋ style.css๋ฅผ ์ฐ๊ฒฐํ ๊ฑธ ํ์ธํ ์ ์๋๋ฐ
์ด๋ ์ ์ฒด์ ์ผ๋ก ๋์ผํ ์คํ์ผ์ ์ ํ๊ณ , ๋ค๋ฅด๊ฒ ์คํ์ผ์ ์ ์ฉํ ๋ถ๋ถ๋ง
์ ํ์๋ก ๊ตฌ๋ถํด ํ๋์ ํ์ผ๋ก ์ฝ๋๋ฅผ ์ค์ด๊ธฐ ์ํจ์ด๋ค.
๊ทธ๋์ CSS๋ฅผ ๋ณด๋ฉด login_btn & logout_btn์ ์ ์ธํ ๋ค๋ฅธ tag๋ ๋์ผํ๊ฒ ์คํ์ผ์ด ์ ์ฉ๋๊ณ
button๋ง ํด๋์ค๋ฅผ ๊ฐ๊ฐ ์ง์ ํด ์์์ ๋ค๋ฅด๊ฒ ์ ํ๊ณ ์๋ค.
๋ง์ฝ result.html์ ์ํด CSS ํ์ผ์ ๋ฐ๋ก ์์ฑํ๊ฒ ๋๋ฉด
style.css ๋ด์ฉ๊ณผ ๊ฑฐ์ ์ค๋ณต๋๋ ํ์ผ์ด ํ๋ ๋ ์๊ธฐ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์
์ด์ ๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก ์ฝ๋์ ์์ ์ค์ผ ์ ์๋ค!!
Last updated