inflearn logo
강의

Course
Instructor

[Code Camp] A highly concentrated front-end course created at Bootcamp

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

Resolved

1002

zerone

7 asked

0

안녕하세요. 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처음이니 엉성한 것은 어쩔 수 없겠지만 몇 가지 피드백을 받고 싶어 문의 남깁니다.

  1. 코드가 너무 긴 것 같아 불필요한 부분이 있거나 단순화 할 수 있는 부분을 알고 싶습니다.

  2. 피그마에 있는 회원가입 폼을 보며 만들었지만 거기에 있는 수치를 거의 활용하지 않고 만들었어요. 문서로 된 수치를 적용하는 게 쉽지 않았는데 이에 대한 팁이 있을까요?

  3. 이번 과제를 하면서 느낀 건 다른 코드를 많이 보는 게 큰 도움이 된다는 거였어요. 다양한 코드를 볼 수 있는 사이트다 커뮤니티가 있다면 알려주실 수 있나요? 이쪽 업계에 대한 인연이 아예 없어 정보가 너무 없네요.

css html

Answer 2

1

nwd09074926

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

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

  1. 불필요한 코드나 단순화할 수 있는 부분을 고민하시는 자세! 정말 좋아요!
    결과는 동일하지만, 코드는 더 단순하게 고치는 작업을 리팩토링 이라고 해요!
    리팩토링을 위해서는 기본중에 기본이 반복적으로 쓰이는 구문들을 어떻게하면 1번으로 줄일까? 예요!
    아직은 이러한 기술을 배우지 않았기에, 당장에 고치기는 어렵지만 이후에는 위의 태그들을 자바스크립트 변수에 넣어서 사용함으로써 코드의 반복을 줄이는 방법을 배워요!
    이 부분은 본과정에서 따라해봐요!^^

  2. 윈도우를 사용하시면 alt키를, 맥을 사용하시면 option키를 활용해보세요!
    피그마의 컴포넌트(그림) 1개를 클릭하시고, option 또는 alt키를 누르신 상태에서 다른 컴포넌트(그림) 위에 마우스를 올리시면 두 컴포넌트간의 간격을 확인할 수 있답니다!^^

  3. 소스코드는 github에 다른 사람들이 공유해두었어요!
    이 역시 아무거나 github에서 검색하여 보는 것이 아니며, 내가 사용하는 라이브러리(예를들면 react)를 사용하는데 useState라는 기능이 필요하네? 다른 사람들은 useState를 어떻게 사용하고 있지? 라는 의문이 드실 때, github에 useState를 검색하시면 다른 사람들이 어떻게 사용하고 있는지 수많은 소스코드를 확인해 보실 수 있게 되십니다!^^


업계에 대한 인연과 정보는 아예 없으시다고 하셨으나, 접근하는 태도와 자세가 너무 좋네요!
시작도 중요하지만, 끝 마무리가 더 중요한 것 아시죠?!
zero.1.0.one.xx님 함께 반드시 끝까지 완강해봐요!

0

zerone

피드백 감사합니다. 완강까지 앞으로 잘 부탁드려요.

0

communityai8509

안녕하세요, 인프런 AI 인턴이에요.

회원가입 폼을 만들었군요! 좋은 시도입니다.

이메일, 이름, 비밀번호 등의 입력란과 라디오 버튼, 체크박스를 포함한 회원가입 폼을 만들었습니다.

그런데, 문제점이 있어 보입니다. 입력란이나 버튼들이 가운데 정렬되지 않고 좌측 정렬이 되어 있군요.

정렬을 어떤 방식으로 원하시는지 알려주셔야 저도 정확한 도움을 드릴 수 있을 것 같아요.

설정하신 CSS 코드를 공유해 주시면 어떤 부분이 잘못되었는지 확인하고 도움을 드릴 수 있을 거예요.

강의자료가 너무 이쁘네요... 어떻게 만드셨는지 알 수 있을까요..?

0

132

1

반응형웹에서 가로 스크롤 생기지 말고 테이블이 밑으로 떨어지게 하려면?

0

41

1

nested 리스트일때 <ul> bullet 스타일 바꾸는 방법

0

197

2

border 선 겹침 현상

0

168

1

[CSS 01-2-2] flex-wrap 한 칸 띄고 다음 줄로 넘어가는 현상...

0

236

2

3-2강 코드로 작성하지 않은 박스가 표시됩니다...?

0

158

2

absolute관련 질문 있습니다.

0

105

2

rightSectionWrapper,leftSectionWrapper 중앙정렬 질문입니다!

0

147

2

과제 완료

0

254

2

2강 - Http 응답 데이터 - Html 질문

0

174

1

자바스크립트 함수가 실행되지 않습니다.

0

481

2

22강 연락처 추가하기 - css 파일 경로 지정

0

265

1

CreateView에 html 코드가 어떻게 적용되는 걸까요?

0

371

1

html input 태그에 readonly 속성 넣었을 때 배경이 회색으로 바뀌는 이유가 무엇인가요?

0

2714

1

leftSectionWrapper와 rightSectionWrapper 중앙 정렬

0

513

1

Mini Quiz 질문

0

284

2

animation 질문- 하나의 @keyframes로 특정 이벤트없이 한번, hover이벤트시 한번 적용 방법 문의.

0

511

2

중간중간 html 작성 코드가 안보여서 불편합니다.

0

580

1

container의 이름을 class로 주는 이유

0

492

1

wrapper__right__body요소 안에 iframe태그를 사용하는 이유가 궁금합니다.

0

375

1

CSS관련 질문

0

522

1

margin 대신 padding을 자주 쓰는 이유

0

698

1

[CSS-in-js] Emotion styled components 관련 질문입니다.

0

581

1

섹션5 | Javascript 응용과 싸이월드 실습 4탄 복습 학습자료

0

597

1