회원가입 과제 완료용

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

▶ CSS 정렬

작성

216

수정됨

안녕하세요!!

과제 완료해서 피드백 부탁드리고자 올렸습니다!

앞으로 잘 부탁 드립니당~

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>회원가입</title>
  <link rel="stylesheet" href="./02-signup.css">
</head>
<body>
  <div class="signUpContent">
    <h2>
      회원 가입을 위해<br>
      정보를 입력해주세요
    </h2>
    
    <label for="email" class="label text">* 이메일</label>
    <input id="email" class="input_text" type="text">

    <label for="name" class="label text">* 이름</label>
    <input id="name" class="input_text" type="text">

    <label for="password" class="label text">* 비밀번호</label>
    <input id="password" class="input_text" type="password">

    <label for="password_chk" class="label text">* 비밀번호 확인</label>
    <input id="password_chk" class="input_text" type="password">
  
    <div class="signUpChk">
      <input id="gender_w" class="input_radio" type="radio" name="gender">
      <label for="gender_w" class="label gender">여성</label>
      <input id="gender_m" class="input_radio" type="radio" name="gender">
      <label for="gender_m" class="label gender">남성</label>
    </div>

    <div class="agreeChk">
      <input type="checkbox" id="input_chk">
      <span class="agree_text">
        이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.
      </span>
    </div>
    
    <div class="out-line">
      <div class="line"></div>
    </div>

    <button>
      <span>가입하기</span>
    </button>
  </di>
  
</body>
</html>

<css>

* {
  box-sizing: border-box;
}

h2 {
  font-size: 32px;
  color: #0068FF;
  font-weight: 700;
  line-height: 47px;
}

.out-line{
  padding: 30px 0px;
}
.line {
  border-bottom: 1px solid #E6E6E6;
}

.label{
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.signUpContent{
  width: 670px;
  height: 960px;
  border: 1px solid #AACDFF;
  border-radius: 20px;
  box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ;
  display: flex;
  flex-direction: column;
  padding: 72px 100px 70px 100px;
}

.label.text{
  padding: 20px 20px 0 0;
  color: #797979;
}
.input_text{
  border-style: none;
  border-bottom: 1px solid #CFCFCF;
  height: 60px;
}

.signUpChk{
  display:flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}
.input_radio{
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
}
.label.gender{
  padding-right: 30px;
}

.agreeChk{
  display: flex;
  justify-content: center;
  align-items: center;
}
.agree_text{
  height: 22px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

button{
  width: 470px;
  height: 75px;
  background-color: #FFF;
  border: 1px solid #0068FF;
  border-radius: 10px;
}
button > span {
  font-size: 18px;
  font-weight: 400;
  color: #0068FF;
}

react node.js seo graphql next.js

답변 2

노원두

지식공유자

안녕하세요! 지루한 들소님!

과제까지 열심히 잘 따라오고 계시는군요!
전반적으로 코드에서 깔끔하다는 느낌을 많이 받았어요!^^
나중에 코드가 더 어려워 지고 복잡해 지시더라도, 현재의 깔끔함을 유지하는 개발자가 되셔야해요!

하단 버튼부분은 직접 button 태그에 css를 적용하였기 때문에, 모든 버튼을 동일한 다자인으로 사용하시려는 의도가 보이는 것도 같아서 재사용 측면도 고려하신 것 같네요!^^

꾸준히 계속 따라오시면 좋은 결과 있으실 것 같아요! 파이팅해요!^^

인프런 AI 인턴

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

질문자님의 회원가입 과제 완료에 대한 피드백을 구하고 계신 부분과 유사한 상황에서의 답변을 찾는 데 성공했습니다. 해당 질문에는 과제 제출 이후 코드에 대한 피드백을 요청하는 내용이 포함되어 있으며, 과제와 관련한 피드백을 주고받을 수 있는 링크를 안내해 드릴 수 있습니다.

다만, 직접적인 코드 리뷰와 같은 형태의 피드백을 제공하는 것은 이 답변의 범위를 벗어나므로, 기존 게시물 중 흡사한 상황에서 제시된 방향성이나 조언이 도움이 될 수 있습니다.

여기서 권할 수 있는 자원은 “CSS정렬 - 회원가입 과제 코드 공유”입니다. 이 링크에서는 다른 수강생이 회원가입 폼을 만드는 과정에서의 코드를 공유하고 있습니다. 과제 제출에 대한 구체적인 피드백은 없지만, 비슷한 과제를 진행하며 공유된 코드 참조는 질문자님께서 자신의 코드를 개선하는 데 있어 영감을 줄 수 있습니다. 제시된 CSS 스타일과 HTML 구조를 살펴보며, 질문자님의 코드와 비교하고, 필요에 따라 개선의 기회를 모색해볼 수 있습니다.

유사한 과제를 진행한 분들의 코드 공유 게시글을 참고하는 것도 좋은 방법 중 하나입니다. 공유된 코드를 검토하면서 자신의 코드에 적용할 수 있는 아이디어나 개선 방안을 찾아볼 수 있습니다. 또한, 다른 수강생들의 접근 방식을 보며 새로운 지식을 습득하거나 다양한 해결 방법에 대해 생각해볼 기회가 될 것입니다.

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

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

회원가입 과제 완료용