반응형으로 만들어보려고 하는데 생각보다 겁나 어렵네;;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/main.css">
<script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="mainBg1"></div>
<div class="mainBg2">
<div class="registWrapper">
<form name="regist">
<input type="text" id="name" class="inputReg"><br>
<input type="text" id="tel" class="inputReg"><br>
<input type="text" id="nickname" class="inputReg"><br>
<button type="button" id="registBtn" class="registBtn" htef="../images/pb_1.png">
<img src="../images/pb_2.png"></img>
</button>
</form>
</div>
</div>
<div class="mainBg3"></div>
</div>
<script>
let btn = document.getElementById('registBtn');
btn.addEventListener('click', function () {
alert('아직 못혀')
})
</script>
</body>
</html>@charset "UTF-8";
* {
box-sizing: border-box;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
.mainBg1 {
width: 100%;
height: 100%;
background-image: url('../images/main_bg_1.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
.mainBg2 {
width: 100%;
height: 100%;
background-image: url('../images/main_bg_2.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.mainBg3 {
width: 100%;
height: 100%;
background-image: url('../images/main_bg_3.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.registWrapper{
padding-top: 16%;
padding-left: 3%;
text-align: center;
background-position: center center;
}
.inputReg{
font-size: 3em;
width: 30%;
height: 8%;
margin : 0.5%;
}
.registBtn{
padding-top: 3%;
background-color: transparent;
border: 0;
width: 15%;
height: 30%;
}
김성겸