과제 완료

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

▶ CSS 정렬

해결된 질문

작성

129

직접 짜보니 어렵습니다.

완성하고 보니 뿌듯한데 지저분하게 짠 것 같네요..

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>회원가입</title>
    <link
      rel="stylesheet"
      href="./reset.css"
    />
    <link
      rel="stylesheet"
      href="./02-signup.css"
    />
  </head>
  <body>
    <form
      class="box-form-signup"
      action=""
      autocomplete="off"
    >
      <h2>회원 가입을 위해<br />정보를 입력해주세요</h2>
      <label
        for="user-email"
        class="text-form-signup"
        >* 이메일</label
      >
      <input
        type="email"
        id="user-email"
        class="input-form-signup"
        autofocus
        required
      />
      <label
        for="user-name"
        class="text-form-signup"
        >* 이름</label
      >
      <input
        type="text"
        id="user-name"
        class="input-form-signup"
        required
      />
      <label
        for="user-password"
        class="text-form-signup"
        >* 비밀번호</label
      >
      <input
        type="password"
        id="user-password"
        class="input-form-signup"
        required
      />
      <label
        for="user-password-check"
        class="text-form-signup"
        >* 비밀번호 확인</label
      >
      <input
        type="password"
        id="user-password-check"
        class="input-form-signup"
        required
      />
      <div class="box-form-signup-gender">
        <input
          type="radio"
          name="gender"
          id="female"
        /><label for="female">여성</label>
        <input
          type="radio"
          name="gender"
          id="male"
        /><label for="male">남성</label>
      </div>
      <div class="box-form-signup-agree">
        <input
          type="checkbox"
          class="checkbox"
          id="agree"
        /><label
          for="agree"
          class="agree"
          >이용약관 개인정보 수집 및 이용, 마케팅 활용에 동의합니다.</label
        >
      </div>
      <div class="line"></div>
      <button type="submit">가입하기</button>
    </form>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
}

.box-form-signup {
  width: 670px;
  height: 960px;
  padding: 71px 100px;
  margin: 60px auto;
  border: 1px solid #aacdff;
  border-radius: 20px;
  box-shadow: 7px 7px 39px #0068ff40;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 47.36px;
  color: #0068ff;
  margin-bottom: 48px;
}

.text-form-signup {
  font-size: 16px;
  font-weight: 400;
  color: #797979;
  line-height: 23.68px;
}

.input-form-signup {
  font-size: 24px;
  width: 466px;
  height: 56.35px;
  font-weight: 700;
  border-width: 0 0 1px;
  border-color: #cfcfcf;
  margin-bottom: 24px;
}

.input-form-signup:hover,
.input-form-signup:active,
.input-form-signup:focus {
  outline: none;
  border-color: #0068ff;
  border-width: 0 0 1.5px;
}

input[type='radio'] {
  transform: scale(1.5);
  margin-right: 10px;
}

input[type='checkbox'] {
  transform: scale(1.2);
  position: relative;
  bottom: -1px;
}

.box-form-signup-gender {
  align-self: center;
  margin: 20px auto;
}

.box-form-signup-gender > label {
  font-weight: 400;
  font-size: 16px;
  padding-right: 20px;
  padding-left: 5px;
}

.box-form-signup-agree {
  height: 24px;
  align-self: center;
  margin: 40px auto;
}

.box-form-signup-agree label {
  font-weight: 400;
  padding-left: 10px;
}

button {
  width: 100%;
  height: 75px;
  font-size: 18px;
  line-height: 26.64px;
  color: #0068ff;
  background-color: white;
  border: 1px solid #0068ff;
  border-radius: 10px;
  transition: all ease-in-out 300ms;
}

button:hover {
  color: white;
  background-color: #0068ff;
}

html css

답변 2

노원두

지식공유자

안녕하세요! HI-B님!

축하합니다! 과제를 완성하셨군요!^^
코드도 깔끔하게 잘 정리되어 있는 것 같아요!

css파일도 reset.css, signup.css 등으로 잘 나누어서 유지보수 좋게 만드신 것 같구요!
:hover, :active, :focus 처럼 각각의 액션에 대해서도 잘 정돈되게 작성하신 것 같네요!^^

css를 잘게 나누어서 사용한 것처럼, 실무에서는 html도 잘게 나누어서 정돈되게 작성한답니다!
이렇게 잘게 나눈 것들을 "컴포넌트" 라고 부르며, 이와 관련된 내용도 앞으로 잘 학습하시리라 믿습니다!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. HI-B님의 과제 완료에 대해 듣고 뿌듯함을 느낄 수 있었습니다. 과제에 대한 코드 공유 및 이와 유사한 과제 해결 방법에 관심이 있으시다면, 여기 몇 가지 유사한 사례들을 링크로 공유해드리겠습니다. 이러한 사례들은 회원가입 페이지 구현에 관한 다른 학습자들의 질문 및 코드 공유로, 과제를 완성하시는 과정에서 도움이 될 만한 정보를 제공할 수 있습니다.

CSS정렬 - 회원가입 과제 코드 공유:
- CSS정렬 - 회원가입 과제 코드 공유에서는 회원가입 과제를 완성한 코드가 공유되었습니다. 이 글에서는 HTML과 CSS를 이용하여 회원가입 페이지를 구현한 사례를 볼 수 있습니다. 비록 같은 과제는 아니지만, 구현 방법에서 아이디어를 얻어 자신의 작업에 적용해 볼 수 있습니다.
HTML 관련:
- HTML 관련 질문에서는 비슷한 컨텍스트로, 특정 실습 중 발생한 문제들에 대한 질문과 해결 방법을 찾아보실 수 있습니다. 회원가입 페이지 만들기 과정 중 겪은 어려움과 그에 대한 해결책을 찾는 과정이 공유되었습니다. 여러 다른 학습자들이 겪었을 수 있는 문제에 대한 해결 방안을 찾는 데 도움이 될 수 있습니다.

과제를 진행하면서 드는 다양한 생각이나 고민은 학습 과정의 자연스러운 부분입니다. 과제를 통해 학습한 내용을 실제 코드로 구현해 보는 것은 실력 향상에 있어 매우 중요합니다. 코드가 지저분하다고 느껴지더라도, 그 과정을 통해 많은 것을 배우고 앞으로 더 나은 코드를 작성하기 위한 기반을 다질 수 있습니다.

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

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

과제 완료