CSS를 활용하면 이메일·비밀번호 입력 필드뿐만 아니라 트위터, 페이스북 같은 소셜 미디어 로그인 버튼까지 포함된 반응형 로그인 폼을 손쉽게 만들 수 있습니다. 아래 예제에서는 Font Awesome 아이콘 라이브러리를 함께 사용해 각 소셜 버튼에 브랜드 아이콘을 추가하고, 미디어 쿼리로 모바일 화면까지 대응하는 구조로 작성했습니다.
전체 코드 예시
<!DOCTYPE html>
<html>
<head>
<title>소셜 미디어 로그인 버튼이 포함된 반응형 로그인 폼</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
form {
border: 1px solid rgb(182, 180, 180);
padding: 20px;
width: 800px;
margin-left: 20%;
}
input {
width: 100%;
border: 1px solid #ddd;
padding: 5px 10px;
height: 45px;
margin: 0px 0px 20px;
border-radius: 4px;
box-sizing: border-box;
font-size: 17px;
}
button {
margin: 10px auto 30px;
display: table;
font-size: 20px;
padding: 10px 30px;
background-color: #4caf50;
border: none;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
input[type="checkbox"] {
height: 16px;
width: 16px;
margin-right: 5px;
float: left;
}
.Social button.twitter-btn,
.Social button.facebook-btn {
width: 100%;
font-size: 18px;
margin: 0px 0px 10px;
}
.Social button.twitter-btn {
background-color: #26abfd;
}
.Social button.facebook-btn {
background-color: #3f68be;
}
.Social {
border-top: 1px solid #ddd;
padding-top: 30px;
margin-top: 30px;
}
.Social button i {
margin-right: 5px;
font-size: 20px;
}
@media (max-width: 1000px) {
form {
width: 100%;
margin-left: 0px;
}
}
</style>
</head>
<body>
<h1>소셜 미디어 로그인 폼 예제</h1>
<form>
<input type="email" placeholder="아이디 또는 이메일 주소" name="username" required/>
<input type="password" placeholder="비밀번호 입력" name="pass" required/>
<button type="submit">로그인</button>
<label class="Remember">
<input type="checkbox" name="remember" />로그인 상태 유지</label>
<span class="forgotPass">비밀번호를 잊으셨나요?</span>
<div class="Social">
<button type="submit" class="twitter-btn">
<i class="fa fa-twitter" aria-hidden="true"></i> 트위터로 로그인
</button>
<button type="submit" class="facebook-btn">
<i class="fa fa-facebook" aria-hidden="true"></i> 페이스북으로 로그인
</button>
</div>
</form>
</body>
</html>주요 코드 설명
- Font Awesome 연동: CDN 링크를 통해 아이콘 라이브러리를 불러와
<i class="fa fa-twitter">처럼 간단한 클래스만으로 소셜 미디어 아이콘을 삽입할 수 있습니다. - 폼 스타일링: 폼 전체에 회색 테두리와 여백을 지정하고 너비를 800px로 설정해 데스크톱에서 안정적인 레이아웃을 제공합니다.
- 입력 필드: 모든 input 요소의 너비를 100%로 지정하고 높이 45px, 둥근 모서리(border-radius)를 적용해 깔끔한 사용자 경험을 만듭니다.
- 소셜 로그인 버튼: 트위터 버튼은
#26abfd, 페이스북 버튼은#3f68be로 각 브랜드 고유의 색상을 적용해 시각적으로 구분됩니다. - 호버 효과: 마우스를 올렸을 때 투명도(opacity)가 변하도록 설정해 클릭 가능한 요소임을 직관적으로 알려줍니다.
- 반응형 처리:
@media (max-width: 1000px)미디어 쿼리를 사용해 화면 너비가 1000px 이하일 때 폼이 전체 너비를 차지하도록 하여 모바일 기기에서도 자연스럽게 표시됩니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 로그인 폼이 출력됩니다.
