과제 모범답안 유무

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

CSS 정렬

해결된 질문

작성

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

        .pb {
            position: relative;
            left: 625px;
            top: 60px;
            bottom: 60px;
            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-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.radio {
            width: 90%;
            height: 23.94px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 30px;
            margin-top: 50px;
            border: solid #ffff ;
        }

        .sb2 div.checkbox {
            position: relative;
            top: 50px;
            width: 454px;
            height: 21.06px;
            border: solid 1px #ffff;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .sb2 div.hr {
            position: relative;
            top: 60px;
            border: #ffff;
        }

        .sb2 div.last {
            width: 470px;
            height: 75px;
            border: 1px solid #0068FF;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            color: #0068FF;

        }


       
    </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="radio">
                     <label><input type="radio" name="gender"> 여성 </label>
                     <label><input type="radio" name="gender"> 남성 </label>
                </div>
                <div class="checkbox">
                    <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
                </div>
                <div class="hr">
                    <hr>
                </div>
                <div class="last">
                    가입하기
                </div>
            </div>

        </div>


    </div>


</body>
</html>

어찌저찌 하긴했는데, 억지로 끼워넣기 한 기분입니다..

혹시 강사님이 해 두신 모범답안 이라던가 보고 참조할 수 있을만한 것이 있을까요??

문제점이..

스크롤이 되지 않습니다.. 그리고 pb를 relative로 해서 탑에서 60px 간격 두게 설정했는데 설정이 안먹는 느낌입니다.
div 대부분 relative로 했는데, relative로 했을 때 바로 위 div 기준으로 하는것인가요? 하다 보면 이상하게 겹쳐서 전에 div에 선이 그어져있거나, 단어가 겹쳐 있거나 합니다
1. 예) div class="hr" 로 했는데 위에 checkbox 란에 선이 이상하게 겹쳐있습니다
2. 예2) div class="last"도 relative로 설정해서 figma에 나온대로 30px 간격두고 싶었는데 hr라인이랑 겹쳐서 "가입하기" 문구가 들어가 버리더라구요..

figma에 나온 수치대로 입력하니 사이트는 이상하게 되고 해서 제가 임의로 숫자를 늘리고 해서 야매로 만들었어요..

더 좋은 script가 있으면 보고 참조하고 싶습니다.

부탁드립니다.

HTML/CSS javascript

답변 2

노원두

지식공유자

안녕하세요! 아람님!

일반적으로 position: relative, absolute 등의 명령은 특별한 경우 (예, 디자인 겹치기 등)을 제외하고는 일반적으로 display: flex를 권장하고 있습니다. (필요시 grid 허용)

해당 과제를 구현함에 있어서 position은 모두 제거하고, display: flex로 만들어 주세요!

* 보통 이러한 과정에서 기존의 코드를 지우는 것을 아까워하시면 안되고, 남들과는 다르게 다양한 방법으로 구현해 봄으로써 실력이 2배로 향상된다고 생각해 주세요!^^
실제로 만들었던 프로젝트를 새롭게 처음부터 다시 만들 때 실력이 많이 향상되며, 실력을 키우기에 자주 사용되는 방법이랍니다!

유아람

질문자

감사합니다!

position 을 지우고 말씀하신 대로 하니까 훨씬 정리가 잘 된 느낌이에요! 감사합니다

인프런 AI 인턴

안녕하세요, 유아람님. 인프런 AI 인턴입니다.

회원가입 페이지를 작성하셨군요. CSS 레이아웃을 잡는 것은 처음에는 어렵게 느껴질 수 있지만, 차근차근 시도해보면서 익숙해질 수 있습니다.

질문 주신 부분에 대한 답변

스크롤 문제 및 relative의 적용 문제
- position: relative;는 일반적으로 자신에 대한 top, left, right, bottom 오프셋의 기준을 자신에게 주며, 다른 요소들에게는 영향을 주지 않습니다. div가 겹쳐지는 이유는 relative로 위치를 조정했을 때 주변 다른 요소의 위치를 함께 고려하지 않기 때문입니다. 정확한 레이아웃을 잡기 위해서는 margin, padding 등을 사용하여 각 요소 간의 여백을 직접 조정해보는 것이 좋습니다.
- 스크롤이 되지 않는 문제는 컨테이너 높이(height)와 overflow 속성을 조정해 보세요. 예를 들어:
```
.pb {
 overflow-y: auto; /* 내용이 넘칠 때 수직 스크롤을 생성합니다 */
}
```
상하 위치가 맞지 않는 문제
- pb를 position: relative; top: 60px;으로 설정했으나, 이 위치 값이 상위 요소의 초기 위치를 기준으로 작동하기 때문에, 다른 속성이 겹치는 요소가 생길 수 있습니다. 이것들을 피하기 위해 레이아웃을 다시 조정하고, 각 요소 간의 마진을 조정해 보십시오.

참고할 수 있는 자료

아래 자료들은 이 문제를 해결하는 데 도움이 될 수 있는 레퍼런스 코드와 설명을 제공합니다:

CSS정렬 - 회원가입 과제 코드 공유: 회원가입 양식의 CSS 레이아웃과 관련된 예제를 확인 할 수 있습니다.
제가 머리가 안좋은걸까요…: 같은 과제를 수행하는 데 도움이 될 수 있는 Q&A입니다.
회원가입과제. 이렇게하면될까요?: 회원가입 페이지의 다양한 접근법을 살펴볼 수 있습니다.

위 링크들을 통해 CSS와 레이아웃에 대한 다양한 팁을 얻고 실습해보시기 바랍니다. 각 문제를 한 단계씩 해결해 나가면 분명히 좋은 결과를 얻을 수 있을 것입니다.

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

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