CSS정렬 - 회원가입 폼 만들기 과제 질문 - 인프런

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

CSS정렬 - 회원가입 폼 만들기 과제 질문

해결된 질문

작성

866

안녕하세요. CSS정렬까지 들은 입문자입니다.

처음으로 과제를 받고 걱정 반 설렘 반으로 시작해 완성한 과제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>회원가입</title>
    <link href="./signup.css" rel="stylesheet">
</head>
<body>
    <div class="total">
    
        <h1>회원 가입을 위해<br>정보를 입력해주세요.</h1>
    
        <div class="memberinfo_box">
            <div>
                <input type="text" placeholder="*이메일">
                <br><br>  
            </div>
            <div>
                <input type="text" placeholder="*이름">
                <br><br> 
            </div>
            <div>
                <input type="password" placeholder="*비밀번호">
                <br><br> 
            </div>
            <div>
                <input type="password" placeholder="*비밀번호 확인">
                <br><br> 
            </div>
        </div>
        <div class="memberinfo_raiod">
            <div>
                <input type="radio" name="gender">여성
            </div>
            <div>
                <input type="radio" name="gender">남성
            </div>
        </div>
        <div class="agree_checkbox">
            <div>
                <input type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
                <br><br><hr>
            </div>
        </div>
        <div class="button">
            <div>
                <button>가입하기</button>
            </div>
        </div>
    </div>
    
</body>
</html>

*{
    box-sizing: border-box;
}

.total{
    width: 670px;
    height: 960px;
    border: solid 1px #0068FF;
    border-radius: 20px;
    top: 60px;
    left: 625px;
    box-shadow: 7px 7px 39px 0px #0068FF40;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-left: 800px;
    margin-top: 50px;
}

h1{
    display: flex;
    width: 600px;
    padding: 50px;

    /* border: solid 1px none;
    color: #0068FF; */
    border: none;
    color: #0068FF;
}

.memberinfo_box{
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    padding: 50px;
    justify-content: space-around;

    width: 600px;
    height: 400px;
    border: none  
}

.memberinfo_box input{
    border: none;
    border-bottom:solid 1px #CFCFCF;
    width: 500px;
    height: 100px;
}

.memberinfo_raiod{
    width: 400px;
    height: 100px;
    padding: 50px;
    /* border: solid 1px none; */
    border: none;

    display: flex;
    justify-content: center;
    justify-content: space-evenly;
}

.agree_checkbox{
    width: 640px;
    border: none;
    padding: 30px;

    display: flex;
    justify-content: center;
}

.button{
    width: 200px;
    border: none;
    display: flex;
    justify-content: center;
}

.button button{
    width: 500px;
    height: 50px;
    border: solid 1px #0068FF;
    background-color: white;
    color: #0068FF;
    border-radius: 10px;
}

스크린샷(77).png 처음이니 엉성한 것은 어쩔 수 없겠지만 몇 가지 피드백을 받고 싶어 문의 남깁니다.

코드가 너무 긴 것 같아 불필요한 부분이 있거나 단순화 할 수 있는 부분을 알고 싶습니다.
피그마에 있는 회원가입 폼을 보며 만들었지만 거기에 있는 수치를 거의 활용하지 않고 만들었어요. 문서로 된 수치를 적용하는 게 쉽지 않았는데 이에 대한 팁이 있을까요?
이번 과제를 하면서 느낀 건 다른 코드를 많이 보는 게 큰 도움이 된다는 거였어요. 다양한 코드를 볼 수 있는 사이트다 커뮤니티가 있다면 알려주실 수 있나요? 이쪽 업계에 대한 인연이 아예 없어 정보가 너무 없네요.

css html

답변 2

노원두

지식공유자

안녕하세요! zero.1.0.one.xx님!

아래 3가지 질문에 대한 답변을 드리도록 할게요!^^

불필요한 코드나 단순화할 수 있는 부분을 고민하시는 자세! 정말 좋아요!
결과는 동일하지만, 코드는 더 단순하게 고치는 작업을 리팩토링 이라고 해요!
리팩토링을 위해서는 기본중에 기본이 반복적으로 쓰이는 구문들을 어떻게하면 1번으로 줄일까? 예요!
아직은 이러한 기술을 배우지 않았기에, 당장에 고치기는 어렵지만 이후에는 위의 태그들을 자바스크립트 변수에 넣어서 사용함으로써 코드의 반복을 줄이는 방법을 배워요!
이 부분은 본과정에서 따라해봐요!^^
윈도우를 사용하시면 alt키를, 맥을 사용하시면 option키를 활용해보세요!
피그마의 컴포넌트(그림) 1개를 클릭하시고, option 또는 alt키를 누르신 상태에서 다른 컴포넌트(그림) 위에 마우스를 올리시면 두 컴포넌트간의 간격을 확인할 수 있답니다!^^
소스코드는 github에 다른 사람들이 공유해두었어요!
이 역시 아무거나 github에서 검색하여 보는 것이 아니며, 내가 사용하는 라이브러리(예를들면 react)를 사용하는데 useState라는 기능이 필요하네? 다른 사람들은 useState를 어떻게 사용하고 있지? 라는 의문이 드실 때, github에 useState를 검색하시면 다른 사람들이 어떻게 사용하고 있는지 수많은 소스코드를 확인해 보실 수 있게 되십니다!^^