모든 기기에서 잘 보이는 로그인 폼은 웹사이트 사용자 경험의 기본입니다. 이 글에서는 HTML과 CSS만을 사용해 데스크톱부터 초소형 화면까지 자동으로 대응하는 반응형 로그인 폼을 만드는 방법을 예제 코드와 함께 단계별로 살펴봅니다.
CSS 반응형 로그인 폼 예제 코드
다음은 CSS로 반응형 로그인 폼을 구현한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(189, 189, 255);
}
form {
border: 3px solid #f1f1f1;
background-color: rgb(228, 228, 228);
margin: 20px;
}
h1 {
text-align: center;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
label {
font-size: 30px;
}
button {
font-weight: bold;
font-family: monospace, sans-serif, serif;
font-size: 25px;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.profilePic {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 200px;
height: 200px;
border-radius: 50%;
}
.formFields {
padding: 16px;
}
span.pass {
float: right;
padding-top: 16px;
}
/* 초소형 화면에서 span과 취소 버튼 스타일 변경 */
@media screen and (max-width: 300px) {
span.pass {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h1>반응형 로그인 폼 예제</h1>
<form>
<div class="profilePic">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="아바타" class="avatar" />
</div>
<div class="formFields">
<label for="uname"><b>아이디</b></label>
<input type="text" placeholder="아이디를 입력하세요" name="uname" required />
<label for="pass"><b>비밀번호</b></label>
<input type="password" placeholder="비밀번호를 입력하세요" name="pass" required />
<button type="submit">로그인</button>
<label>
<input type="checkbox" checked="checked" name="remember" /> 로그인 상태 유지
</label>
</div>
<div class="formFields" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">취소</button>
<span class="pass">비밀번호를 <a href="#">잊으셨나요?</a></span>
</div>
</form>
</body>
</html>
실행 결과
위 코드를 브라우저에서 열면 프로필 이미지, 아이디·비밀번호 입력란, 로그인 버튼, 로그인 상태 유지 체크박스, 그리고 비밀번호 찾기 링크가 포함된 로그인 폼이 화면에 나타납니다.
코드의 핵심 포인트
1. 뷰포트(Viewport) 메타 태그
<meta name="viewport" content="width=device-width, initial-scale=1"> 태그는 모바일 기기에서 페이지가 실제 화면 너비에 맞게 렌더링되도록 합니다. 반응형 디자인을 위해서는 반드시 필요한 요소입니다.
2. 입력 필드 스타일링
텍스트와 비밀번호 입력 필드는 width: 100%로 부모 요소의 전체 너비를 차지합니다. box-sizing: border-box 속성 덕분에 패딩 값이 포함된 상태로도 정확히 100% 너비가 유지되어 좁은 화면에서 입력란이 삐져나가지 않습니다.
3. 원형 아바타 이미지
border-radius: 50% 속성을 적용하면 정사각형 이미지가 완전한 원 형태로 바뀌어 프로필 사진처럼 자연스럽게 표시됩니다.
4. 버튼 호버 효과
button:hover { opacity: 0.8; } 규칙은 마우스 커서를 올렸을 때 버튼이 살짝 투명해지면서 클릭할 수 있다는 시각적 피드백을 제공합니다.
5. 미디어 쿼리로 초소형 화면 대응
@media screen and (max-width: 300px) 규칙은 화면 너비가 300px 이하일 때만 적용됩니다. 이 조건에서는 '비밀번호 찾기' 링크(span.pass)가 오른쪽 정렬(float) 대신 새 줄에 표시되고, 취소 버튼도 전체 너비로 확장되어 아주 좁은 화면에서도 폼이 깔끔하게 유지됩니다.
마무리
이처럼 몇 가지 CSS 속성과 미디어 쿼리만 활용해도 별도의 프레임워크 없이 반응형 로그인 폼을 손쉽게 만들 수 있습니다. 색상, 폰트 크기, 여백 등을 조절해 자신만의 디자인으로 확장해 보세요.