inflearn logo
강의

Course
Instructor

[Code Camp] A highly concentrated front-end course created at Bootcamp

▶ CSS Alignment

과제 완료

Resolved

254

highbe

1 asked

0

직접 짜보니 어렵습니다.

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

과제.png
<!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

Answer 2

0

nwd09074926

안녕하세요! HI-B님!

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

 

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

 

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

0

communityai8509

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

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

    • CSS정렬 - 회원가입 과제 코드 공유에서는 회원가입 과제를 완성한 코드가 공유되었습니다. 이 글에서는 HTML과 CSS를 이용하여 회원가입 페이지를 구현한 사례를 볼 수 있습니다. 비록 같은 과제는 아니지만, 구현 방법에서 아이디어를 얻어 자신의 작업에 적용해 볼 수 있습니다.

  2. HTML 관련:

    • HTML 관련 질문에서는 비슷한 컨텍스트로, 특정 실습 중 발생한 문제들에 대한 질문과 해결 방법을 찾아보실 수 있습니다. 회원가입 페이지 만들기 과정 중 겪은 어려움과 그에 대한 해결책을 찾는 과정이 공유되었습니다. 여러 다른 학습자들이 겪었을 수 있는 문제에 대한 해결 방안을 찾는 데 도움이 될 수 있습니다.

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

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

강의자료가 너무 이쁘네요... 어떻게 만드셨는지 알 수 있을까요..?

0

132

1

반응형웹에서 가로 스크롤 생기지 말고 테이블이 밑으로 떨어지게 하려면?

0

41

1

nested 리스트일때 <ul> bullet 스타일 바꾸는 방법

0

197

2

border 선 겹침 현상

0

168

1

[CSS 01-2-2] flex-wrap 한 칸 띄고 다음 줄로 넘어가는 현상...

0

236

2

3-2강 코드로 작성하지 않은 박스가 표시됩니다...?

0

158

2

absolute관련 질문 있습니다.

0

105

2

rightSectionWrapper,leftSectionWrapper 중앙정렬 질문입니다!

0

147

2

2강 - Http 응답 데이터 - Html 질문

0

174

1

자바스크립트 함수가 실행되지 않습니다.

0

481

2

22강 연락처 추가하기 - css 파일 경로 지정

0

265

1

CreateView에 html 코드가 어떻게 적용되는 걸까요?

0

371

1

html input 태그에 readonly 속성 넣었을 때 배경이 회색으로 바뀌는 이유가 무엇인가요?

0

2714

1

leftSectionWrapper와 rightSectionWrapper 중앙 정렬

0

513

1

Mini Quiz 질문

0

284

2

animation 질문- 하나의 @keyframes로 특정 이벤트없이 한번, hover이벤트시 한번 적용 방법 문의.

0

511

2

CSS정렬 - 회원가입 폼 만들기 과제 질문

0

1002

2

중간중간 html 작성 코드가 안보여서 불편합니다.

0

580

1

container의 이름을 class로 주는 이유

0

492

1

wrapper__right__body요소 안에 iframe태그를 사용하는 이유가 궁금합니다.

0

375

1

CSS관련 질문

0

522

1

margin 대신 padding을 자주 쓰는 이유

0

698

1

[CSS-in-js] Emotion styled components 관련 질문입니다.

0

581

1

섹션5 | Javascript 응용과 싸이월드 실습 4탄 복습 학습자료

0

597

1