피그마 회원가입 만들기

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

▶ 싸이월드 만들기 1탄

해결된 질문

작성

159

회원가입 css까지 다 완성했는데 비교해보니 비슷한 느낌은 나는것 같습니다.

혹시 코드 예제? 라던지 대표적인 완성코드를 볼 수 있는건 없나요??

한번 비교해보고 싶어서요..

추가로 남성/여성 부분 radio 동그라미가 피그마 원본? 상에는 크고 회색으로 칠해져 있는데 저건 어떻게 적용하나요??

가입하기 버튼 위 구분선도 제게 사라졌는데 원인을 알수있을까요?

<!DOCTYPE html>
<html lang="ko">
<head>
   
    <title>회원가입</title>
    <link href="./02-signup.css" rel = "stylesheet">
</head>
<body>
        <div id="tBox">
    <h2 id="title">회원 가입을 위해 <br/> 정보를 입력해주세요</h2>
            
    <input  class = "underline" type="text" placeholder="*이메일"><br><br>
    <input class = "underline" type="text" placeholder="*이름"><br><br>
    <input class = "underline" type="pw" placeholder="*비밀번호"><br><br>
    <input class = "underline" type="pw" placeholder="*비밀번호 확인"><br><br>
    
    <!-- <select>
        <option disabled="true" selected="true">지역을 선택하세요</option>
        <option>서울</option>
        <option>경기</option>
        <option>인천</option>
        <option>부산</option>
        <option>울산</option>
        <option>김해</option>  

    </select> -->

    <div id = "gender">
    <input type="radio" name="gender">여성
    <input type="radio" name="gender">남성
    </div>

    <br><br>

    <div class="checkbox-container">
    <input type="checkbox" id="terms">
            <label for="terms">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</label>
    </div>

            <br>
    <div class = "register">
    <button class = "button">가입하기</button>

    </div>
    <!-- <input type="button" value="가입하기"> -->
        </div>
</body>
</html>

* {
    box-sizing: border-box;
}

#title {
    width: 466px;
    height: 94px;
    color: #0068ff;
    font-size: 32px;
    font-family: Noto Sans CJK KR;
    text-align: justify;
}

#tBox {
    width: 670px;
    height: 960px;
    border: 1px solid #aacdff;
    margin-top: 60px;
    margin-left: 625px;
    padding: 100px;
    box-shadow: 7px 7px 39px 0px #0068ff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

input[type="text"]{
    width: 466px;
    height: 80px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #797979;
}

input[type="pw"]{
    width: 466px;
    height: 80px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #797979;
}

button {
    padding: 10px 20px;
    color: #fff;
    background-color: #0068ff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input.underline {
 border-left-width: 0;
 border-right-width: 0;
 border-top-width: 0;
 border-bottom-width: 1px;
}

#gender {
    width : 140px;
    height: 23.94px;
    border : 1px solid #fff;
    display: flex;
    justify-content: space-between;
}

.checkbox-container {
    width: 466px;
    height: 21.06px;
    border: 1px solid #fff;
    border-radius: 3px;
    align-items: center;
    display : flex;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 10px;
}

.register {
    border-top : 1px solid #e6e6e6;
    width: 470px;
    height: 1px;

}
.button {
    background-color: #FFFFFF;
    border :1px solid #0068FF;
    width: 470px;
    height: 75px;
    border-radius: 10px;
    font-size : 18px;
    color : #0068FF;
    text-align: center;
    font-weight: 400;
    line-height: 26.64px;
    font-family: Noto Sans CJK KR;
}

react node.js seo graphql next.js

답변 2

코드캠프

지식공유자

민선님, 안녕하세요!
이제 막 시작하는 단계이시군요? 앞으로으 성장을 응원하겠습니다.

회원가입 레퍼러스 코드는 수업 자료 > Section 7 에서 제공하고 있습니다.

확인부탁드려요 😀

인프런 AI 인턴

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

민선님의 질문에 대한 답변으로, 회원가입 폼 관련하여 CSS 정렬과 관련된 예제 코드를 찾고 계신 것으로 이해됩니다. 이와 관련하여, 이전에 다른 수강생이 제출한 회원가입 폼 작업 공유글이 도움이 될 것 같습니다. 해당 게시글에서는 HTML과 CSS를 사용하여 회원가입 폼을 구현한 예제가 공유되었습니다.

유용할 수 있는 게시글 링크는 다음과 같습니다:

CSS정렬 - 회원가입 과제 코드 공유
- 이 게시글에는 간단한 회원가입 폼의 HTML과 CSS 코드 예제가 포함되어 있습니다. 이 예제는 폼 생성에 있어서의 기본적인 구조와 스타일링을 보여줍니다. 비록 디자인 측면에서 사람마다 조금씩 차이가 있을 수 있으나, 기본적인 구조는 참고하시기에 유익할 것입니다.

게시글에서 제공된 코드 예제를 사용하실 때, 민선님께서 언급하신 세밀한 요소들(남성/여성 선택 부분의 radio 버튼 스타일링, 가입하기 버튼 위의 구분선 사라짐 등)에 관해서는 스타일시트(CSS)에서 해당 요소들에 대한 스타일 속성을 조정하여 해결할 수 있습니다.

CSS에서는 border, background-color, border-radius 등의 속성을 사용하여 다양한 스타일을 적용할 수 있으며, 특정 요소가 사라지는 경우는 해당 요소의 스타일 정의에서 속성이 누락되었거나 다른 스타일에 의해 덮어씌워진 경우일 수 있습니다.

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

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

피그마 회원가입 만들기

유용할 수 있는 게시글 링크는 다음과 같습니다: