과제 검토부탁드립니다.

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

▶ CSS 정렬

해결된 질문

작성

100

fiqma에 무료버전은 코드가 없어 비슷하게 만드는데 한참을 태그 찾고 다녔습니다 ㅠㅠ

비전공자이다보니 너무 부족한 실력에 창피합니다,

부족한점이나 지적사항은 감사히 받아가겠습니다.
추가 질문으로

이름 비밀번호 비밀번호

가로줄 실선이 여백이남아

.title{
    color: rgb(121,121,121);
}
.title input{
    width: 470px;
}

으로 하여 해결하였는데 위처럼 이중으로 코드 작성이 되어 좋지 않아보이는데 무엇이 문제일까요..

아래는 과제입니다.

.page1{
    width: 1920px;
    height: 1440px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
}
.minpage1{
    width: 670px;
    height: 960px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border: 1px solid rgb(170,205,255);
    border-radius: 20px;
    box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25);
}

input{
    border: 0;
    font-size: 30px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid #CFCFCF;
}
.minpage2{
    width: 470px;
    height: 818px;
    font-family:"Noto Sans CJK KR";
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
            
}
.title{
    color: rgb(121,121,121);
}
.title input{
    width: 470px;
}


h2{
    width: 466px;
    height: 94px;
    font-family: "Noto Sans CJK KR";
    font-size: 32px;
    color: rgb(0,104,254);
}
.agree{
    width: 470px;
    display: flex;
    gap:10px;
    color: black;
    font-size: 14px;
    border-bottom: 1px solid #E6E6E6;
    padding-bottom: 10px;
    
    

}
.genders{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}

button{
    color: #0068FF;
    text-align: center;
    font-size: 18px;
    width: 470px;
    height: 75px;
    border-radius: 10px;
    border: 1px solid #0068FF;
    background: #FFF;
}

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

과제

답변 2

노원두

지식공유자

안녕하세요! alsdyalsdyd님!

올려주신 코드를 실제로 실행해 보았는데요!
정말 예쁘게 잘 만드신 것 같아요!

그리고 아래의 인풋 부분은 width의 기본 값이 작기 때문에, 여백이 남아 보이는 것이랍니다.
따라서 아래와 같이 조정해 주신 것! 잘하셨어요!^^

.title input {
    width: 470px;
}

또한, minpage와 같은 네이밍도 aaa, bbb 등이 아닌 규칙을 정해서 작성해 주신 것도 좋구요!
다만, minpage1, minpage2 등의 1, 2가 무엇을 의미하는지는 처음 보는 사람은 이해하기 어렵겠죠?!
이 부분도 다듬어 주시면 좋을 것 같아요!

마지막으로, 지금 작성해 주신 코드들이 react => next => 실무로 업그레이드 되면서 코드 작성 방식이 완전히 달라지게 되실거에요!
따라서, 실무에서는 어떠한 방식으로 코드가 업그레이드 되는지 꾸준히 같이 공부해봐요!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. alsdyalsdyd님!

과제 검토와 추가 질문에 대해 도움을 드리기 위해, 유사한 기존 답변을 찾아보았습니다. 아래 URL을 확인해 보시기 바랍니다.

CSS정렬 - 회원가입 과제 코드 공유
- 이 게시물에서는 회원가입 페이지와 관련된 다양한 태그와 스타일링 방법에 대해 자세히 설명하고 있으며, alsdyalsdyd님의 과제와 유사한 내용이 포함되어 있습니다.
HTML 관련
- 이 게시물에서 윤웅상님이 겪고 있는 텍스트 스타일링 관련 문제와 input 박스 테두리가 나타나지 않는 문제에 대한 답변이 제공됩니다. 이를 통해 alsdyalsdyd님의 input 스타일 문제 해결에 도움이 될 것입니다.
제가 머리가 안좋은걸까요…
- 최락규님의 질문에서 CSS 정렬까지 보고 회원가입 창을 만드는 방법에 대해 다양한 피드백과 스타일링 팁이 제공됩니다. alsdyalsdyd님께서 겪고 있는 flexbox 정렬 문제 해결에 유용한 정보를 확인하실 수 있습니다.
회원가입과제. 이렇게하면될까요?
- totoro님이 회원가입 과제에서 겪고 있는 SVG 및 스타일링 문제에 대한 가이드와 함께, 레퍼런스 코드 확인 방법도 제공되고 있습니다. 필요한 경우 참고해보세요.

이를 통해 문법적인 문제나 잘못된 속성 사용 등 다양한 문제를 해결하실 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

과제 검토부탁드립니다.