-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
이메일, 이름, 비밀번호, 비밀번호확인의 input 창만
22.12.16 14:43 작성 22.12.16 14:43 수정 조회수 1.42k
0
이메일, 이름, 비밀번호, 비밀번호 확인의 input 창만 따로 왼쪽정렬하고싶은데 방법이 없을까요?
.inputform 에 float: left !important; 로 강제로
왼쪽정렬 속성을 넣어도 안되네요
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<!-- <link href="./02-signup.css" rel="stylesheet"> -->
<style>
.all {
box-sizing: border-box;
background: #FFFFFF;
width: 670px;
height: 960px;
border: 1px solid #AACDFF;
box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25);
padding: 10px;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 100px;
}
.head {
box-sizing: border-box;
width: 466px;
height: 94px;;
color: #0068FF;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 47px;
}
.line {
width: 466px;
height: 0px;
border: 1px solid #0068FF;
}
.line2 {
width: 466px;
height: 0px;
border: 1px solid #CFCFCF;
}
.inputform {
box-sizing: border-box;
border: none;
width: 158px;
height: 23.65px;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #797979;
float: left !important;
}
.check {
box-sizing: border-box;
width: 20px;
height: 20px;
background: #FFFFFF;
border: 1px solid #C4C4C4;
border-radius: 3px;
}
.agree {
box-sizing: border-box;
width: 419px;
height: 21px;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #000000;
}
.button {
box-sizing: border-box;
width: 470px;
height: 75px;
background: #FFFFFF;
border: 1px solid #0068FF;
border-radius: 10px;
font-family: 'Noto Sans CJK KR';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
/* identical to box height */
text-align: center;
color: #0068FF;
}
</style>
</head>
<body>
<div class="all">
<div class="head">
회원가입을 위해<br>정보를 입력해주세요
</div>
<br><br>
<div>
<input class="inputform" type="text" placeholder="*이메일"><br><br>
</div>
<hr class="line">
<div>
<input class="inputform" type="text" placeholder="*이름"><br><br>
</div>
<hr class="line2">
<div>
<input class="inputform" class="pw" type="password" placeholder="*비밀번호"><br><br>
</div>
<hr class="line2">
<div>
<input class="inputform" class="pw" type="password" placeholder="*비밀번호 확인"><br><br>
</div>
<hr class="line2">
<div>
<input type="radio" name="gender">여성
<input type="radio" name="gender">남성
</div>
<br><br>
<div >
<input class="check" type="checkbox">
<a class="agree">개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</a>
</div>
<br><br>
<div>
<button class="button">가입하기</button>
</div>
<!-- <select>
<option disabled="true" selected="true">지역을 선택하세요</option>
<option>서울</option>
<option>경기</option>
<option>인천</option>
</select>
<br><br> -->
</div>
<!-- <input type="button" value="가입하기"> -->
</body>
</html>
답변을 작성해보세요.
0
ssy
지식공유자2022.12.19
안녕하세요 반갑습니다😄
첨부해주신 코드를 보니 각 input 태그를 div 태그가 감싸고 있는 형태이시군요!
질문하신 내용을 보면 이메일, 이름, 비밀번호, 비밀번호 확인을 입력하는 input 태그를
이렇게 만들고 싶으신 것 같아요. 제가 이해한 내용이 맞을까요?
우선 제가 제대로 이해했다고 가정하고 답변을 드릴게요!
위 사진처럼 만들기 위해서는 input 태그와, input을 감싸는 div 태그의 width 를 조정해야 해요.
아래 순서대로 한번 코드를 수정해 보세요!
input을 감싸고 있는div태그들에 모두 클래스명을 부여하고,
css에서width: 100%속성을 지정합니다.css에서
.inputform부분에 부여했던float: left !important를 제거하고width: 100%속성을 지정합니다.
답변 1