인프런 커뮤니티 질문&답변

임여명님의 프로필 이미지
임여명

작성한 질문수

[코드캠프] 시작은 프리캠프

CSS 정렬

이메일, 이름, 비밀번호, 비밀번호확인의 input 창만

해결된 질문

작성

·

1.5K

·

수정됨

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>

답변 1

0

ssy님의 프로필 이미지
ssy
지식공유자

안녕하세요 반갑습니다😄
첨부해주신 코드를 보니 각 input 태그를 div 태그가 감싸고 있는 형태이시군요!

질문하신 내용을 보면 이메일, 이름, 비밀번호, 비밀번호 확인을 입력하는 input 태그를

image이렇게 만들고 싶으신 것 같아요. 제가 이해한 내용이 맞을까요?

 

우선 제가 제대로 이해했다고 가정하고 답변을 드릴게요!
위 사진처럼 만들기 위해서는 input 태그와, input을 감싸는 div 태그의 width 를 조정해야 해요.
아래 순서대로 한번 코드를 수정해 보세요!

  1. input을 감싸고 있는 div 태그들에 모두 클래스명을 부여하고,
    css에서 width: 100% 속성을 지정합니다.

  2. css에서 .inputform 부분에 부여했던 float: left !important 를 제거하고
    width: 100% 속성을 지정합니다.

임여명님의 프로필 이미지
임여명

작성한 질문수

질문하기