이메일, 이름, 비밀번호, 비밀번호확인의 input 창만
이메일, 이름, 비밀번호, 비밀번호 확인의 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>Answer 1
0
안녕하세요 반갑습니다😄
첨부해주신 코드를 보니 각 input 태그를 div 태그가 감싸고 있는 형태이시군요!
질문하신 내용을 보면 이메일, 이름, 비밀번호, 비밀번호 확인을 입력하는 input 태그를
이렇게 만들고 싶으신 것 같아요. 제가 이해한 내용이 맞을까요?
우선 제가 제대로 이해했다고 가정하고 답변을 드릴게요!
위 사진처럼 만들기 위해서는 input 태그와, input을 감싸는 div 태그의 width 를 조정해야 해요.
아래 순서대로 한번 코드를 수정해 보세요!
input을 감싸고 있는div태그들에 모두 클래스명을 부여하고,
css에서width: 100%속성을 지정합니다.css에서
.inputform부분에 부여했던float: left !important를 제거하고width: 100%속성을 지정합니다.
싸이월드3
0
75
2
싸이월드2 관련 질문 드립니
0
90
3
과제 모범답안 유무
0
87
2
과제 연습 질문
0
69
2
<style> 에 *와 div 차이
0
86
2
과제 profile 부분 질문
0
111
2
과제 Profile 부분 질문
0
84
2
left_body_header의 자식border-top인데
0
75
2
정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.
0
126
1
태그 궁금한 점
0
162
2
HTML 회원가입
0
192
2
문법관련 질문입니다
0
252
2
윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.
0
644
2
26분50초에 세로줄 어떻게 해요 ..? ㅎㅎㅎ
0
249
2
피그마에서 css 코드가 안보여요..
1
3209
2
주석기능을 하고 싶은데 컨트롤+느낌표가 안됩니다 ㅠㅠ
0
323
2
언어 설정 -> 한글
0
288
1
2024년 html
0
225
1
피그마 유료화
0
1670
1
Fiama 링크 찾기
0
239
2
Figma는 어디에 있나요?
0
247
1
안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?
0
353
2
git 질문입니다
0
211
1
아무리 찾아봐도 피그마 링크가 보이질 않습니다.
0
308
1