아이디 부분까지 했고 비밀번호 부분 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<style>
h3{
font-size:12px;
}
body{
background: #efefef;
}
input{
border:none;
}
.join_class{
width: 200px;
margin: 10px 305px;
}
.ps_box{
display: block;
height: 26px;
width: 260px;
padding: 7px 14px;
background: #fff;
border: 1px solid #ddd;
margin: 0 auto;
}
.setup_url{
font-size:11px;
color:#666;
}
</style>
</head>
<body>
<div id ="wrap">
<div class="row_group">
<div class="join_now">
<h3 class="join_class">
아이디
</h3>
<span class="ps_box int_id">
<input type= "text" class="int">
<span class="setup_url">@naver.com</span>
</span>
<h3 class="join_class">
비밀번호
</h3>
<span class="ps_box int_id">
<input type= "text" class="int">
</span>
</div>
</div>
</div>
</body>
</html>일단 비밀번호 부분 만드는건 간단했는데 네이버처럼 가운데 정렬로 맞추고 싶었다.
그래서 container역할을 하는 row_group 에 크게 width랑 margin을 줬고 그 다음 join_now에 맞는 크기를 준다음 margin을 줬더니 가운데 정렬이 됐다. 근데 이런 식으로 일일이 width를 주면 환경이 바뀌었을때 문제가 될 것 같은데 다른 방법은 없을까?
나는 비밀번호 만들때<h3 class> 를 두번 줬는데 선생님은 <row_group>을 전체로 묶어서 두번 주셨다.
만약에 join_now를 두번썼다면 조금 이해가 될 거 같은데 왜 row_group까지 올라갔어야 하는지는 모르겠다.
input_type에 아이디에는 "text" 비밀번호에는 "password"로 변경하기 >> 백으로 넘어갈때 사용하는 건가,,?
'Lecture' 카테고리의 다른 글
| 3.18 - POSITION (0) | 2021.03.18 |
|---|---|
| 3.17 (0) | 2021.03.17 |
| 2021.3.12 (Fri) (0) | 2021.03.12 |
| 2021.3.10 (Tue) - Assignment (0) | 2021.03.11 |
| 2021.3.11(Thu) - GROUP CSS FIXED VER. (0) | 2021.03.11 |
