안녕하세요! 오늘은 회원가입을 꾸며보겠습니다.
각각 div로 나누어서 클래스 이름을 주겠습니다!
<!DOCTYPE html>
<html>
<head>
<title>회원가입</title>
<link rel="stylesheet" href = "/css/style_join.css">
</head>
<body>
<h1>회원가입</h1>
<form action="process_join.php" method="POST">
<div class = "form-group">
<label>ID:</label><br>
<input type="text" name="id" placeholder="ID 입력" class="id-text" required><br><br>
<label>비밀번호:</label><br>
<input type="password" name="pw" class="id-text" required><br><br>
</div>
<div class = "adr-group">
<div class = "adr-value">
<div class = "adr-value2">
<label>주소:</label>
<div class = "adr-btn">
<input type="button" value="주소 찾기" onclick="search_address()"><br><br> <!-- 주소 찾기 버튼 -->
</div>
</div>
<input type="text" name="address" id="address" value="<?php echo $_GET['address']; ?>" class="adr-text" readonly> <!-- 검색된 주소를 표시할 입력란 -->
</div>
</div>
<div class="ERROR-text">
<?php session_start();
if (isset($_SESSION['join_error'])) {
echo $_SESSION['join_error'];
unset($_SESSION['join_error']);
}
?>
</div>
<div class = "join-btn-block">
<input type="submit" value="회원가입" class = "join-btn">
</div>
</form>
<script>
function search_address() {
window.open("search_address.php", "주소 찾기"); // 새로운 창에서 search_address.php 호출
window.close();
}
</script>
<form action="login.php" method="POST">
<div class = "login-btn">
<p><input type="submit" value="로그인하러가기" class="login-btn-set"></p>
</div>
</form>
</body>
</html>
이렇게요 그리고 최대한 가운데로 정렬한 후 이쁘게 꾸며보겠습니다.
-style_join.css
body{
background-color:#f5f6f7;
}
h1 {
text-align: center;
padding: 10px 10px;
padding-bottom: 30px;
border-bottom:1px solid #848484;
}
.form-group{
width: 335px;
height: 100px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
}
.id-text{
width: 335px;
height: 30px;
}
.adr-text {
width: 335px;
height: 30px;
}
.adr-value{
width: 335px;
height: 100px;
margin-left:auto;
margin-right:auto;
display: flex;
flex-direction: column;
}
.adr-value2{
height: 23px;
}
.adr-btn{
width: 335px;
height: 10px;
margin-left:auto;
margin-right:auto;
display: inline;
}
.adr-group{
width: 335px;
height: 50px;
margin-left:auto;
margin-right:auto;
margin-top:45px;
}
.join-btn-block{
width: 335px;
height: 100px;
margin-left:auto;
margin-right:auto;
}
.join-btn{
border:1px solid #03c75b;
background-color: #03c75b;
width:350px;
height: 50px;
font-size:120%;
color: white;
text-align: center;
Cursor:pointer;
}
.login-btn{
width: 350px;
display: flex;
justify-content:space-around;
margin: 10px auto;
align-items: center;
position: relative; /*자식 요소 위치 세세하게 설정용(부모)*/
}
.login-btn-set{
border: none;
background-color:#f5f6f7;
color : gray;
font-size:120%;
transform: translate(-46%,-50%);
top:50%;
left:50%;
Cursor:pointer; /*버튼 위로가면 커서가 변한다*/
position: absolute; /*자식 요소 위치 세세하게 설정용(부모)*/
}
.ERROR-text{
display: block;
margin:20px auto 20px;
text-align:center;
bottom:5px;
color:gray;
}
실행 해보겠습니다.
이렇게 꾸며봤습니다. 그나마 깔끔해졌네요
다음에는 주소 찾기를 꾸며보겠습니다.
'개발과제' 카테고리의 다른 글
| [노말틱 모의 해킹 취업반 추가 개발과제 ] css - 게시판 꾸미기 (3) | 2023.05.17 |
|---|---|
| [노말틱 모의 해킹 취업반 추가 개발과제 ] css - 로그인한 페이지 (0) | 2023.05.09 |
| [노말틱 모의 해킹 취업반 추가 개발과제 ] css - 로그인 페이지 (0) | 2023.05.04 |
| [노말틱 모의 해킹 취업반 추가 개발과제 ] 주소 검색 기능 만들기 (0) | 2023.04.29 |
| [노말틱 모의 해킹 취업반 11주차 개발과제 ] 문의게시판 만들기 (0) | 2023.04.27 |
