로그인 화면은 웹사이트에서 가장 중요한 페이지 중 하나입니다.
사용자가 사이트에 접속할 때 첫 번째로 마주하게 되는 화면이 바로 로그인 화면이기 때문이죠.
로그인 폼의 디자인은 사용자의 첫 인상을 좌우하기 때문에, 깔끔하고 직관적인 레이아웃을 갖추는 것이 중요합니다.
오늘은 간단한 로그인 폼을 HTML과 CSS로 만드는 방법을 소개하려고 합니다.
💻 HTML 구조 만들기
우선, 로그인 폼을 구성할 기본적인 HTML을 작성해야 합니다.
이 HTML은 로그인 화면에서 사용자로부터 아이디와 비밀번호를 입력받고, 로그인 버튼을 누를 수 있는
간단한 폼을 제공합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<div class="login-box">
<h1>로그인</h1>
<form action="#" method="POST">
<div class="input-group">
<label for="username">아이디</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">비밀번호</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-btn">로그인</button>
<div class="footer-links">
<a href="#">아이디 찾기</a> |
<a href="#">비밀번호 찾기</a> |
<a href="#">회원가입</a>
</div>
</form>
</div>
</div>
</body>
</html>💻 로그인 폼 스타일링: CSS 코드
HTML 구조를 만든 후에는 이제 이 폼을 꾸며줄 CSS를 작성해야 합니다. 깔끔하고 간단한 디자인을 목표로 스타일링을
진행할 것입니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.login-box {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 300px;
text-align: center;
}
h1 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
.input-group label {
display: block;
font-size: 14px;
margin-bottom: 5px;
color: #333;
}
.input-group input {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-btn {
width: 100%;
padding: 10px;
background-color: #1ec800;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.login-btn:hover {
background-color: #16b300;
}
.footer-links {
margin-top: 10px;
}
.footer-links a {
font-size: 12px;
color: #555;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
✅ 결과
위의 HTML과 CSS를 적용하면, 깔끔하고 직관적인 로그인 화면이 완성됩니다.
오늘은 HTML과 CSS를 사용하여 네이버와 비슷한 로그인 화면을 만드는 방법을 소개했습니다.
이 코드를 기반으로 자신의 스타일에 맞게 추가적인 스타일을 넣거나, 기능을 확장하여 더 나은 로그인 페이지를 만들 수 있습니다.
이 글이 도움이 되셨다면, 댓글로 의견을 남겨주세요. 혹시 추가적인 질문이나 요청이 있으시면 언제든지 말씀해 주세요!
📌 추가 내용
로그인화면에 아이디와 비밀번호를 설정 한 후, 로그인이 되는 것을 HTML과 CSS로 진행하는 방법!!
//넘어오는 ID 값 지정
String username = request.getParameter("username");
//넘어오는 PW 값 지정
String password = request.getParameter("password");
// 여기에 실제 로그인 인증을 위한 코드 추가
// 예시로 아이디가 "admin", 비밀번호가 "1234"일 때 성공으로 처리
if ("admin".equals(username) && "1234".equals(password)) {
out.println("<h2>로그인 성공!!!</h2>");
} else {
out.println("<h2>등록된 로그인정보가 없습니다..</h2>");
}
'IT정보' 카테고리의 다른 글
| 동기와 비동기의 차이, 운영체제 관점에서 쉽게 이해하기 (2) | 2025.03.27 |
|---|---|
| TCP/IP 완벽 가이드 - 인터넷의 핵심 원리 쉽게 이해하기 (2) | 2025.03.26 |
| 인증(Authentication) & 인가(Authorization) 완벽 정리 (0) | 2025.03.25 |
| SQL 기본 개념 완벽 정리 – SELECT, JOIN, GROUP BY, 서브쿼리 (2) | 2025.03.24 |
| HTTP 프로토콜 완벽 가이드! 신입 개발자를 위한 쉬운 설명 📖 (0) | 2025.03.22 |
| 접근 권한: root와 admin 권한을 이해하는 법 (2) | 2025.03.20 |
| 프론트엔드 개발과 백엔드 개발, 무엇이 다를까? (6) | 2025.03.19 |
| 클라우드란? 개발자가 꼭 알아야 할 IT 개념 (6) | 2025.03.18 |
