과제 연습 질문

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

CSS 정렬

해결된 질문

작성

계속

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>회원가입</title>
    <style>
        * {box-sizing: border-box;}
        * {font-family: Noto Sans CJK KR;}

        .pb {
            width: 670px;
            height: 960px;
            border: 1px solid #aacdff;
            border-radius: 10px;
            box-shadow: 7px 7px 39px 0px #0068ff40 ;
        }

        .pb2{
            width: 470px;
            height: 818px;
            position: relative;
            top: 72px;
            left: 100px;
            }

        .sb1{
            font-family: Noto Sans CJK KR;
            font-weight: 700;
            font-size: 32px;
            color: #0068ff;
        }

        .sb2{
            display: flex;
            flex-direction: column;
            gap: 21px;
            position: relative;
            top: 60px;
        }

        .sb2 > div{
            width: 466px;
            height: 80px;
            color: #797979;
            font-size: 13px;
        }

        .sb2 div {
            border-bottom: solid 1px #cfcfcf;
        }

        .sb2 div.email{
            border-bottom: solid 1px #0068ff;
        }

        .sb2 div.radio1 {
            width: 140px;
            height: 23.94px;
            display: flex;
            margin-top: 50px;
            border: solid #ffff ;
        }

        .sb2 div.radio {
            border: solid #ffff;

       
    </style>
</head>
<body>
    <div class="pb">
        <div class="pb2">
            <div class="sb1">회원가입을 위해
                <br>
                정보를 입력해 주세요 
            </div>
            <div class="sb2">
                <div class="email">*이메일</div>
                <div>*이름</div>
                <div>*비밀번호</div>
                <div>*비밀번호 확인</div>
                <div class="radio1">
                    <div class="radio">
                     <input type="radio" name="gender"> 여성 
                     <input type="radio" name="gender"> 남성
                    </div>
                <div>
                    <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
                </div>
                </div>

            </div>

        </div>


    </div>


</body>
</html>

뭐가 잘못되었는지 모르겠어요..ㅠㅠ....

HTML/CSS javascript

답변 2

노원두

지식공유자

안녕하세요! 아람님!

html과 css의 문제를 가장 쉽게 해결하는 방법은 큰 그림에서의 구조설계를 먼저 확인하고,
그 다음에 세부적으로 들어가는 방법이랍니다!

올려주신 회원가입폼의 구조를 보면, sb1과 sb2 까지는 제대로 구조를 갖추었으나, 그 아랫부분(성별, 약관동의)은 구조가 제대로 보이고 있지 않네요!

개발자도구에서 상세히 살펴보니, 성별과 동의 영역이 sb2 영역 내부에 속해있는데, 그러지 말고 sb1, sb2, 아래에 sb3 영역을 만들고, 이 안에 집어넣게 되면 더 쉽고 정확하게 보여줄 수 있을 것 같네요!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 유아람님께서 작성하신 코드에 대해 몇 가지 개선 포인트를 안내 드리겠습니다.

코드 리뷰 및 개선점

스타일 적용 범위 수정:
- * {font-family: Noto Sans CJK KR;} 스타일은 모든 요소에 적용되지만, 중복 정의되어 있습니다. 한 번만 정의하면 됩니다.
CSS 선택자 사용:
- gap 속성을 사용할 때, display: flex; 가 포함되어야 제대로 작동합니다. .sb2 클래스에 flexbox가 설정되어 있지만, 세부 조정이 필요할 수 있습니다.
HTML 구조 및 닫는 태그:
- </div> 태그가 class="radio1" 안에 하나 더 필요합니다. 현재 라디오 버튼과 체크박스를 감싸야 하므로 구조를 조금 더 명확히 하는 것이 좋습니다.
CSS 구조 개선:
- 모든 div에 border-bottom을 설정했는데, 일부 텍스트만 밑줄 형태로 표현하려면 적절한 조건을 추가하거나, 클래스를 잘 분리해서 설정해야 합니다.
레이아웃 조정:
- 각 입력 필드 (예: 이메일, 이름 등) 사이에 적절한 패딩과 마진을 추가하여 레이아웃을 더 정리할 수 있습니다.
- .sb2 div에 대한 스타일링이 자식 요소에 모두 동일하도록 스타일이 지정되어 있는지 확인하세요.

기존 답변 참고 자료

이전에 비슷한 문제를 해결한 질문과 답변이 있는 페이지를 공유드립니다. 이 자료들을 참고하시면 더 많은 도움을 받으실 수 있습니다.

CSS정렬 - 회원가입 과제 코드 공유

여기에는 CSS 정렬과 관련한 다양한 팁과 코드 예제가 제공되어 있습니다.

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

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