<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
.btn-search {
background-color: #ff5a5f;
border: 0px;
width: 70px;
height: 45px;
font-size: 15px;
color: white;
font-weight: 700;
border-radius: 6px;
box-shadow: 3px 3px 1px 0px rgb(148, 101, 101);
}
.btn-google {
background-color: white;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 700;
border-radius: 6px;
border: 1px solid black;
}
.tf-search {
height: 40px;
width: 300px;
font-size: 20px;
border-radius: 4px;
}
.tf-search2 {
height: 40px;
width: 300px;
font-size: 20px;
border-radius: 4px;
padding: 0 0 0 35px;
}
.box-search {
position: relative;
}
.icon-search {
position: absolute;
top: 15px;
left: 10px;
}
</style>
</head>
<body>
<h1>버튼</h1>
<hr>
<input type="button" value="검색" class="btn-search">
<br><br>
<button class="btn-google">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px" height="25px">
<path fill="#FFC107"
d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
<path fill="#FF3D00"
d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
<path fill="#4CAF50"
d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
<path fill="#1976D2"
d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
</svg>
구글 계정으로 로그인
</button>
<br>
<h1>Input태그</h1>
<hr>
<input type="text" class="tf-search" placeholder="🔎 Search...">
<br><br>
<div class="box-search">
<input type="text" class="tf-search2" placeholder="Search...">
<i class="fa-solid fa-magnifying-glass icon-search"></i>
</div>
</body>
</html>Share article
